[React] 다른 Component로 값 넘기기

문제 상황

마이페이지를 구현하던 중 문제에 직면했다.

(못생긴 ui는 차치하고) 좌측의 사이드바에서 선택한 메뉴에 따라 컨텐츠를 바꿔주고 싶었는데, 구조를 어떻게 짜야할까 고민에 빠졌다.

1. 사이드바와 컨텐츠 부분을 완전히 별개의 컴포넌트로 구성

const MyPage = () => {
  return (
    <div>
      <div>
        <Sidebar />
      </div>
      <div>
        <Content />
      </div>
    </div>
  );
};

2. 하나로 퉁치는 구성

const MyPage = () => {
  return (
    <div>
      <div>
        <!-- 사이드바 선택이 어쩌고 저쩌고 -->
      </div>
      <div>
        <!-- 사이드바 값이 어쩌고면, 컨텐츠 어쩌고 -->
        <!-- 사이드바 값이 저쩌고면, 컨텐츠 저쩌고 -->
      </div>
    </div>
  );
};

1안이 깔끔해보였지만, 문제는 사이드바 컴포넌트에서 선택한 정보를 컨텐츠 컴포넌트로 어떻게 넘겨줄 것인가가 문제였다.

해결

How to pass data from one component to other component in ReactJS ? 해당 포스트에서 답을 얻을 수 있었다.

1. 자식 컴포넌트에서 부모 컴포넌트로 값을 돌려주는 callback function을 부모 컴포넌트에서 만든다.
2. callback function을 자식 컴포넌트에 props로 전달해준다.
3. 자식 컴포넌트에서 해당 callback function을 사용하면 값이 부모 컴포넌트로 전달된다.

나의 경우 아래와 같이 구성을 해보았다.

MyPage.jsx

const MyPage = () => {
  const [menu, setMenu] = useState("info");

  const onClickMenu = (id) => {
    setMenu(id);
  };

  return (
    <div>
      <div>
        <Sidebar onClickMenu={onClickMenu} />
      </div>
      <div>{menu === "info" ? <Info /> : <Post menu={menu} />}</div>
    </div>
  );
};

Sidebar.jsx

const menus = [
  {
    id: "info",
    text: "내정보",
  },
  {
    id: "question",
    text: "질문글",
  },
  {
    id: "answer",
    text: "답글",
  },
  {
    id: "comment",
    text: "댓글",
  },
];

const Sidebar = ({ onClickMenu }) => {
  const [selectedMenu, setMenu] = useState("info");

  const onClick = (id) => {
    setMenu(id);
    onClickMenu(id);
  };

  return (
    <div>
      <ul>
        {menus.map((menu) => (
          <li
            key={menu.id}
            className={`${
              menu.id === selectedMenu ? `font-bold text-slate-400` : ""
            }`}
          >
            <button onClick={() => onClick(menu.id)}>{menu.text}</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

callback function의 적절한 활용을 통해 동일한 부모 component를 가지고 있다면, 다른 자식 component로 값을 적절히 넘겨줄 수 있다.