[React] Props drilling(프로퍼티 내려꽂기)

Prop Drilling(프로퍼티 내려꽂기)

프로퍼티 내려꽂기는,
프로퍼티를 내려꽂는 것을 의미?
컴포넌트 트리에서 다른 컴포넌트로 데이터를 전달하는 것을 의미한다.

예제

const Toggle = () => {
  const [ isOn, setIsOn ] = useState(false)
  const handleToggle = () => {
    setIson(!isOn)
  }
  return (
    <div>
      <div>The button is {isOn ? 'on' : 'off'}</div>
      <button onClick={() => handleToggle()}>Toggle</button>
    </div>
  )
}

이 컴포넌트를 Toggle, Switch, SwitchMessage, SwitchButton의 컴포넌트로 분리하면서 리팩토링하면 다음과 같다.

const Toggle = () => {
  const [isOn, setIsOn] = useState(false);
  const handleToggle = () => {
    setIsOn(!isOn);
  };
  return (
    <div>
      <Switch isOn={isOn} handleToggle={handleToggle} />
    </div>
  );
};

const Switch = ({ isOn, handleToggle }) => {
  return (
    <div>
      <SwitchMessage isOn={isOn} />
      <SwitchButton handleToggle={handleToggle} />
    </div>
  );
};

const SwitchMessage = ({ isOn }) => {
  return <div>The button is {isOn ? "on" : "off"}</div>;
};

const SwitchButton = ({ handleToggle }) => {
  return <button onClick={() => handleToggle()}>Toggle</button>;
};

참고

1. Kent C. Dodds, Prop Drilling
2. edykim님 / 윗글의 번역본