Props 란?

컴포넌트의 속성값을 의미하며, 더 정확하게는 부모 컴포넌트로 부터 전달받은 데이터를 지니고 있는 객체라는 의미이다
props를 사용하면 데이터 관리를 효율적으로 할 수 있기 때문에 실무에서도 많이 쓰임

props를 이용하면 전달하고자 하는 어떤값이든(문자, 숫자, 변수, 함수) 모두 자식 컴포넌트에 전달할 수 있다

Props 사용이 필요한 경우

1. 부모 컴포넌트에서의 데이터 전달

props 사용할 때 우리가 집중해야하는 것은 자식 컴포넌트로 어떤 데이터를 전달해야하는가 이다.
부모 컴포넌트에는 이미 있고 자식 컴포넌트에서도 필요한 데이터는 무엇일까?

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

import React from 'react';
import Child from './Child'; // child 컴포넌트 가져옴

const Parent = () => {
  const animal = '호랑이';

  return (
    <>
      <h1>부모 컴포넌트입니다.</h1>
      <p>{animal}</p>

	  <Child pet={animal} englishName="tiger"/>
    </>
  );
};

export default Parent;

2. 자식 컴포넌트에서 부모 컴포넌트로부터 전달받은 데이터 적용

함수 컴포넌트도 매개변수를 설정해 부모컴포넌트에서 보내준 데이터를 받아서 사용할 수 있다
이때 전달 받은 데이터는 하나의 객체로 합쳐져서 자식 컴포넌트로 전달된다
매개변수명은 부모컴포넌트로 부터 받은 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;

어떻게 부모컴포넌트로 부터 받은 데이터를 사용할까?
이 데이터는 객체 형태로 받아온 값이므로 객체접근방법으로 이 데이터가 보여지고자 하는 곳에 사용하면 된다

3. 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;

• 자식컴포넌트

// 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;

Object Destructuring

const Item = (props) => {
  return (
    <div>
    	<img src={props.imageUrl} key={props.name} />
    	{props.name} 는 {props.count}개
    </div>
  )
}

props.속성명으로 property key에 하나하나 접근해야했다면 이를 개선하기 위해 objcet destructuring을 사용한다

const Item = ({name, imageUr, count}) => {
  return (
    <div>
    	<img src={imageUrl} key={name} />
    	{name} 는 {count}개
    </div>
  )
}

pros가 입력되어있던 argument자리에 props를 구조분해 함으로써 넘겨준 속성명으로 바로 접근을 할 수 있다

Props.children

모든 리액트 컴포넌트에 기본적으로 포함되어 있는 property 인데, 레이아웃을 짤때 굉장히 많이 쓰인다

//Layout component
const Layout = ({children}) => {
  return(
    <div>
    <Header />
    {children}
    <Footer />
    </div>
  )
}

// Homepage component
const Homepage = () => {
  return(
    <Layout>
    <div>This is Home page</div>
    </Layout>
  )
}

여기서 두 컴포넌트가 연결이 되어 있다면, 'This is Home page'라는 문구는 결국 Layout컴포넌트로 감싸진 children 속성이라고 볼 수 있다

<div>
<Header />
<div>This is Home page</div>
<Footer />
</div>