React로 Tic Tac Toe 만들기

https://ko.reactjs.org/tutorial/tutorial.html#inspecting-the-starter-code

자습서: React 시작하기 – React

공식문서에 있는 내용을 위주로 따라 했습니다.

 

 

** 불변성이란?

데이터 변경 방법에는 직접 변경 / 원하는 변경 값을 가진 새로운 사본으로 데이터를 교체 2가지가 있다.

불변성의 특징 :

 - 이전 상태의 기억이 용이 : 우리가 어떤것을 만들다 보면 되돌리기 기능이 필요할때가 많은데 직접 변경해버리게되는경우 이전 상태를 불러오기가 굉장히 힘들다. 만약 2번째 방법을 이용한다면, 이전 상태를 쉽게 알 수 있으니 용이하다.

 - 변화를 감지하기 용이 : 앞서 말했다 싶이 이전상태와 현재상태를 비교하기가 용이 즉 변화를 감지하는게 용이하다.

 - 순수 컴포넌트를 만드는데 도움을 준다(가장 큰 장점) : 변하지 않는 데이터는 변경이 이루어졌는지 쉽게 판단이 가능하고, 이를 바탕으로 랜더링 할지 말지 결정한다.

 

 

** 순수 컴포넌트 ?

순수 컴포넌트와 그냥 컴포넌트의 차이에 대해서 설명해보자면, 간단하다.

그냥 컴포넌트의 경우 props나 state가 변경되면(사실 상 값이 1에서 1로 변경되도 setState를 해주면) 랜더링을 다시한다. 

하지만, 순수 컴포넌트는 props와 state가 변경되는것을 얕은비교를 해서 변화가 정말 되었는지를 감지한다. 이때 얕은비교는 shouldComponentUpdate라는 라이프사이클메소드에서 비교를 한다. 그래서 만약 그냥 1에서 1로 변경된 경우에는 랜더링을 하지 않는다.

 

++ 추가적으로 draw를 만들었고, concat대신에 spread연산자를 사용하였다.

 

https://github.com/sunnykim91/react-frontendschool-byMarkLEE/tree/master/tic-tac-toe

sunnykim91/react-frontendschool-byMarkLEE