[TIL]2022.10.07

오늘 한 일
벨로퍼트 문서 보기 -- (매일)
드림코딩 + 노마드 리액트 + 패스트캠퍼스 강의 듣기 (매일)
노마드 실전형 리액트 hook 완강하기
주특기 학습 자료 -- Redux


오늘 느낀 것
- styled-components의 `GlobalStyles` 이란 무엇이고, 어떻게 사용해야 할까?
- `css nesting` 이란 무엇일까?
- CSS reset 이란, 무엇이고 왜 필요한가?

 

 

Redux - 전역상태 관리 

1. 컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 **부-모 관계**가 되어야 한다.
2. 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 **반드시 부모 컴포넌트를 거쳐야만 한다. 즉, 정작** 부모컴포넌트에서는 
그 값이 필요가 없어도 단순히 손자 컴포넌트에게 전달하기 위해 불필요하게 거쳐야만 하는 것을 의미**한다.** (조부모 → 부모 → 손자)
3. 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다.

. 우리가 리덕스를 사용하면State를 공유하고자 할때 부-모 관계가 아니여도 되고, 중간에 의미없이 컴포넌트를 거치지 않아도 됩니다. 
그리고 자식 컴포넌트에서 만든 State를 부모 컴포넌트에서도 사용할 수 있게 됩니다. 

우리는 앞으로 **State를 Global state와 Local state라는 것을 따로 구분지어서 표현**할 것 입니다.

- **Local state (지역상태) 란?**
    - **컴포넌트에서 useState를 이용해서 생성한 state 입니다.** 좁은 범위 안에서 생성된 State 라고 생각하시면 됩니다.
- **Global state (전역상태)란?**
    - Global state는 컴포넌트에서 생성되지 않습니다.  중앙화 된 특별한 곳에서 State들이 생성됩니다. 좀 더 쉽게 얘기해서  **“중앙 state 관리소” 라고 생각하면 됩니다.**


**중앙 State관리소에서 State를 생성하고,  만약 어떤 컴포넌트에서 State가 필요하다면 컴포넌트가 어디에 위치하고 있든 상관없이 State를 불러와서 사용 할 수 있게 됩니다.
** 이렇게 특정 컴포넌트에 종속되어 있는 것이 아니라
 “중앙 state 관리소”에서 생성된 State를 Global state라고 합니다. 그리고 **이러한 값들을 관리하는 것을 전역 상태 관리 라고 합니다.**

## 정리

- 리덕스는 **전역상태 관리 라이브러리**이다.
- 리덕스는 **useState를 통해 상태를 관리했을 때 발생하는 불편함을 일부 해소**시켜준다.
- 리덕스는 `중앙 State 관리소`를 가지고 있으며, 모든 State는 이곳에서 생성된다.
- **useState로 생성한 State는 Local State**이고, **리덕스에서 생성한 State는 Global State**이다.

props drilling 

ex> a라는 부모 데이터에서 1 -> 2-> 3 -> 4 로 가는 데이터가 있다고 할 때 단순히 1번 2번 3번 컴포넌트는 데이터를 가지고만 있고 4번에서만 쓰일때 props drilling이라고 한다.


폴더 구조

좌측의 이미지와 같이 폴더 구조를 생성하세요.  

1. `src` 폴더 안에 `redux` 폴더를 생성
2. `redux` 폴더 안에 `config`, `modules` 폴더를 생성
3. `config` 폴더 안에 `configStore.js`파일을 생성합니다. 

각각의 폴더와 파일은 역할이 있습니다.

- `redux` : 리덕스와 관련된 코드를 모두 모아 놓을 폴더 입니다.
- `config` : 리덕스 설정과 관련된 파일들을 놓을 폴더 입니다.
- `configStore` : “중앙 state 관리소" 인 Store를 만드는 설정 코드들이 있는 파일 입니다.
- `modules` : 우리가 만들 State들의 그룹이라고 생각하면 됩니다. 예를 들어 `투두리스트`를 만든다고 한다면, 
투두리스트에 필요한 `state`들이 모두 모여있을 `todos.js`를 생성하게 되텐데요, 이  `todos.js` 파일이 곧 하나의 모듈이 됩니다.

- 리액트에서 리덕스를 사용하려면, `redux`, `react-redux` 가 필요하다.
- 설정코드는 지금 당장 이해 할 필요가 없다.
- “중앙 State 관리소"를 Store (스토어)라고 부른다.
- 모듈이란, State들이 그룹이다.

