[React.js] 4. Component와 Props

3장에서는 React를 이루는 가장 작은 단위인 Element에 대해서 알아 봤었다.

이번 4장에서는 재사용이 가능한 Component와 props - 속성(properties) 에 대해서 배울 수 있다.

 

 

Component를 정의하는 방법1 - Javascript 함수 작성

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

 

Component를 정의하는 방법2 - ES6 Class 사용

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

 

딱 봐도 1번 방법이 생산성면에서 좋아보인다. (간결성이 2번 방법에 비해 좋기때문에)

 

 

이렇게 만든 Component를 사용하는 방법은 아래와 같다.

const element = <Welcome name="Sara" />;

ReactDOM.render(
  element,
  document.getElementById('root')
);

 

Component를 생성했다는 것은 html에서 말하는 tag를 하나 생성한 것과 같다.

(html tag와는 분명히 구별되어야 하므로 맨 앞글자를 꼭 대문자로 써야한다. 소문자로 쓴 경우 html tag로 인식한다.)

 

element에 Welcome 이라는 Component를 만들되 그때의 속성값 (props 값) 은 name="Sara" 가 전달된다.

그럼 {props.name} 에는 "Sara" 가 전달되고, 하나의 JSX를 만들어 return 하게된다.

 

결론적으로 const element 에는 "<h1>Hello, Sara</h1>" 가 들어가게 된다.

 

 

좀 더 나아가 아래와 같이 컴포넌트가 다른 컴포넌트를 포함시킬 수도 있다.

 

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

위의 경우는 App Component안에서 Welcome Component를 사용하고 있음을 알 수 있다.

우리는 Component를 통해 코드를 재사용해서 새로운 component를 만들 수 있음을 알 수 있다.

 

 

 

+ props는 읽기 전용!!

React에서 모든 Component는 자신의 props를 다룰때 props자체를 수정해서는 안된다.

아래와 같이 사용해서는 안된다!

 

function withdraw(account, amount) {
  account.total -= amount;
}