[React] Props 특징 및 사용방법

Props의 특징

외부로 부터 전달받은 값.

변할 수 없는 값으로, 컴포넌트의 속성(property)을 의미한다.

상위 컴포넌트로부터 상속받아서 함수의 전달인자처럼 받아 리액트 엘리먼트를 반환한다.

객체의 형태를 가지고있다.

읽기 전용 객체이다.

 

만약 props가 변하게 된다면, props를 상속시켜준 상위 컴포넌트에 영향을 미치게 되고 side effect를 일으킬 수 있다.

이는 React의 단방향, 하향식 데이터 흐름에 위배가 되므로 props는 변하지 않는 값이 되어야 한다.

 

props 사용방법

1. 상위 컴포넌트를 만든다.

2. 하위 컴포넌트를 만든다. 그 후 상위 컴포넌트 내부에 하위 컴포넌트 이름을 작성한다.

하위 컴포넌트 이름 뒤에는 반드시 띄어쓰기 + / 를 써주어야 한다.

// 1. 상위 컴포넌트 만들기
function Parent() {
  return (
    <div className="parent">
      <h1>here is parent component</h1>
      <Child /> // 3. 하위 컴포넌트 불러오기
    </div>
  );
};

// 2. 하위 컴포넌트 만들기
function Child() {
  return (
    <div className="child"></div>
  );
};

3. 상위 컴포넌트에 하위 컴포넌트에 전달하고자 하는 내용을 속성과 값으로 정의한다.

<하위 컴포넌트명 속성명={값} /> 꼴로 정의한다.

이때 생성한 속성과 값들은 객체 형태 {속성 : 값}를 가지고 있으며, props가 된다.

function Parent() {
  return (
    <div className="parent">
      <h1>here is parent component</h1>
      <Child text={"I'm a child component"} /> // 속성과 값으로 정의
      <Child />
    </div>
  );
};

4. 하위 컴포넌트에서 상위 컴포넌트에서 전달받은 속성을 이용하여 props를 사용한다.

props를 인자로 받고, {props.속성값} 꼴로 사용한다.

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

 

5. 또 다른 사용법 : props.children

상위 컴포넌트에서 하위 컴포넌트를 불러오는 태그 사이에 전달해 주고 싶은 값을 직접 넣어준 뒤,

하위 컴포넌트에서 {props.children} 형태로 사용할 수 있다.

function Parent() {
  return (
    <div className="parent">
        <h1>here is parent component</h1>
        <Child>I'm a child component</Child>
    </div>
  );
};

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