언제 써야 할까
컴포넌트마다 데이터를 들고 다녀야 하니까
바로바로 옆에 있는 컴포넌트 끼리 프롭스를 주고 받을 수 없는 상황에서 리덕스를 쓰게 된다.
전체적으로 상태를 관리하기 위해서 리덕스를 만들었는데
리덕스가 필요하지 않고 안써야 할 경우가 훨씬 많다는 의견도 있다.
우선은 state로 관리하려고 하거나 웹브라우저의 스토리지를 활용하는 방법을 먼저 생각한 다음에 리덕스를 한다.
movx, redux 등
리액트 자체에서 만드는 context API, Reducer를 활용하는 방법도 있다.
그런데 가장 어려운 방법이 리덕스이다.
그래서 회사에서는 이걸 공부하고 온 사람들은 선호하는 경우도 있다.
전체 스테이트 관리
재생에 관련한것은 리덕스가 필요.
만약 재생이 바텀에 있어서 그걸 어느 창에서도 다 확인 할 수 있어야 한다면?
메인 페이지에서 누르면 바텀에서 시작되도록 해야 하는데 이건 전역에서 관리를 해야 한다.
지금 어떤 노래가 재생되었다는 것을 감지하고 아래의 재생바를 바꿔야 한다.
테마관리
블랙모드, 화이트 모드
바꾸는 순간 모든 앱의 css 값들이 모두 바뀌어야 하는데 이런 것들은 단순 css로만 할 수는 없다.
언어설정
한국어로 보다 영어로 바꿔야 하는 경우
갑자기 회사에서 언어 지원을 해야 한다면 프론트에서 관리 해야 한다.
회원가입을 축하합니다. 라는 걸 한국말. 영어로 welcome to my site라면 이걸 다 객체로 관리
하나의 큰 객체에다가 안녕하세요라는 유니크한 프로퍼티의 이름을 정해서 그 객체를 Ko, En 를 키로 하고 한국어문장, 영어 문장을 저장
리덕스로 언어 설정에 대해서 state에서 설정 lang : 'ko' 이런식으로 관리
리덕스는 초기 세팅이 어렵다.
단방향 데이터 바인딩 , flow
리액트는 단방향인데 스테이트가 바뀌면 일방적으로 view단에서 바뀐 것을 받아서 화면에 보여주는 것이다.
input와 같은 곳에서 onchange로 state를 바꾸면 그 바뀐 값을 가지고 다시 화면에 보여주는 식인데
앵귤러, 뷰는 양방향임. 단방향은 리액트의 특징이다.
action : 스테이트를 바뀌게 하라고 명령
Dispatcher: 변화를 듣는 곳
store: 스테이트를 바꿈
store -> View: 바뀐 것을 전달
View -> Action: 액션을 발행
action
만약 언어 설정을 바꾼다고 하면
action: 사용자의 액션 _ 홈페이지 상위에 언어목록이 있다. 이때 사람이 한글을 누르는 것. Onclick이 달려있어서 그 한글을 누르게 되는 것 바꾸고 싶은 값을 발생시키는 것
모달이 컴포넌트마다 모달을 따로 만들어서 종속적으로 만드는 것이 아니라 보통 프론트에서 만드는 모달은 딱 하나이다.
제목과 내용만 바꿔서 쓰는 것이다.
이러한 모달을 띄우느냐 나므냐를 전체 state로 관리한다.
회원가입 버튼을 누르면 그게 액션 ( 모달을 보여주라는 스테이트에 관련된 액션)
store
코드상에 store라고 직접 쓸일은 없지만,
View
바뀐것을 감지하는 것.
리덕스의 특징
- state는 읽기 전용 ( 우리가 this.state.id = 홍길동 할수 없어서 setState
- Reducer 액션이 발행되면 이걸 감지하고 어떻게 바꿀지
인자로 발행한 액션, state를 리턴
순수함수이다. ( 같은 입력값을 넣으면 같은 출력값을 내는 함수 2를 넣으면 3만 나오는 것. 입력을 넣으면 달라지는 것이 있다. 날짜를 구하는 함수 반환이 매일 매일 달라진다. 이런것은 순수함수가 아니다. 우리가 생각하는 로직에 의한 함수가 순수함수이다.) 특정 액션에 대해서 그 state가 항상 똑같은 것
show modal이면 항상 modal = true 라는 스테이트가 반환되어야 하는 것
Redux 설치
리덕스는 리액트에서만 쓰이는 것이 아니다.
상수는 대문자로 써야함
combine reducer : 여러가지 리덕스 활용
redux-thunk : 비동기 처리
리덕스 공부중이었는데 ㅋㅋ 잘쓰셨네요 은지님 ㅎㅎ 잘보고갑니다