오늘은 매니저님께서 여기저기 돌아다니시면서 '리덕스의 흐름'에 대해 질문을 던지시는 것 같아서 미리 대비할 겸 정리하고자 한다..
대충은 알고 있는데 이를 누군가에게 설명할 정도로 확실하고 빠삭하게 인지하고 있지는 않으니 이번 기회에 복습한다고 생각해야겠다.

---

Redux 의 핵심 요소

- Action

: State가 변하는것. “무엇이 일어날지”

- Reducer

: 변화를 일으키는, 즉 데이터(state)를 수정하는 함수. action을 통해 어떠한 행동을 정의했다면, 그 결과 어플리케이션의 상태가 어떻게 바뀌는지는 특정하게 되는 함수이다.

- Store

: action과 action에 따라 상태를 수정하는 reducer를 저장하는 어플리케이션에 있는 단 하나의 객체.
store 는 state 를 수시로 확인해 View 한테 변경된 사항을 알려주는 역할을 한다.

- Dispatch

: store 의 내장 함수 중 하나로 reducer 에게 Action 을 발생하라고 시키는 것
store에서 reducer함수를 실행시켜 state를 업데이트한다.

- Subscribe

: action 이 dispatch 될 때 마다 전달해준 함수를 호출한다.

- Middleware

: action 을 dispatch 했을때 reducer 에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행한다.

• thunk 와 saga 가 대표.

  

---

Redux의 3가지 대표 룰

1. 하나의 어플리케이션은 하나의 Store만 가진다.

2. Reducer 는 순수함수이다.

동일한 파라미터로 호출 된 Reducer 는 언제나 같은 패턴의 결과값을 반환해야만 한다.

3. state는 read-only 이다

기존의 state 고유 값은 수정하지 않고 새로운 state 를 만들어 이를 수정하는 방식으로 업데이트를 한다.
이는 Redux 고유의 불변성을 지키기 위함이다.

---

Redux 의 흐름

1. View 에서 액션이 일어난다.

2. dispatch 에서 action이 일어나게 된다.

3. action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다.

4. middleware 에서 명령내린 일을 수행하고 난뒤, reducer 함수를 실행한다.

5. reducer 의 실행결과 store에 새로운 값을 저장한다.

6. store의 state에 subscribe 하고 있던 UI에 변경된 값을 준다.

---

input type="file" 커스텀하기

type = "file" 이면 파일이 예쁘지 않게 나와서 커스터마이징 할 수 있는 방법을 찾아봤다!

// File
const FileBox = styled.div`
input {
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
}
`;

대신 이렇게 width, height를 0으로 만들면 label을 만들어줘야된다!