Typescript&Redux 2일차 정리

JS 기본 개념 훑기

JS에는 7가지 데이터 타입이 있다.

• primitive 타입 (Number, String, Boolean, Null, Undefined, Symbol)
• 그외는 Object(객체)

 

프로그래밍 언어는 서양에서 만들어졌기 때문에 `합리주의, 논리주의` 등의 사상에 영향을 받아 설계되었다.

• 그래서 기저에는 `1은 1이다, 2는 2다! 이는 절대불변이며 틀리지 않는 주장이다!` 와 같이 공리에 초점이 맞춰져 있다.
• 이러한 사상을 기반으로 시스템 및 프로그래밍 언어가 만들어져왔다.

 

 JS에 이를 적용한다면?

• `값`은 `변수`라는 것에 넣을 수 있다.
• `객체`도 `값`이고 `함수`도 `값`이다.
• 이들도 변수에 넣을 수 있다!

 

1. JSX로 Virtual DOM 만듦
2. 이 때 변경사항 있으면 새로운 Virtual DOM 만들고 기존 VDOM과 비교해서 바뀐 것들만 실제 DOM에 반영시킴.
3. 이를 통해서 기존에 적용하기 어려웠던 상태관리 라이브러리를 할 수 있게 되었다! => 필요한 부분만 업데이트 시킬 수 있게 되었으므로 미칠듯한 깜빡거림 현상을 줄이게 됨
   
   
   1. 다른 부분만 diff를 떠서(새로 생성한 VDOM과 기존 VDOM간의 비교를 통해 다른 점만을 DOM에 업데이트 시킴)
   2. 효율적이고 빠르다!

 

이렇게 동작하는 라이브러리는 flux라고 초기에 페이스북에서 만들었으나 사용이 어려웠다. 그래서 좀 더 사용하기 쉬운 형태로 나온게 redux 다.

 

redux의 특징

• 중앙 store(객체) 하나만 존재한다.
• 이 객체를 만드는 함수를 제공하는데, 이를 createStore 라고 부른다.
• 데이터는 컴포넌트가 직접적으로 못 바꾸게 해야하므로, immutable 하게 만들어야 함 == 컴포넌트는 데이터를 받아서 그리기만 해야함
• 왜 바꾸면 안되는가? -> 두개의 컴포넌트가 같은 데이터를 바라보고 있으면, 한 컴포넌트가 데이터를 수정하였을 때 다른 컴포넌트는 데이터가 바뀌었는지 알 방법이 없기 때문.
• 그래서 사용하는 데이터 자체를 리턴하는 대신 클로저를 사용함.
• JS 특성상(참조와 복사) 객체를 참조하면 기존 객체 값도 바뀌므로 기존 객체를 복사해서 리턴하도록 함. 그래서 redux 개발진은 { ... } (해체문법 + spread 문법)을 사용하도록 권고함.
• 상태를 바꾸려면 컴포넌트에서 리덕스에게 상태 바꾸는 함수를 제공해야함. 이를 reducer 라고 부름.
• reducer가 어떤 데이터를 바꿀지 알게 하기 위해 데이터를 분간해주는 action 객체를 제공함
• 상태를 바꿀 때는 직접 바꾸는 대신 레퍼런스 참조를 끊어주기 위해 { ...,  바꿀 상태 } 문법을 이용해 상태를 바꿈. 그리하여 새로운 객체가 리턴됨. 이를 통해 이전과 현재를 분리할 수 있게 됨.