[React] 상태 끌어올리기

즉 [state] 관리를 Child1 과 Child2 모두에 접근할 수 있는 '상위 컴포넌트'에서 하라는 뜻

폴더구조

/src
  ├── App.jsx
  │   ├── Player.jsx
  │   └── GameBoard.jsx

App.jsx

function App() {
  const [activePlayer, setActivePlayer] = useState('X');
  
  return (
  <main>
    <div id="game-container">
      <ol id="players" className="highlight-player">
        <Player initialName="Player 1" symbol="X" isActive={activePlayer === 'X'}/>
        <Player initialName="Player 2" symbol="O" isActive={activePlayer === 'O'}/>
      </ol>
      <GameBoard onSelectSquare={handleSelectSquare} activePlayerSymbol={activePlayer}/>
    </div>
   </main>
  )
}

Player 컴포넌트와 GameBoard 컴포넌트 모두 "현재 플레이 중인 플레이어(activePlayer)" 정보를 알고 싶어 한다.

따라서 이 activePlayer 정보를 두 컴포넌트를 제어할 수 있는 "App" 컴포넌트에서 관리하는 것이 좋다.

※ 참고 : props는 문자열뿐만 아니라 숫자, 배열, 객체, 함수 등 다양한 타입의 데이터를 전달할 수 있다.