[React] - Props

📝Props의 정의

props란 컴포넌트의 속성값을 의미하며, 더 정확히는 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체이다.
props를 이용해서 전달하고자 하는 어떤 값이든(변수, 함수, state값, event handler 등..) 모두 자식 컴포넌트에 전달할 수 있다.

📝Props는 언제 사용할까?

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

아래 코드의 컴포넌트에서는 '강아지'라는 문자열을 animal이라는 변수에 담아 관리한다.
여기에서 animal이라는 변수를 사용해

{animal}

과 같이 화면에 표기할 수 있다.

import React from 'react';

const Parent = () => {
  const animal = '강아지';

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

export default Parent;

만약에 Parent 컴포넌트의 하위 컴포넌트인 Child 컴포넌트가 있다고 가정한다.
이 컴포넌트에서도 부모 컴포넌트와 똑같이 화면에 '강아지'라는 문자열을 표현하고 싶을 때 props를 사용할 수 있다.

// Parent.js (부모 컴포넌트)
import React from 'react';

const Parent = () => {
  const animal = '강아지';

  return (
    <>
      <h1>부모 컴포넌트입니다.</h1>
      <p>{animal}</p>
      <child pet={animal} englishName="dog" />
    </>
  );
};

export default Parent;

먼저 Child 컴포넌트를 만들고 import를 한다. 그리고 Child 컴포넌트를 return 문 내에 넣어준다.
그렇다면 어떤 데이터를 자식 컴포넌트로 보내어주어야 할까?

위의 코드에서 보면 부모 캄포넌트에도 이미 선언이 되어있고, 자식 컴포넌트에서도 필요로 하는 데이터는 animal이라는 변수이다.

보내주고자 하는 데이터가 파악되었다면 태그에 속성을 주입하듯 pet={animal} 과 같이 자식 컴포넌트에 속성 값을 추가해준다.
여기에서 pet은 자식 컴포넌트에서 데이터를 받을 때 사용되는 인식표라고 생각하면 된다.
'강아지'라는 데이터가 animal이라는 그릇에 담겨있든 부모 컴포넌트에서 선언된 animal이라느 변수를 자식 컴포넌트에 넘겨줄 때 pet이라는 그릇에 담아 보내주는 것 !

🖍 자식 컴포넌트에서의 전달 받은 데이터 적용

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

import React from 'react';

const Child = (props) => {
  return (
    <>
      <h2>자식 컴포넌트입니다.</h2>
      <p>{props.pet}</p> // 강아지
      <p>{props.englishName}</p> // dog
    </>
  );
};

export default Child;

함수에서 인자를 받아서 사용하듯, 함수 컴포넌트 또한 const Child = (매개변수) => {} 와 같이 부모 컴포넌트에서 보내준 데이터를 받아서 사용할 수 있다.
자식 컴포넌트에서 부모 컴포넌트로부터 받은 props를 표현한다는 것을 명시적으로 나타내기 위해 const Child = (props) => {}라고 매개변수 이름을 props로 짓는것이 컨벤션이라고 한다.

{props.pet} | {props.englishName}으로 객체에 접근하면 원하고자 하는 '강아지'와 'dog'을 받아서 사용할 수 있다.

🖍 함수 전달과 적용

함수를 보내고 적용시킬 때는 어떻게 할 수 있을까?

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;

부모 컴포넌트에 testConsole이라는 함수를 선언하고, 버튼의 클릭 이벤트 핸들러에 걸어주었다.
해당 함수를 자식 컴포넌트에서도 사용하고 싶을 때, 부모 컴포넌트에서는 전달하고자 하는 함수를 어떤 이름으로 넘겨줄지 정해준다. 위의 코드에서는 test라는 이름으로 넘겨주도록 정해준 것!

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

자식 컴포넌트에서 함수를 props로 받아와 props.test로 불러다 사용할 수 있다.