[React]함수형 컴포넌트에 props 전달

이번 포스팅에서는 React에서 함수형 컴포넌트에 props를 전달하는 방법과 props의 개념에 대해 소개합니다.

 

목차

1. props 개념
2. 부모 컴포넌트가 자식 컴포넌트에 props 전달
3. 자식 컴포넌트가 부모 컴포넌트에 props 전달
4. 정리

---

props 개념

React에서 애플리케이션을 설계할 때 컴포넌트 간 데이터의 흐름을 구조하는 것이 중요합니다.

 

여기서 말하는 컴포넌트 간 데이터의 흐름은 한 컴포넌트에서 다른 컴포넌트로 데이터 전달(props의 전달)을 의미합니다.

 

props의 전달은 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 것이며, 자식 컴포넌트는 한 개가 될 수 있고 두 개 이상이 될 수 있습니다.

 

부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 과정을 React와 프로그래밍 개념을 제외하고 "부모"와 "자식"이라는 개념으로 생각해봅시다.

 

부모님은 재산 1억 원이 있으며, 첫 째 자식에게 6천만 원 둘째 자식에게 4천만 원을 전달합니다.

(재산 1억 원을 자식들에게 나누어줬기 때문에 실제로 부모님의 재산은 0원이 되어야 하지만, 금액의 차감은 고려하지 않고 금액의 전달에 중점을 두어 설명합니다.)

 

전달받은 금액은 형제간 전달할 수 없습니다.

 

첫 째 자식은 부모님에게 전달받은 6천만 원을 자기 자식에게 전달할 수 있습니다.

 

위에서 설명한 내용을 React에 적용하면 금액은 props이며, 부모님이 자식에게 돈을 전달하는 과정은 props의 전달하는 것과 동일합니다.

 

React에서 주의사항으로는 자식 컴포넌트가 부모 컴포넌트에게 콜백 함수를 사용해서 props를 전달할 수 있는데, 이 과정이 복잡하며, 전달하는 기능(함수)은 부모 컴포넌트에서 구현되어야 합니다.

 

다음은 위에서 설명한 내용을 React에 적용하여 표현한 관계도입니다.

반응형

---

부모 컴포넌트가 자식 컴포넌트에 props 전달

다음은 부모 컴포넌트인 ParentComponent가 자식 컴포넌트 ChildComponent에게 money라는 값을 props로 전달하는 코드입니다.

const ParentComponent = () => {
  return (
    <div>
      <b>ParentComponent Money: 10000</b>
      <ChildComponent money={10000} />
    </div>
  );
};

const ChildComponent = (props) => {
  return (
    <div>
      <br />
      <b>ChildComponent Money: {props.money}</b>
    </div>
  );
};

1. 부모 컴포넌트가 자식 컴포넌트에게 값(변수 또는 객체)을 전달하려면 먼저 속성 이름을 정의합니다. money라는 이름으로 props의 속성을 지정했으며, money에 값 10000을 할당합니다.

2. 부모 컴포넌트가 전달한 props에 접근하기 위해 인수로 props를 작성합니다. 

3. props의 속성에 접근하기 위해 도트 표기법을 사용하여 props의 money 속성을 접근합니다.

 

자식 컴포넌트가 props를 제대로 전달했는지 웹 브라우저에서 확인하기 위해 크롬 개발자 도구에서 상단에 Components를 클릭하여 자식 컴포넌트인 ChildComponent를 클릭합니다.

 

ChildComponent가 전달받은 props를 확인할 수 있습니다.

---

자식 컴포넌트가 부모 컴포넌트에 props 전달

다음은 자식 컴포넌트인 ChildComponent가 부모 컴포넌트 ParentComponent에게 props를 전달하는 코드입니다.

 

버튼을 클릭하면, 자식 컴포넌트가 부모 컴포넌트에서 구현한 함수를 호출하여 alert창을 띄웁니다.

const ParentComponent = () => {
  function AlertFunc(money) {
    alert(money);
  }

  return (
    <div>
      <b>ParentComponent Money: 10000</b>
      <ChildComponent money={10000} AlertFunc={AlertFunc} />
    </div>
  );
};

const ChildComponent = (props) => {
  return (
    <div>
      <br />
      <b>ChildComponent Money: {props.money}</b>
      <br />
      <button
        onClick={() => {
          props.AlertFunc(props.money);
        }}
      >
        props 전달
      </button>
    </div>
  );
};

1. 부모 컴포넌트에서 함수를 구현합니다.

2. 1번 과정에서 구현한 함수와 값 10000을 AlertFunc와 money라는 props의 속성 이름으로 정의하여 자식 컴포넌트에게 전달합니다.

3. 부모 컴포넌트가 전달한 props에 접근하기 위해 인수로 props를 작성합니다.

4. 버튼을 클릭하면, 전달받은 props의 AlertFunc 함수를 호출하며, props.money를 매개변수로 전달합니다.

---

정리

• 형제 컴포넌트끼리는 props를 전달할 수 없습니다.(부모 컴포넌트를 거쳐서 전달할 수는 있지만, 구현이 복잡합니다.)
• props는 위, 아래로만 전달할 수 있습니다.
• 함수형 컴포넌트에서 props를 사용하기 위해서는 인수로 props를 작성해야 합니다.