goal
- redux 때문에 미치기 직전인데, 그래도 일단 구현을 해야한다.
- 개념은 전보다 뚜렷하게 이해가 되는데, 막상 코드 쓰려니까 겁난다.
- 뚫고 앞으로 나아가야 한다. 반드시.
- Let's go!
react-redux
이 리덕스의 순서는
- User 가 상태를 바꾸면 -> Action 에서 객체를 보내. -> Reducer 에, 그럼 리듀서는 바뀐 상태를 업데이트해. 그럼 -> Store 가 업데이트 되는데, 이 state는 직접 접속할 수가 없어. 근데 이 state가 실제 정보야. -> 이거를 렌더해. 그럼 유저가 바뀐 상태를 보게 되는 거지.
- react-redux 라이브러리를 쓰는 이유는, 리덕스를 좀더 간편하게 사용할 수 있기 때문이야.
- 어떻게? 컴포넌트에서 store를 props로 받아오는 거랑, subscribe를 하지 않아도 되게 되는 거지.
폴더를 나눠보자
actions / actions: 액션타입, 액션생성자 파일이 저장됩니다.
pages / components: 뷰만을 담당하는 presentational 컴포넌트들이 저장됩니다
-> 얘는 store에 직접적으로 접근하는 권한은 없으며, 오직 props로만 데이터를 가져온다.
-> 대부분 state를 가지지 않으며, 함수형으로 작성하는 것이 컨벤션
components / containers: store 에 접근이 닿는 container 컴포넌트들이 저장됩니다
-> 얘는 컴포넌트들을 관리 / 스타일은 모두 위의 components에 정의되어야
-> state를 가지고 있는 경우가 많고, 리덕스에 직접적으로 접근할 수 있다.
-> 페이지 / 리스트 / 헤더 / 사이드바 / 내부의 컴포넌트 때문에 props가 여러 컴포넌트를 거쳐야 하는 경우
reducers / reducers: 스토어의 기본상태와, 상태의 업데이트를 담당하는 리듀서 파일들이 저장됩니다
etc / utils: 일부 컴포넌트들에서 공용되는 파일이 저장됩니다.
=> 이렇게 되면 UI랑 DATA가 분리, component의 재사용성도 높아짐
순서
1. components directory
- components에서 보이는 부분을 작성한다 - 여기까지는 react랑 별반 다를 게 없음
-> 그러니까 나는 pages에서 만든 부분에 이벤트들을 모두 작성하면 된다.
2. actions directory
- actions에서
-> action은 하나의 "객체 객체 객체" / 그리고 모든 action 객체는 type을 지정해 주어야 한다./ 필수 영역
-> 액션과 함께 전달해야 할 값이 있을경우엔 추가한다. 이부분은 자율
-> action도 파일을 분리해서 저장하면 좀더 사용하기 쉬워진다.
-> action 선언할 때는, "대문자로"
-> 정리하면, action에서는 객체를 만들어준다.
3. reducers directory
- reducers는 action의 type에 따라 변화를 일으키는 함수
-> reducers에는 state가 변화하기 "전"인, 초기상태가 정의되어야 한다.
-> 보통 initialState 객체에 초기상태를 정의한다. - reducer 함수 작성
-> reducer 함수는 "state, action"을 파라미터로 가진다.
-> 그 내부에서, switch문을 통해서,action.type에 따라 state에 각기 다른 변화를 일으킨다.
-> 주의! state를 직접 수정하는 것은 금지
-> 대신에, 기존 state 값을 덮어쓴 새로운 state를 만들어야 한다.
-> 예를 들면, react에서setState({isLogin : true})이런 식으로 state를 바꾼 것처럼!
4. store directory
- store는 매우매우매우 핵심 instance이다.
- store에는 현재 state상태가 있으며, 구독(subscribe) 중인 함수들이 state가 업데이트 될 때마다! 다시 실행되도록 한다.
- store는 보통 정해진 코드를 따른다.
5. container directory
- container 컴포넌트를 store에 연결시켜 주기 위해
react-redux의connect함수를 사용한다. - 이 함수의 파라미터로 컴포넌트에 연결시킬 상태와, 액션함수들을 전달해주면, 컴포넌트를 리덕스 store에 연결시키는 또 다른 함수를 반환한다. (여기가 살짝 복잡하네...)
- 이 과정에서 리턴된 함수 안에, components 컴포넌트를 파라미터로 전달해주면 리덕스 store에 연결된 컴포넌트가 새로 만들어진다.
- 컴포넌트에 연결시킬 상태와 액션함수를 정의할땐 각각 함수를 만들어줘야하는데, 상태를 연결시킬땐 state, 액션함수를 연결시킬땐 dispatch 를 파라미터로 전달받는 함수를 만들어서 객체를 반환하면 이를 props 로 사용 할 수 있게 된다.
벨로퍼트 김민준님https://velopert.com/3346
생활코딩 이고잉님https://www.youtube.com/watch?v=xBChHYeV138&list=PLuHgQVnccGMDuVdsGtH1_452MtRxALb_7&index=5
제로초님https://www.zerocho.com/category/React/post/57b60e7fcfbef617003bf456
항상 감사합니다
