[react] 형제 컴포넌츠간 데이터 전달

나중에 기억하려고 메모!

부모 컴포넌츠 App 하위에 자식 컴포넌츠 Menu와 Home이 있을 때, Menu에서 선택 된 값을 Home에 전달하고자 한다.

1. 먼저 저장할 menu라는 state를 APP.js(부모)에 두고,
   인자값을 받아 setmenu()로 menu state의 값을 저장하는 함수(selectMenu)를 만든다.

// APP.js
function App () {
  const [menu, setmenu] = useState('');
  const selectMenu = (select) => {
    // Menu.js에서 onDataChange로 받아온 것.
    setmenu(select);
    // 받아서 Home의 데이터로 저장 후 Home에 props로 데이터 전달
  };
  return (
    <div>
      <Menu onDataChange={selectMenu} />
      <Home menu={menu} />
    </div>
  );
}

2. 해당 함수를 menu값을 받아 올 Menu.js에 props로 넘겨, Menu.js에서 onDataChange()를 통해 값을 App.js의 selectMenu 인자로 반환하여 menu state에 저장한다.

// Menu.js
function Menu ({onDataChange}){
    // App.js props로 넘긴 menu state 저장 함수
    const onChange = (event) => {
      onDataChange(event.target.value);
    }
    return (
        <div>
            <select onChange={onChange}>
                <option value="menu1">menu1</option>
                <option value="menu2">menu2</option>
            </select>
        </div>
    );
}

3. App.js의 state에 저장 된 값을 Home.js 컴포넌츠에 props로 전달.

// Home.js
function Home ({menu}) {
    // menu : Menu.js => App.js(부모) => Home.js경로로 값 전달 됨. props명으로 받아서 사용.
    .
    .
    .
 }

더 나은 방법이 있을지 어쩔지 모르겠당.. ㅎ
나는 react 3일차니까.. 알게되면 또 다시 메모를 남길 예정..ㅎㅎ