[React] Props collection 패턴으로 prop 전달하기

유데미 강의를 듣고 실습한 내용 정리하기

---

Props 넘겨주는 방법

리액트에서 하위 컴포넌트로 prop을 넘겨주는 방법은 다음과 같이 컴포넌트에 속성명을 작성하고 값을 넘겨준다.

 <ClapContainer
      setRef={setRef}
      data-refkey="clapRef"
      handleClick={updateClapState}
    >

prop을 전달 받은 컴포넌트는 함수의 인자로 prop을 받는다.

const ClapContainer = ({ children, setRef, handleClick, ...restProps }) => {
  return (
    <button
      ref={setRef}
      className={styles.clap}
      onClick={handleClick}
      {...restProps}
    >
      {children}
    </button>
  );
};

Prop 이름을 변경하고 싶다면?

버튼을 클릭 했을 때 작동할 핸들러 함수를 prop으로 넘겨주어 onClick속성에 할당한다.
그런데 만약 핸들러 함수를 넘겨주는 속성명을 handleClick에서 다른 이름으로 변경한다면 어떻게 해야 할까?
handleClick 을 clickHandler로 바꾼다면 부모 컴포넌트의 속성명도 변경해야 하며 자식 컴포넌트의 인자 명도 변경해야 한다.
그리고 자식에서 해당 함수를 사용하는 부분의 이름도 바꾸어 주어야 한다.

 <ClapContainer
      setRef={setRef}
      data-refkey="clapRef"
      clickHandler={updateClapState} //`handleClick` -> `clickHandler`
    >

const ClapContainer = ({ children, setRef, clickHandler, ...restProps }) => { //`handleClick` -> `clickHandler`
  return (
    <button
      ref={setRef}
      className={styles.clap}
      onClick={clickHandler} //`handleClick` -> `clickHandler`
      {...restProps}
    >
      {children}
    </button>
  );
};

이름 한번 수정하면 많은 변경 과정을 거쳐야 한다.

이럴 때 props collection을 사용하면 조금 더 간편한 유지보수가 가능해진다.

Props Collection 으로 전달하기

click 이벤트를 위한 toggleProps 객체를 만든다. onClick 속성에 등록할 함수를 넣는다.

  const toggleProps = {
    onClick: updateClapState
  };

이렇게 만들어진 객체를 자식 컴포넌트에 전달해준다.

  <ClapContainer setRef={setRef} data-refkey="clapRef" {...toggleProps}>

자식 컴포넌트에서 받은 prop을 콘솔에 찍어보면 다음과 같이 부모에게서 전달 받은 속성들을 볼 수 있다.

객체로 전달한 onClick 속성과 값이 prop에도 들어있다.

자식 컴포넌트에서 restProps으로 받는다.
이렇게 받은 prop을 따로 분해할 필요 없이 바로 prop을 사용할 엘리먼트의 속성에 등록해서 사용 가능하다.

const ClapContainer = ({ children, setRef, ...restProps }) => {
  console.log({ ...restProps });
  return (
    <button ref={setRef} className={styles.clap} {...restProps}>
      {children}
    </button>
  );
};

button 에는 restProps에 있는 onClick:updateClapState이 등록되어 클릭이벤트시 해당 함수를 실행한다.

추후 클릭 이벤트 핸들러의 이름을 변경하고싶다면
생성해 두었던 props collecion내에서만 수정해주면 된다.

 const toggleProps = {
    onClick: anotherHandler,
  };