쥰's 블로그

전체적인 css를 변경하기 위해 index.css로 가준다.그리고 body와 ol,ul을 스타일링 해준다.  그리고 확인해보면 아래처럼 나오게 된다.    다음은 Layout 의 css를 변경시켜주기 위해 App.css로 가준다.      다음은 Move Button css를 변경시켜주기 위해 App.css에서 작성해준다.그 이전에 App.js에서 button의 이름을 지정해주지 않았기 때문에 className을 지정해준다. 그리고 css를 작성해준다.    그리고 위의 사진에서 버튼 왼쪽의 숫자를 지워주기 위해 App.js에서 수정해준다.   이번에는 Board의 스타일을 수정해줄껀데 그 전에 Board.js에서 className을 지정해준 뒤 Board.css를 변경해준다.     그리고 Square..

JumpTo 함수는예를들어, 기록이 되어있는 해당 버튼을 선택했을 시 그 기록 상태로 돌아가는 것을 수행하는 함수이다.   현재는 생성되어있는 버튼을 눌러도 버튼 이벤트가 없기 때문에 아무 것도 일어나지 않는다. app.js 파일로 가서JumpTo 함수를 작성해주고 move의 버튼에 onClick 함수를 작성하여 JumpTo 함수를 넣어준다.  그리고 현재 몇번째 스텝인지 알 수 있는 새로운 State를 생성해준다. (이전으로 되돌아 갔을 때 그 step을 기억하기 위해서) App.js위로 올라가서 작성해 줄껀데 useStateSnippet을 해주면 자동으로 코드가 완성되어 나타나져서 해당 변수만 변경해주면 된다.   이후 stepNumber를 업데이트 하기 위해 jumpTo를 정의해줄 것이다.stepN..

● 과거의 이동 표시하기 (map 메소드)지금까지 만든 것들은 틱택토 게임의 이동 정보를 기록하고 있기 때문에 이제 플레이어에게 과거이 이동을 목록으로 표시하도록 만들어 줄 것이다. (history state 안에 가지고 있다.)     - map() 함수를 이용해서 history 배열에 있는 것들을 하나씩 나열해주기 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.   코드를 작성하는 곳으로 돌아가서 map() 함수를 이용해 moves를 작성해준다.삼항연산자를 사용할때 move가..

이전에는 slice()를 사용해서 매 동작 이후에 squares 배열의 새로운 복사본을 만들어 이를 불변 객체로 취급해 과거의 squares 배열의 모든 버전을 저장하고 이미 지나간 차례를 탐색할 수 있었다면이번에는 squares 배열들을 hitory 배열에 저장할 것이다. history 배열은 첫 동작부터 마지막 동작가지 모든 게임판의 상태를 표현하는 것이다. 그래서 이전 상태로 돌아가려한다면 돌아갈 수 있도록 할 수 있다.   이 history state는 이전 동작에 대한 리스트를 보여주려면 최상위 단계의 app 컴포넌트가 필요하다.history를 이용해야하므로 최상위 단계 App 컴포넌트에 histroy state를 둔다.(board 부분을 누르면 history 변경이 필요하므로 최상위에 둠 - ..

● 순서를 만들어서 'O' 추가하기 첫 번째 차례를 'X' 로 시작하도록 해주기 위해 Board 컴포넌트에 초기 state를 수정하는 것으로 기본값을 설정한다.(원래는 null로 되어있는 것을 첫번째는 'x'로 두번째는 'o'로 해준다.) - const[] .... 이렇게 일일히 모두 쳐도 되지만 useStateSnippet을 사용하면 자동으로 코드구조가 완성되어 나타난다.    플레이어가 수를 둘 때마다 xIsNext (boolean 값)이 뒤집혀 다음 플레이어가 누군지 결정하고 게임의 state가 저장된다.Board의 handleClick 함수를 수정하여 xIsNext 값을 뒤집는다.  저 위에서 setXIsNext( !xIsNext ) 와 setXIsNext( prev => !prev)를 둘다 사용..

※ 리액트 Hooks를 이용해서 TicTacToe 앱을 함수형 컴포넌트로 바꾸기 - 클래스 컴포넌트에서 함수 컴포넌트로 바꾸는 순서 1. 컴포넌트 자체를 바꾸기  2. State를 useState Hook을 이용해서 표현하기 여기서 위의 코드는  변수와 State를 정하는 함수를 나타낸다. (value는 getter, setValue는 setter)   3. this.state.squares는 squares로 변경    ( 예시. this.state.todoData -> todoData   /  this.state.value -> value )state를 새로운 값으로 update 해줄 때는 this.setState({value:""})  ==> setValue("") 이렇게 해준다.handleClick..

- 리액트에서 데이터가 변할 때 화면을 다시 렌더링 해주기 위해서는 React State를 사용해야한다. ● React State란 ?  컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체이다.State가 변경되면 컴포넌트는 리랜더링(Re-rendering)된다. 또한, State는 컴포넌트 안에서 관리된다.  ● State 추가하기컴포넌트 안에서 무언가를 기억하기 위해서 state를 사용한다.state를 생성할 때는 constructor 안에서 생성해주면 된다.   ● Constructorconstructor(생성자)를 사용하면 인스턴스화된 객체에서 다른 메서드를 호출하기 전에 수행해야 하는 사용자 지정 초기화를 제공할 수 있다. 클래스를 new를 붙여서 ( new User("John"))..

● Props (Properties)Props는 상속하는 부모  컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법Props는 읽기 전용(immutable)으로 자녀 컴포넌트 입장에서는 변하지 않는다. (변하게 하고자 하면 부모 컴포넌트에서 state를 변경시켜줘야 한다.)  A 부모 컴포넌트state = { a : "a" }       B 자식 컴포넌트 a state 필요this.props.aProps         ex) 부모인 Board 컴포넌트에서 이렇게 보내주고 자식인 Square 컴포넌트에서 {aprops} 1 이렇게 받아오면 됨     Board 컴포넌트에서 0 ~ 8 까지의 숫자를 Square에 넘겨줘야 한다. Board.js에서 value라는 props 명을 사용하여 숫자를 보내주..

기존에 만들어진 파일들을 사용할 것이므로 깨끗한 상태로 만들어 준다. 우선, App.js 파일의 div 부분을 지워주고 맨 위의 2줄도 지워서 밑의 상태로 만들어 준다.  두번째로는 App.css와 Index.css 파일의 내용을 모두 삭제 시켜준다. 마지막으로 App.test.js 파일이 현재 필요없으므로 완전히 삭제시켜준다.    tictactoe 를 구현하기 위해 App Component와 Board Component, Square Component가 필요하다.   ● App 컴포넌트 UI 만들기 App.js에서 리액트 화면에 나타낼 큰 틀을 만들어 준다.App.css를 import 할 것이므로 맨 위에 import도 작성해준다.   그리고 App.css와 index.css 를 스타일링 해준다. 여..