docs: React 불변성 추가

React/React_불변성.md

@@ -0,0 +1,37 @@
+# 예상 질문 및 답변
+
+## 1. React에서 불변성을 유지해야 하는 이유가 무엇인가요?
+
+리액트에서 State 또는 Props가 변경되었을 때, 새로운 엘리먼트들을 반환하고 이전 엘리먼트들과 비교하는 재조정(Reconcilation)과정을 거칩니다.  
+이때, 비교 성능을 향상하기 위하여 얕은 비교로 props와 state를 비교합니다. (얕은 비교란, 상세 값 까지 비교하는 것이 아닌, 객체의 참조 주소만을 비교하는 방식을 말합니다.)  
+원시 타입 (primitve type)은 값의 변경되면 메모리 주소가 변경되므로 관계가 없지만, Array또는 Object의 경우 내부 키에 할당된 값을 변경하더라도 메모리주소가 바뀌지 않습니다.  
+그렇기 때문에 리액트에서는 해당 객체가 변하지 않았다고 판단하고, 컴포넌트를 업데이트 하지 않습니다.  
+
+### 1-1. setState는 비동기적으로 작동하나요?
+
+결론부터 보자면 비동기적으로 작동합니다. 따라서 호출 직후 새로운 값이 state에 반영되지 않습니다.  
+- setState 함수를 호출하여 state를 변경한 뒤에, `console.log(state)`를 찍어보면 이전의 값이 찍히는데 그 이유는 setState가 비동기적인 요청이기 때문입니다.
+- setState를 호출 하고 해당 값에 바로 접근하는 것은 문제가 될 수 있습니다.
+
+리액트가 setState를 비동기적으로 처리하는 데에는 몇 가지 이유가 있습니다.
+
+- 첫 번째 이유는 성능 향상을 위해서입니다. 변화된 값들을 모아 한번만 렌더링할 수 있도록 하며 최대한 reflow, repaint 현상을 줄입니다.
+- props와 state 사이의 일관성의 훼손됨을 방지하기 위함입니다.
+    - state가 동기적으로 업데이트 되더라도, props는 그렇지 않습니다. props는 부모가 리렌더링 되어 해당 함수가 재호출 될 때까지 변경될 수 없습니다. 리액트는 state와 prop의 변경들을 한 번에 묶어 재랜더링이 되야 할 지 판단하기 때문에, state가 동기적으로 변경될 경우 판단이 어려워질 수 있습니다.
+- 리액트는 함수형 패러다임을 따릅니다. 그렇기 때문에 함수 내부에서 함수 외부의 어떤 값들을 변화시키는 것은 의도치 않은 동작에 해당하게 되고, 이것이 사이드 이펙트입니다.
+    - 함수형 패러다임에서는 같은 인풋에 대하여 항상 같은 아웃풋이 나와야 합니다.
+    - 그렇기 때문에 mutable reference에 접근하는 것은 함수형 패러다임에서는 안티패턴이 됩니다.
+    - 따라서 리액트에서 렌더링에 반영되는 메서드는 전부 비동기적으로 작동합니다.
+
+## 2. React에서 hook이란 개념은 어떻게 나오게 되었나요?
+
+리액트에서 함수형 패러다임을 적용하면서, 순수 함수 내부에서는 상태를 가질 수 없기 때문에 이를 해결하고자 등장한 개념입니다. 또한, 기존 클래스형 컴포넌트가 가졌던 문제점을 해결하고자 하였습니다.  
+
+- 클래스형 컴포넌트에서는 this를 이용하여 state를 정의하고 메서드를 정의합니다. 그런데 자바스크립트의 this는 다른 언어와는 다른 특징을 가지므로, 다른 언어를 사용하던 사람들이 적용하는 것이 어렵습니다.
+- 컴포넌트에서 상태 관련 로직들이 재사용되기 어려운 문제점이 있습니다. 또한 각 컴포넌트의 라이프 사이클 메서드에서 관련 없는 로직들이 섞일 수 있으므로 버그가 쉽게 발생하고 무결성을 해치게 됩니다.
+
+# 출처
+
+- [Hook의 개요 - Reactjs.org](https://ko.reactjs.org/docs/hooks-intro.html)  
+- [React에서 불변성을 지켜야 하는 이유](https://webigotr.tistory.com/293)
+- [[번역글] react functional component에서 setState를 동기식으로 사용하기](https://yoonho-devlog.tistory.com/170)