왜 리액트를 배울까요?

리액트를 가장 많이 쓰는 이유는 더 큰 개발 생태계입니다
1년동안의 다운로드 횟수 그래프입니다.
여전히React 가 가장 인기 있는 라이브러리라는 사실이 보입니다.
더 많은 튜토리얼과 기사, 더 많은 확장 라이브러리가 존재하기 때문에 개발자들이 쉽게 손을 떼지 못하는 이유입니다.

Vue vs React

• 뷰와 리액트의 특징을 보겠습니다.
  뷰는 CSR이며 쉽고 간편하라는 특징이 있고
  리액트는 SSR이며 큰규모에 유리하고, 심화로 native까지 배우면 앱 개발도 가능하다 라는 장점이 있습니다.

• SSR은 여러 단점이 존재해 CSR로 많이 넘어갔었지만 리액트는 검색엔진최적화라는 장점이 존재합니다.

• 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 페이지를 구성하는 작업이다.
  기업의 노출을 통한 광고가 필수이기 때문에 다시 SSR이 필요한 추세입니다.

우선 리액트 프로젝트 시작을 해준다.
yarn create react-app tic-tac-toe
Npm을 사용해도 되고 Yarn 을 사용해도 무방하다.

또한 react의 구조를 알기 위한 프로젝트 이기 때문에 자바스크립를 제외한
CSS와 HTML을 공식문서의 내용을 그대로 이용했습니다.

모든 자바스크립코드는 index.js에 작성햇고
Html, Css또한 각각의 위치에 작성을 완료햇습니다.

틀 잡기

코드를 살펴보면 Square Board Game 으로 나눠진 세가지 리액트 컴포넌트를 확인할 수 있습니다.

여기서 컴포넌트 라는 것은 앱을 이루는 최소 단위를 뜻합니다.
그리고 우리는 이 컴포넌트에 props나 곧 배울 state와 같은 데이터를 입력받아 DOM 트리를 생성할 수 있습니다.

Square는 button을 렌더링 하고
board 컴포넌트는 이 사각형 9개를 렌더링합니다. 즉 여기서 부모 컴포넌트는 Board 입니다.
Vue와 마찬가지로 부모 컴포넌트에서는 자식 컴포넌트로 props를 전달 할 수 있습니다.

마지막으로 Game은 게임판을 렌더링하고 나중에 수정할 자리를 표시할 값을 갖고 있습니다.

props

Props 사용법에 대해서 알아보겠습니다.

Board 컴포넌트에서 renderSquare라는 함수를 만들고
각각의 숫자에 맞춰 아래에서 이 함수를 render 해주게 되면 9개의 네모난 버튼을 만들어 줍니다 .

부모 컴포넌트인 Board에서 넘길 자료형을 변수명에 담아 주면 Square에서 props의 value로 접근하면 사용이 가능하다.
이렇게 되면 버튼에 넘겨준 값들을 출력할 수 있습니다.

State

다음은 state 설정하는 법을 알아보겠습니다. State는 리액트를 다루는 핵심입니다.
Props처럼 렌더링 결과물에 영향을 주는 데이터긴 하지만
데이터를 수정할 때 읽기 전용인 props에서는 저장이 불가합니다.
이에 모든 컴포넌트는 state를 갖고 있으며, state에서는 변경된 데이터를 관리할 수 있습니다.

• State를 만드는 방법입니다.
  constructor 생성자에 this.state를 설정해주는 것으로 state를 가질 수 있습니다.

• State를 변경하는 법은 setState로 가능 합니다.
  버튼에 Click 이벤트를 만들어 누르면 State의 value 값을 ‘x’로 만들게 하고
  This의 state의 value 값을 통해서 보여줍니다.
  이렇게 되면 버튼을 클릭할 때마다 state가 바껴 매번 렌더링하게 됩니다.

이벤트로 state 변경

• 이제 본격적으로 코드를 수정해 보겠습니다.
  Board 에서도 state를 만들고 squares 라는 9개의 기본값이 null인 Array를 만듭니다.

• i번을 핸들클릭 하게 되면 Squares라는 새로운 값에 state의 값을 그냥 그대로 들고 옵니다. 그리고 그 square의 I값을 x로 바꿔주고 setState로 원래 스퀘어에 새로운 스퀘어로 갈아 치우게 됩니다.

왜 그렇게 했을까?

• State의 값을 직접 변경하는 것이 아닌 새로운 사본으로 데이터를 교체를 하기 위해서 이다.
  원본 데이터를 유지하는 것이 목적인데 , 초기의 데이터를 유지해두면 재사용이 용이하기 때문이다.
• 앞으로 우리는 react에서 이런식으로 state를 바꾸는 것으로 약속할 것입니다.

차례 찾기 ('O','X')

그 다음은 xIsNext 로 다음차례가 x인지 o인지 확인하는 값을 넣어주고
클릭할 때마다 이전 값의 반대로 값을 저장해 줍니다.

우승자 계산 함수

Calculater 함수입니다.
Lines의 모든 값들을 하나씩 저장해서 squares의 이 숫자의 값들이 o인지 x인지 그리고 그 값들이 같은지 확인해 주면 우승자를 찾을 수 있게 됩니다

승자 결정

승자 를 결정하는 법입니다. 칼큘레이트 함수를 사용해 우승자를 저장하고 Status의 값에 문자열로 저장을 합니다.

또한 이 값이 정해지게 된다면 , 우승자가 있거나 이미 채워진 값이라면 버튼이 동작하지 않게 하는 값을 추가해서 마무리가 되게 됩니다.

마무리

여기까지 저의 프로젝트 결과입니다. 리액트가 익숙치 않아서 열심히 따라만 해본 결과물이었습니다.

Props처럼 Vue와 비슷한 부분도 많아서 접근성은 괜찮았습니다.
state같이 어려운 부분도 있었습니다만 편리한 기능이고 계속 알고 싶은 기술들이 많아
이번 기회로 react에 입문해서 제대로 공부해야 겠다고 생각하게 되었습니다. 😀