📌 1. 프로젝트 구조
현재까지 작성한 코드는 다음과 같은 구조를 가지고 있습니다.
/src
├── components
│ ├── Player.jsx // 플레이어 정보를 표시하는 컴포넌트
├── App.js // 메인 컴포넌트
├── index.js // React 앱을 실행하는 엔트리 파일
├── index.css // 스타일링 파일
Player.jsx는 개별 플레이어 정보를 나타내는 컴포넌트이며, App.js에서 이를 불러와 화면에 표시합니다.
📌 2. Player.jsx 컴포넌트 (재사용 가능한 UI 요소)
우선 Player.jsx 코드를 살펴보겠습니다.
export default function Player({ name, symbol }) {
return (
<li>
<span className="player">
<span className="player-name">{name}</span>
<span className="player-symbol">{symbol}</span>
</span>
<button>Edit</button>
</li>
);
}
🔹 Player 컴포넌트는 플레이어의 이름(name)과 심볼(symbol) 을 받아서 화면에 표시합니다.
🔹 여기서 { name, symbol } 부분이 바로 Props(프롭스) 입니다.
🔹 프롭스는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다.
🔹 Edit 버튼이 있지만, 아직 기능은 구현하지 않았습니다.
📌 3. App.js에서 Player 컴포넌트 사용하기
이제 App.js를 확인해보겠습니다.
import Player from "./components/Player";
function App() {
return (
<main>
<div id="game-container">
<ol id="players">
<Player name="Player 1" symbol="X" />
</ol>
GAME BOARD
</div>
</main>
);
}
export default App;
🔍 어떻게 Player가 App.js에서 사용될까?
- import Player from "./components/Player"; → Player 컴포넌트를 가져옵니다.
- <Player name="Player 1" symbol="X" />
- name="Player 1" → Player.jsx로 "Player 1"이라는 값을 전달합니다.
- symbol="X" → Player.jsx로 "X" 값을 전달합니다.
- Player 컴포넌트는 이 값을 받아서 화면에 렌더링합니다.
✨ 프롭스(props)란?
- 컴포넌트가 부모로부터 전달받는 데이터입니다.
- Player.jsx에서 name과 symbol을 props로 받아 UI에 적용합니다.
- 부모 컴포넌트(App.js)가 변경하면, 자식 컴포넌트(Player.js)도 자동으로 변경됩니다.
📌 4. index.js에서 App 실행하기
리액트 애플리케이션을 실행하는 가장 중요한 파일은 index.js입니다.
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
🔹 ReactDOM.createRoot(document.getElementById("root"))
- index.html에 있는 <div id="root"></div>에 React를 렌더링합니다.
🔹 <App /> 컴포넌트를 화면에 표시합니다.
📌 5. index.html에서 React 연결하기
리액트가 동작하려면 index.html에서 index.js를 불러와야 합니다.
<body>
<header>
<img src="/game-logo.png" alt="Hand-drawn tic tac toe game board" />
<h1>Tic-Tac-Toe</h1>
</header>
<div id="root"></div>
<script type="module" src="/src/index.js"></script>
</body>
- <div id="root"></div>
→ React 앱이 이곳에 렌더링됩니다. - <script type="module" src="/src/index.js"></script>
→ index.js에서 React 앱을 실행합니다.
🎯 정리
✅ Player.jsx는 개별 플레이어 정보를 표시하는 재사용 가능한 컴포넌트입니다.
✅ App.js에서 <Player name="Player 1" symbol="X" />처럼 사용하여 데이터를 전달합니다.
✅ props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘겨주는 방식입니다.
✅ index.js에서 App을 #root에 렌더링하여 React가 동작하게 합니다.
'리액트 > 유데미강의' 카테고리의 다른 글
| [React] tic-tac-toe 게임 만들기 - 3 (0) | 2025.03.08 |
|---|---|
| [React] tic-tac-toe 게임 만들기 2 (0) | 2025.03.08 |
| [React] 리액트 기본 용어 정리 (0) | 2025.03.08 |
| [React] 리액트 심화 / JSX를 꼭 사용하지 않아도 되는 이유 (0) | 2025.02.23 |
| [React] 이벤트 처리하기 (0) | 2025.02.11 |
