React Props

props의 특징

 

- 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값

- 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당

- props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환

  ->컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용

- 객체 형태

- 함부로 변경될 수 없는 읽기 전용(read-only) 객체

 

How to use props

1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의
2. props를 이용하여 정의된 값과 속성을 전달
3. 전달받은 props를 렌더링

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child />             // --> Child 컴포넌트를 불러옴으로서 Parent가 Child의 부모가 되었다.
    </div>
  );
};

function Child() {
  return (
    <div className="child"></div>
  );
};

 

Child 컴포넌트에 텍스트 속성을 부여하여 사용하는 방법.

<Child text={"I'm the eldest child"} />

 

props를 사용하여 text속성 가져오는 방법.

function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
};

이때 props는 객체이고 JSX를 사용하여 {}를 쓴 다음 객체 표현식을 불러오는 방법을 쓴 것이다.

 

예시) <Learn />을 사용해서 App의 자식 컴포넌트로 만들고 Learn안에 props라는 변수를 할당해 return시 구조분해할당을 사용하여

props.text로 렌더링했다.

 

const App = () => {
  const itemOne = "React를";
  const itemTwo = "배우고 있습니다.";

  return (
    <div className="App">
      {/* Learn 컴포넌트에 itemOne 과 itemTwo 를
      props 로 전달하세요 */}
      <Learn text={itemOne} />
      <Learn text={itemTwo} />
    </div>
  );
};

const Learn = (props) => {
  // 전달받은 props 를 아래 <div> tag 사이에 사용하여
  // "React를 배우고 있습니다" 라는 문장이 렌더링되도록 컴포넌트를 완성하세요
  return <div className="Learn">{props.text}</div>;
};