1. State를 Square 각각에서 Board로 올리기. (1) Board의 state에 squares 배열 추가하기. class Board extends React.Component { constructor(props) { super(props); this.state = { squares: Array(9).fill(null), }; } } 먼저 이러한 형태로 만들라고 하고 있다. Board 컴포넌트의 state에 모든 Square의 상태를 저장할 것을 요구한다. 이전에 했던 대로, Board컴포넌트의 State에 들어갈 값을 미리 인터페이스로 정의하는 과정이 필요하다. type BoardStateElement = string | null; type BoardState = { squares: Arra..
1. props 전달 class Board extends React.Component { renderSquare(i) { return ; } } class Square extends React.Component { render() { return ( {this.props.value} ); } } 자습서는 코드를 이렇게 바꾸라고 안내한다. 당연하지만 제대로 될 리가 없다. value를 찾을 수 없다고 아우성을 친다. React에서 Props를 정의하는 방법의 안내를 참조하여 보면, Props의 타입을 정의해줘야 한다고 나와있다. interface SquareProps { value: number; } 리액트 컴포넌트 타입스크립트로 작성하기 를 참조하면, type 키워드를 사용하는 방법도 있다고 한다. ty..
자습서 : https://ko.reactjs.org/tutorial/tutorial.html 자습서: React 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 1. 프로젝트 생성 npx create-react-app tic-tac-toe --typescript 먼저 위 커맨드로 자습서의 틱택토용 리액트 앱 생성. 그러나 타입스크립트 템플릿을 사용해서. cd src rm -f * 그리고 위 커맨드를 사용해서 src 디렉토리 내의 모든 파일 삭제. (자습서에 있는 내용) 2. 처음 예제 코드 (1) createRoot 함수가 없다?! 시작부터 벌써 에러가 터지고 있다. 해당 타입을 가진 'createRoot' 속성이..
var = 재선언 가능한 변수. (위험?) let = 재선언 불가능한 변수. (재선언 시도시 문법 에러) const = let과 같으나, 재할당 역시 불가능.
