목표: 3*3 보드판 렌더 및 props 전달을 통해 각각의 버튼에 인덱스 값 나타내기
- 각각의 버튼을 식별할 수 있는 index를 Board 컴포넌트에서 Square 컴포넌트로 전달하기
- 브라우저를 통해 렌더 및 props 전달 여부 확인
이전에 생성하였던 컴포넌트 안에 내용을 작성해보자
https://yellow-w.tistory.com/222
2. TicTacToe 게임의 명세
이 게임은 3*3형식의 바둑판에서 먼저 빙고를 완성하는 사람이 이기는 게임이다. Game/Board/Square라는 3개의 컴포넌트 존재 Game 컴포넌트는 하위에 Board 컴포넌트를 가진 게임 Set Board 컴포넌트는 크
yellow-w.tistory.com
이전 글에서 보았던 명세대로,
Game 컴포넌트에서 Board 컴포넌트를 렌더하고,
Board 컴포넌트에서 Square 컴포넌트를 렌더하는 코드를 작성하였으며
각각의 Square 컴포넌트는 button을 렌더한다.
class Square extends React.Component {
render() {
return(
<button className="square">
</button>
)
}
}
class Board extends React.Component {
render() {
return(
<div>
<div className="status"></div>
<div className="board-row">
<Square/>
<Square/>
<Square/>
</div>
<div className="board-row">
<Square/>
<Square/>
<Square/>
</div>
<div className="board-row">
<Square/>
<Square/>
<Square/>
</div>
</div>
)
}
}
class Game extends React.Component {
render() {
return(
<div>
<Board />
</div>
)
}
}
초기 셋팅에서 css를 링크를 걸어놓았기 때문에 className을 잘 입력한다면,
브라우저는 다음과 같은 화면을 띄울 것이다.
아직, props로 어떠한 값도 넘기지 않았기 때문에 버튼의 내부는 비어있다.
그럼 이제 각각의 버튼을 식별할 수 있는 index를 props를 통해 Board 컴포넌트에서 Square 컴포넌트로 넘겨보자.
1. 각각의 버튼을 식별할 수 있는 index를 Board 컴포넌트에서 Square 컴포넌트로 전달하기
하지만 그 이전에 renderSquare라는 함수를 선언해서 함수 호출의 형태로 Square 컴포넌트를 호출하는 코드로 변경해볼 것이다.
1-1. renderSquare 함수 선언 후 Square 컴포넌트에 value라는 props 전달
board 컴포넌트의 코드 블럭 안에 renderSquare라는 함수를 선언해서
매개변수 i를 받아 Square 컴포넌트에 value라는 이름으로 값을 전달하는 것을 반환하는 함수를 작성하였다.
이제 스퀘어 컴포넌트는 해당 함수를 통해서 렌더 되므로, div 내부의 <Square/>라고 작성된 부분을 아래와 같이 함수 호출의 형태로 변경하자!
class Board extends React.Component {
renderSquare = i => {
return(
<Square value = {i}/>
)
}
render() {
const { renderSquare } = this
return(
<div>
<div className="status"></div>
<div className="board-row">
{renderSquare(0)}
{renderSquare(1)}
{renderSquare(2)}
</div>
<div className="board-row">
{renderSquare(3)}
{renderSquare(4)}
{renderSquare(5)}
</div>
<div className="board-row">
{renderSquare(6)}
{renderSquare(7)}
{renderSquare(8)}
</div>
</div>
)
}
}
Square 컴포넌트의 코드블럭 안에는
Board 컴포넌트에서 props로 던진 value를 받아서 버튼 안에 나타내는 코드를 작성해보자
1-2. Square 컴포넌트는 Board로 부터 전달받은 props를 버튼 엘리먼트에 내부에 작성해서 렌더링
class Square extends React.Component {
render() {
return(
<button className="square">
{this.props.value}
</button>
)
}
}
코드 작성 후 서버를 돌려보면
아래와 같이 버튼이 각각의 인덱스 값을 잘 나타내며,
props값으로 인덱스 번호를 가지고 있는 것을 확인할 수 있다.
2. 브라우저를 통해 렌더 및 props 전달 여부 확인
3. 현재까지 작성 코드 확인(누적)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link type = "text/css" href = "./game.css" rel = "stylesheet">
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id = "root"></div>
<script type ="text/babel">
class Square extends React.Component {
render() {
return(
<button
className="square">
{this.props.value}
</button>
)
}
}
class Board extends React.Component {
renderSquare = i => {
return(
<Square value = {i}/>
)
}
render() {
const { renderSquare } = this
return(
<div>
<div className="status"></div>
<div className="board-row">
{renderSquare(0)}
{renderSquare(1)}
{renderSquare(2)}
</div>
<div className="board-row">
{renderSquare(3)}
{renderSquare(4)}
{renderSquare(5)}
</div>
<div className="board-row">
{renderSquare(6)}
{renderSquare(7)}
{renderSquare(8)}
</div>
</div>
)
}
}
class Game extends React.Component {
render() {
return(
<div>
<Board />
</div>
)
}
}
const root = document.querySelector('#root')
ReactDOM.render(<Game />,root)
</script>
</body>
</html>'React > 4.TicTacToe 게임 만들기' 카테고리의 다른 글
| 틱택토6. 승자 결정하기 (0) | 2022.04.23 |
|---|---|
| 틱택토5. 컴포넌트 작성(3) (0) | 2022.04.23 |
| 틱택토4. 컴포넌트 작성(2) (0) | 2022.04.22 |
| 틱택토2. TicTacToe 게임의 명세 (0) | 2022.04.21 |
| 틱택토1. 레이아웃 및 CSS 셋팅 (0) | 2022.04.21 |
댓글