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

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: ..

React란? React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리 “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 도움 React는 몇 가지 종류의 컴포넌트를 가지지만 우리는 React.Component의 하위 클래스를 사용할 것임 class ShoppingList extends React.Component { render() { return ( Shopping List for {this.props.name} Instagram WhatsApp Oculus ); } } // 사용 예제: XML과 유사한 재밌는 태그를 사용할 것임 우리는 컴포넌트를 사용하여 React에게 화면에 표현하고 싶은 것이 무엇인지 알려줌 데이터..