React - Props

Props..?

Props란 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체이다. props를 이용하면 변수, 함수, state 값, event handler등 어떤 값이든 자식 컴포넌트에 전달할 수 있다.

Props 사용(부모 컴포넌트 시점 👀)

부모 컴포넌트에서 자식 컴포넌트에게 정보를 전달하기 위해서는 1. 자식 컴포넌트를 만들고 import를 한다. 2.자식 컴포넌트를 return 문 안에 넣어준다. 3. 어떤 데이터를 자식 컴포넌트로 보내줄지 파악한 후 4. return 문 안의 자식 컴포넌트에게 속성 값을 추가해준다. 만약 넘겨주고자 하는 값이 둘 이상이라면 넘겨주고자 하는 값 사이를 띄워줌으로써 구분을 해주고 원하는 만큼 추가하면 된다.

// Parent.js(부모 컴포넌트)

import React from 'react';
import Child from './Child';

const Parent = () => {

  const animal = '호랑이';
  return (
    <>
      <h1>부모 컴포넌트입니다.</h1>
      <p>{animal}</p>
      <Child pet={animal} englishName="tiger" />
    </>
  );
};

export default Parent;

함수 props 전달

import React from 'react';
import Child from './Child';

const Parent = () => {

  const testConsole = () => {
    console.log('테스트 입니다.');
  };

  return (
    <>
      <h1>부모 컴포넌트입니다.</h1>
      <button onClick={testConsole}>클릭</button>
      <Child test={testConsole} />
    </>
  );
};

export default Parent;

데이터 적용 (자식 컴포넌트 시점 👀)

함수에서 인자를 받아 사용하는 것 처럼 함수 컴포넌트도 부모 컴포넌트에서 보내준 데이터를 받아 사용할 수 있다. 이때 부모 컴포넌트가 전달해 준 props는 하나의 객체로 합쳐져서 함수 컴포넌트에 전달된다.
매개변수의 이름은 마음대로 지을 수 있지만 부모 컴포넌트로부터 받은 props를 표현한다는 것을 나타내기 위해 보통은 props라고 짓는다.
객체로 전달 받았기 때문에 객체의 접근 방법을 사용하여 값을 적용시키면 된다.

// Child.js(자식 컴포넌트)

import React from 'react';

const Child = (props) => {
  console.log(props);            

// {pet: '호랑이', englishName: 'tiger'}

  return (
    <>
      <h2>자식 컴포넌트입니다.</h2>
      <p>{props.pet}</p>         // 호랑이
      <p>{props.englishName}</p> // tiger
    </>
  );
};

export default Child;

함수 props의 사용

// Child.js (자식 컴포넌트)

import React from 'react';

const Child = (props) => {
  console.log(props);           // {test: () => {console.log('테스트 입니다.')}}

  return (
    <>
      <h2>자식 컴포넌트입니다.</h2>
      <button onClick={props.test}>클릭</button>
    </>
  );
};

export default Child;