Props

다른 컴포넌트를 import 해서 사용하는 컴포넌트를 **부모 컴포넌트**라고 하고, 사용되어지는 컴포넌트를 **자식 컴포넌트**라고 합니다.

function App() {
  
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

App 에서 사용되고 있는 Counter 컴포넌트가 자식 컴포넌트이고, App 컴포넌트는 부모 컴포넌트 입니다.

Props로 string 보내기

부모 컴포넌트에서 자식 컴포넌트로 데이터를 보내고자 할 때는 **props**를 사용합니다.

• 부모 컴포넌트 데이터 전달하기

function App() {
  
  return (
    <div className="App">
      <Counter click="click1" />
    </div>
  );
}

사용하고 있는 Counter 컴포넌트로 click이라는 데이터를 보내고자 할 때, click을 key로 사용하고 key에 대한 value로 문자열 "click1"이라는 데이터를 보내줍니다.

• 자식 컴포넌트 데이터 받기

import React, { useState } from 'react';

const Counter = (props) => {
    const [count, setCount] = useState(0);
    const increment = () => {
        setCount(count + 1);
    };
    return (
        <div className="App">
          <button onClick={increment}>{props.click} {count}</button>
        </div>
    );
};

export default Counter;

Counter 함수의 인자로 props를 넣고 props에 들어가 있는 click key를 사용해줍니다. props.click으로 사용할 수 있습니다.

• 디폴트값 설정하기

// props.click이 존재할 경우 사용, 없을 경우 'Click'사용
const clickString = props.click || 'Click';

return (
    <div className="App">
      <button onClick={increment}>{clickString} {count}</button>
    </div>
);

props.click이 존재하면 그대로 사용해주고, 전달된 데이터가 없는 경우에는 'Click'으로 디폴트 값을 clickString으로 정하고 사용해줍니다.

Props로 state 보내기

string이 아닌 다른 데이터를 보내는 경우에는 객체 {}를 사용하여 전달해줍니다.

const [buttonName, setButtonName] = useState('클릭');

const changeName = () => {
  setButtonName('click');
}

return (
  <div className="App">
    <Counter click={buttonName} />
		<button onClick={changeName}>Change name</button>
  </div>
);

click key를 통해 buttonName state를 전달하고자 할 때 {buttonName}으로 전달해줍니다.