틱택토 (2) 썸네일형 리스트형 [Fast Campus , React] 11. TicTacToe 앱 만들기 (6) history 저장, 전개연산자(spread operator) 동작에 대한 기록 저장 slice()를 사용해 매 동작 이후에 squares 배열의 새로운 복사본을 만들었고 이를 불변 객체로 취급했음. 이를 통해 과거의 squares배열의 모든 버전을 저장하고 이미 지나간 차례를 탐색할 수 있다. const handleClick = (i) => { const newSquares = squares.slice(); // slice로 통째 복사 과거의 squares 배열들을 history라는 다른 배열에 저장할 것이며, history배열은 첫 동작부터 마지막 동작까지 모든 게임판의 상태를 아래같이 표현. 이전 동작에 대한 리스트를 보여주려면 최상위 단계의 App 컴포넌트가 필요. App 컴포넌트에 history state를 이동. state를 App컴포넌트로 이동 cons.. [Fast Campus , React] 5. JSX , TicTacToe 앱 만들기 (1) JSX (Javascript Syntax Extension) 자바스크립트 확장 문법 리액트에서는 이 JSX를 이용해서 UI가 보이는 모습을 표현해 준다. JSX를 이용하면 UI를 나타낼 때 자바스크립트(logic)와 HTML구조(markup)를 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 쉽게 구현할 수 있다 JSX 사용이 의무는 아니지만, 자바스크립트 안에서 UI 작업을 하는데 편리하기에 리액트를 사용할 때는 거의 모든 사람들이 JSX를 사용한다. 원래 리엑트에서 화면을 그리는 방식 React.createElement API를 사용해 엘리먼트를 생성한 후 이 엘리먼트를 In-Memory에 저장. 그리고 ReactDom.render 함수를 사용해서 실제 브.. 이전 1 다음
