게임 완성하기 이제 틱택토 게임을 위한 기본 구성 요소를 가지고 있음 완전한 게임을 위해 게임판의 “X”와 “O”를 번갈아 표시할 필요가 있으며 승자를 결정하는 방법이 필요 State 끌어올리기 현재 게임의 state를 각각의 Square 컴포넌트에서 유지하고 있음 승자를 확인하기 위해 9개 사각형의 값을 한 곳에 유지할 것임 Board가 각 Square에 Square의 state를 요청해야 한다고 생각할 수도 있음 그리고 React에서 이런 접근이 가능하기는 하지만 이 방식은 코드를 이해하기 어렵게 만들고 버그에 취약하며 리팩토링이 어렵기 때문에 추천하지 않음 각 Square가 아닌 부모 Board 컴포넌트에 게임의 상태를 저장하는 것이 가장 좋은 방법임 각 Square에 숫자를 넘겨주었을 때와 같이 ..

사용자와 상호작용하는 컴포넌트 만들기 Square 컴포넌트를 클릭하면 “X”가 체크되도록 만들어보자 먼저 Square 컴포넌트의 render() 함수에서 반환하는 버튼 태그를 아래와 같이 변경하기 class Square extends React.Component { render() { return ( {this.props.value} ); } } Square를 클릭하면 ‘click’이 브라우저 개발자 도구의 콘솔에 출력되는 걸 확인할 수 있음 주의 타이핑 횟수를 줄이고 this의 혼란스러운 동작을 피하기 위해 아래부터는 이벤트 핸들러에 화살표 함수를 사용할 것임 class Square extends React.Component { render() { return ( console.log('click')}..

Props를 통해 데이터 전달하기 본격적으로 시작하기 위해 Board 컴포넌트에서 Square 컴포넌트로 데이터를 전달해 보자 Square에 value prop을 전달하기 위해 Board의 renderSquare 함수 코드를 수정하기 class Board extends React.Component { renderSquare(i) { return ; } } 값을 표시하기 위해 Square의 render 함수에서 {/* TODO */}를 {this.props.value}로 수정 class Square extends React.Component { render() { return ( {this.props.value} ); } } 변경 전에는 변경 후에는 렌더링 된 결과에서 각 사각형에 숫자가 표시됨 지금까지의..

초기 코드 살펴보기 초기 코드 확인 ✓ html ✓ css body { font: 14px "Century Gothic", Futura, sans-serif; margin: 20px; } ol, ul { padding-left: 30px; } .board-row:after { clear: both; content: ""; display: table; } .status { margin-bottom: 10px; } .square { background: #fff; border: 1px solid #999; float: left; font-size: 24px; font-weight: bold; line-height: 34px; height: 34px; margin-right: -1px; margin-top: ..