- **(1) initialState === 초기 상태값**
    
- **(2) Reducer === 변화를 일으키는 함수**
    
- **(3) 카운터 모듈을 스토어에 연결하기**

- 보통 모듈은 기능의 이름을 따서 파일을 생성한다.
- 모듈의 구성요소로는 `initialState`, `Reducer`가 있다.
- 모듈을 만들면, 스토어에 연결을 해야만 한다. 그리고 연결은 `configStore.js`에서 한다.
- 컴포넌트에서 Store를 조회할 때는 `useSelector`를 사용해야 한다.
- `useSelector((state)⇒state)`  에서 `state`는 모든 모듈의 state 를 조회할 수 있는 값이다.

- 액션객체란, 반드시 type이란 key를 가져야 하는 객체이다. 또한 리듀서로 보낼 “명령"이다.
- 디스패치란, 액션객체를 리듀서로 보내는 “전달자” 함수이다.
- 리듀서란, 디스패치를 통해 전달받은 액션객체를 검사하고, 조건이 일치했을 때 새로운 상태값을 만들어내는 “변화를 만들어내는" 함수이다.
- 디스패치(dispatch)를 사용하기위해서는 useDispatch() 라는 훅을 이용해야 한다.
    - 디스패치는 스토어의 내장함수 중 하나입니다.
    - 우선, 디스패치는 액션을 발생 시키는 것 정도로 이해하시면 됩니다.
    - dispatch 라는 함수에는 액션을 파라미터로 전달합니다.. dispatch(action) 이런식으로 말이죠.
- 액션객체 type의 value는 대문자로 작성한다. (JS에서 상수는 대문자로 작성하는 룰이 있음)


## ction Creator

- **(1) Action Creator 란?**
    
    만약에 우리가 액션객체의 value를 변경할 일이 생긴다면 어떨까요?  `PLUS_ONE` , `MINUS_ONE` 이라는 value 대신 이 액션객체가 counter 모듈안에 있다는 것을
 강조하기 위해서 `counter/PLUS_ONE`, `counter/MINUS_ONE`  이라는 value로 바꾸길 각각 바꾸길 원한다면 아래 코드에서 4군데를  변경해줘야 할 것 입니다.
 근데 또 만약에 그게 4군데가 아니라 **프로젝트 규모가 굉장히 커서 100군데라면 어떨까요?** 곤란하겠죠?


- 액션객체를 만드는 함수를 `Action Creator`(액션 크리에이터)라고 한다.
- `Action Creator`는 모듈 파일안에서 생성된다.
- 액션객체의 type value로 상수로 생성해서 관리한다.
- `Action Creator`를 사용하면, 여러가지 문제점을 해소할 수 있다.

**Ducks 패턴은 아래의 내용을 지켜 모듈을 작성하는 것 입니다.**

1. Reducer 함수를 `export default` 한다.

2. Action creator 함수들을 `export` 한다.

3. Action type은 `app/reducer/ACTION_TYPE` 형태로 작성한다.

(외부 라이브러리로서 사용될 경우 또는 외부 라이브러리가 필요로 할 경우에는 UPPER_SNAKE_CASE 로만 작성해도 괜찮다.)

- 리듀서로 보내는 액션객체에 어떤 정보를 같이 담아보내고자 한다면 payload를 이용한다.
- `payload`는 **Action Creator를 생성할 때 매개변수에 자리에서 받을 준비를 하고, 반환하는 액션객체에 payload라는 key와 받은 매개변수를 value로 하여 구현**한다.
- 리듀서에서 payload를 사용하고자 할 때는 **action.payload로 사용**할 수 있다.
- ES6에서 **객체를 생성할 때 key와 value가 같으면 축약해서 작성**할 수 있다.
- `Ducks` 패턴은 `Erik Rasmussn` 이 제안했고, 현재 리덕스 모듈 작성방법의 정석으로 여겨지고 있다.

내일 할 일
벨로퍼트 문서 보기 -- (매일)
드림코딩 + 노마드 리액트 + 패스트캠퍼스 강의 듣기 (매일)

주특기 학습 자료 -- 라우터 & 과제

스터디 303p 까지 
노마드 실전형 리액트 hook & 리덕스 
인공지능, 컴c, 파이썬 남은거 다 듣고 정리 - 저녁or밤