Component와 Props

Component

사전적 정의

명사 (구성) 요소, 부품

React

React에서 구성 요소는 앱의 일부를 렌더링하는 재사용 가능한 모듈입니다. 이러한 부분은 크거나 작을 수 있지만 대개 명확하게 정의됩니다. 단일한 분명한 목적을 위해 사용됩니다.

예시

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')
);

위의 Welcome Component는 name을 props로 받고 해당 이름과 함께 <h1>Hello, {props.name}</h1>을 나타낸다.

만약에 Component없는 상태에서 인사할 인원이 많고 매번 명단이 바뀐다면 어떻게 될까? 우리는 명단 하나하나를 보면서 <h1>Hello, {name}</h1>을 써야할 것이다. 따라서 이를 효율적으로 설계하기위해 Component를 사용하는 것이다.

 

Component의 정의를 연결해 설명하자면 사용자 Welcome Component를 설계하여 더 이상 명단을 확인할 필요없이 <Welcome>안에 name props를 넣어주면 끝이다. 위의 예시에서는 인원수가 적어 이름을 하나씩 집어 넣었지만 명단이 많을 경우 list변수로 명단을 만들고 map함수를 이용해 설계하면 될 일이다.

사용 조건

• 하나의 최상위 태그만 써야한다.
• 컴포넌트의 이름은 항상 대문자로 시작합니다.
• 컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있습니다.

props

React

props은 Component로 전달되는 모든 데이터입니다. props은 HTML attribute와 비슷합니다. props은 Component 호출 내에 작성되며, HTML attribute와 동일한 구문(prop="value")을 사용합니다.

사용 조건

• React에서 데이터 흐름은 단방향입니다. props은 상위 Component에서 하위 Component로만 전달할 수 있으며 읽기 전용입니다.
• 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.

출처

https://developer.mozilla.org/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started

React 시작하기 - Web 개발 학습하기 | MDN

https://ko.reactjs.org/docs/components-and-props.html

Components and Props – React