자습서 - 게임

자습서를 따를 수 있는 시작점.

리액트의 기본

리액트 가장 일반적인 테크닉

시간여행 -통찰력

 

React란 무엇인가요?

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.

 

코드를 살펴보면 세 가지 React 컴포넌트를 확인할 수 있습니다.

• Square - 버튼 랜더링
• Board - 사각형 9개 랜더링
• Game - 게임판 랜더링

Square 컴포넌트는 <button>을 렌더링하고 Board는 사각형 9개를 렌더링합니다. Game 컴포넌트는 게임판을 렌더링하며 나중에 수정할 자리 표시자 값을 가지고 있습니다. 지금은 사용자와 상호작용하는 컴포넌트가 없습니다.

 

 

 

프롭스. 외부에서 입력하는 값.

 

 

 

다음 단계로 Square 컴포넌트를 클릭한 것을 “기억하게” 만들어 “X” 표시를 채워 넣으려고 합니다. 무언가를 “기억하기”위해 component는 state를 사용합니다.

React 컴포넌트는 생성자에 this.state를 설정하는 것으로 state를 가질 수 있습니다. this.state는 정의된 React 컴포넌트에 대해 비공개로 간주해야 합니다. 이제 Square의 현재 값을 this.state에 저장하고 Square를 클릭하는 경우 변경하겠습니다.

 

JavaScript 클래스에서 하위 클래스의 생성자를 정의할 때 항상 super를 호출해야합니다. 모든 React 컴포넌트 클래스는 생성자를 가질 때 super(props) 호출 구문부터 작성해야 합니다.

 

 

 

 

 

리액트를 쓰는 이유

화면에서 데이터를 뿌려주는데, 데이터가 바뀌면 html태그에 직접 접근하여 그 태그만을 위한 메소드가 생기고, 변경할 데이터와 태그들이 많아지면 유지보수 힘들고 이것을 리액트는 컴포넌트로 쪼개는데, 1. 재사용 (square) 2. game/board는 재사용은 안되지만 각자의 역할만 관리가 쉬워짐. 상태관리!

태그안에 있는 데이터를 화면에 보여지게하는것이 상태.

 

 

출력을 요구하는 질문.

게임 컴포넌트를 어떻게 구현하셨어요?

컴포넌트, 프롭스, 스테이트, 클릭함수

 

게임컴포넌트의 역할은 squares배열로나오는  history에는 클릭이 이루어질때마다 기록들을 저장해둔다음에 되짚어볼수있게.

handleCLick함수를 통해 이벤트를 발생시키고

게임 컴포넌트는 구조는

게임 컴포넌트가 있고 - 보드컴포넌트 - 9개의 스퀘어 틱택토

보드는 스퀘어를 랜더링하는 스퀘어는 o, x를 표현하는 역할을함.

 

바텁업으로 하기에는 숙련도가 낮으므로 탑바텀

 

 

 

 

1. 히스토리 +히스토리를 오른쪽의 버튼으로 랜더링이 될때 행과 열 데이터를 어디선가 가져오고. 어떤 스퀘어를 클릭했는지 클릭이벤트 값을 조작가능. 

 

상태를 기억하기 위해 state를 사용한다.

생성자에 this.state를 설정하는 것으로 state를 가질수 있다. this.state에 값을 저장하고

 

 

 

 

함수 컴포넌트는 더 간단하게 컴포넌트를 작성하는 방법이며 state 없이 render 함수만을 가집니다. React.Component를 확장하는 클래스를 정의하는 대신 props를 입력받아서 렌더링할 대상을 반환하는 함수를 작성할 수 있습니다. 함수 컴포넌트는 클래스로 작성하는 것보다 빠르게 작성할 수 있으며 많은 컴포넌트를 함수 컴포넌트로 표현할 수 있습니다.

 

 

setState

변수값을 바꿔주는

 

위치를 알아내려면 ..

 

 

 

 

props props 무조건 아래로 흐르고,

state는 필요에 따라 부모컴포넌트가 가지고 있고.

스텝을 활용해서 좌표를 꺼내보자~~

 

 

 

컴포넌트화

반복적인 html 축약

여러페이지

상태 자주 바뀌는 것.