1. Redux란? : 전역상태관리 라이브러리인 Redux
어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보고자 할 때 어떻게 하는가?
=> Props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 그 값을 보내줌.
=> 이러한 방법에는 불편한 점이 따름
[ 불편한 점 ]
컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 부-모 관계가 되어야 함
조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 부모 컴포넌트를 거쳐야만 함.
=> 정작 부모컴포넌트에서는 그 값이 필요가 없어도 단순히 손자 컴포넌트에게 전달하기 위해
불필요하게 거쳐야만 하는 것을 의미. (조부모 → 부모 → 손자) => props drilling
자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없음
▼▽▼▽
이러한 불편함 겪지 않기 위해 리덕스를 사용
리덕스를 사용하면 State를 공유하고자 할때 부-모 관계가 아니여도 되고,
중간에 의미없이 컴포넌트를 거치지 않아도 됨. 그리고 자식 컴포넌트에서 만든 State를
부모 컴포넌트에서도 사용할 수 있음
- Global state와 Local 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라고 함.
=> 이러한 값들을 관리하는 것을 전역 상태 관리 라고 함.
▼▽▼▽
리덕스란, “중앙 state 관리소”를 사용할 수 있게 도와주는 패키지(라이브러리)
“중앙 state 관리소" 를 통해서 State를 관리한다는 아이디어는 굉장히 좋으나,
우리가 그것을 직접 구현하기는 아직 어려움.
=> 패키지(라이브러리)의 도움을 받아 그것을 구현해보고자 함.
프론트엔드 개발자들은 “리덕스”를 전역 상태관리 라이브러리 라고 많이 표현.
전역 상태, 즉 Global State를 의미하고 그것을 관리하게 도와주는 라이브러리 (패키지) 이기 때문.
2. redux 설정
(1) 리덕스 설치
리액트에서 리덕스를 사용하기 위해서는 2개의 패키지를 설치해야 함.
vscode 터미널에서 아래 명령어를 입력해서 2개의 패키지를 설치.
참고로 react-redux 라는 패키지는 리덕스를 리액트에서 사용할 수 있도록 서로 연결시켜주는 패키지.
▼▽▼▽
yarn add redux react-redux
or ( 둘 중 하나 선택 )
yarn add redux
yarn add react-redux
(2) 폴더 구조 생성하기
이미지와 같이 폴더 구조를 생성
src 폴더 안에 redux 폴더를 생성
redux 폴더 안에 config, modules 폴더를 생성
config 폴더 안에 configStore.js파일을 생성
각각의 폴더와 파일은 역할이 있음
- redux : 리덕스와 관련된 코드를 모두 모아 놓을 폴더
- config : 리덕스 설정과 관련된 파일들을 놓을 폴더
- configStore : “중앙 state 관리소" 인 Store를 만드는 설정 코드들이 있는 파일
- modules : 우리가 만들 State들의 그룹이라고 생각하면 됨. =>
예를 들어 투두리스트를 만든다고 한다면, 투두리스트에 필요한 state들이
모두 모여있을 todos.js를 생성하게 되는데, 이 todos.js 파일이 곧 하나의 모듈이 됨
3.설정 코드 작성
(1) 설정 코드 작성 시, 주의사항
우리가 작성하는 설정코드는 이해할 필요가 없는 코드들, 코드 분석 금지 ❌
설정 코드를 작성하는 이유는 리덕스를 만든 리덕스팀에서 이렇게 설정을 하라고 안내하고 있기 때문.
리덕스 사용 “방법”을 중점으로 공부해야 함.
우리가 핸드폰을 샀을 때, 핸드폰을 잘 사용하기 위해서
핸드폰을 분해해서 어떤 부품으로 핸드폰을 만들었는지, 그 부품의 목적은 무엇인지 공부하지 않음
지금 우리가 배우는 리덕스도 마찬가지.
리덕스를 어떻게 만들었는지, 왜 이렇게 설정하는지는 중요하지 않음.
우리가 해야할 것은 단지 리덕스를 쓰는 방법만 익히면 됨.
(2) src/configStore.js
src/configStore.js 에 아래 코드를 입력
(3) index.js
디렉토리의 가장 최상단에 있는 index.js에 아래 내용을 입력
4. 정리
1. 리액트에서 리덕스를 사용하려면, redux, react-redux 가 필요.
2. 설정코드는 지금 당장 이해 할 필요가 없음.
3. “중앙 State 관리소"를 Store (스토어)라고 부름.
4. 모듈이란, State들의 그룹.
5. 모듈 만들기
우리가 리덕스로 처음 만들어 볼 것은 예전에 만들었던 카운터 프로그램
(1) 첫 모듈 만들기
모듈이란, State의 그룹.
우리의 첫 모듈은 카운터 프로그램에 필요한 State들이 모여있는 모듈이 될 것.
아래 순서대로 파일을 생성하고 코드를 입력
1. modules 폴더에 counter.js 파일을 생성.
2. 코드를 작성
7. 모듈의 구성요소 살펴보기
(1) initialState === 초기 상태값
이것은 initialState. 단어 그대로 초기 상태값. 즉, 어떤 State의 초기값을 정해주는 것.
우리가 useState를 사용했을 때 괄호 안에 초기값을 지정해주던 것과 같은 이치.
위 코드에서 만든 State의 초기값은 { } (객체)이고, 그 안에 number 라는 변수에 초기값 0을 할당해준 것.
초기값은 꼭 객체가 아니어도 됨. 배열이 되어도 되고, 그냥 원시데이터가 돼도 됨.
그리고 객체에도 여러개의 변수를 넣어줄 수 있음.
(2) Reducer === 변화를 일으키는 함수
아래 코드를 리듀서(reducer)라고 함. 리듀서란, 변화를 일으키는 함수.
우리가 useState()를 사용할 때, number라는 값을 바꾸고 싶으면 setNumber를 사용했었음.
아래 코드 처럼 number값을 변경할 수 있었음.
리덕스에서는 리듀서가 이 역할을 함.
우리가 “리듀서야 number에 +1를 해줘" 라고 명령하면, 리듀서는 number에 +1을 더해줌.
그래서 변화를 일으키는 함수라고 표현한 것.
그리고 리듀서의 인자에 보면 (state = initialState, action) 이라고 되어 있음.
우리는 리듀서 인자 첫번째 자리에서는 state를, 두번째 자리에서는 action 이라는 것을 꺼내서 사용할 수 있음.
state = intialState 처럼 state에 initialState를 할당해줘야 하는 것만 기억.
Redux에는 데이터를 저장하는 store가 있음
그리고 그 안에 reducer가 포함되어 있는 상태라고 보면 됨
=> Redux는 reducer를 포함하는 store라고 할 수 있음
store는 상태를 저장하는 장소
여기서 우리가 어떤 action을 일으킨다는 것을 dispatch라고 함
reducer가 우리가 action을 일으켰을 때 자동 실행됨
그리고 그 action에 맞게 데이터를 수정해줌
store에 있는 데이터를 바꿔 주는 역할을 reducer가 함
(3) 카운터 모듈을 스토어에 연결하기
우리는 지금까지 모듈파일에서 초기 상태값과 리듀서를 작성함.
이제 우리가 만든 모듈을 스토어에 연결 시켜야 함.
아직까진 모듈과 스토어가 각각 따로 분리되어 있는 상태이기 때문에 우리가 만든 State를 스토어에서 꺼낼 수 없음.
configStore.js로 이동해서 아래 코드 추가
위와 같이 코드를 추가하면, 스토어와 모듈이 연결됨.
=> rootReducer 부분에 우리가 추가한 카운터 module을 넣어주면 됨
이렇게 스토어와 모듈을 연결시키는 코드는 우리가 모듈을 추가할 때마다 똑같이 진행.
8. 스토어와 모듈 연결 확인하기
(1) useSelector = 스토어 조회
이제 우리가 스토어와 모듈을 정상적으로 잘 연결했는지 눈으로 직접 확인해보기.
=> component에서 store를 작접 조회하면 됨.
=> useSelector라는 react-redux의 hook을 사용
useSelector의 사용법은 아래와 같음
App.js 컴포넌트로 이동해서 기존에 있던 코드를 모두 지우고, 아래 코드를 입력
우리는 컴포넌트에서 스토어를 조회할 때
react-redux에서 제공하는 useSelector 라는 훅을 사용. (너무너무 중요 🔥)
// const counterStore = useSelector((state) => state);
const counterStore = useSelector(function(state) {
return state;
});
=> 함수 안에 인자로 state를 받고 state를 리턴할 것이라는 뜻
=> 프로젝트에서 존재하는 모든 Redux module의 state를 가져오라는 뜻
console.log(counterStore);을 찍어보면 우리가 만든 카운터라는 module의 state가 잘 출력됨을 확인할 수 있음
이제 우리는 어떤 컴포넌트에서도 접근 할 수 있는 스토어를 가지게 되었음.
만약 우리가 컴포넌트에서 number라는 값을 사용하고자 한다면 아래 코드처럼 꺼내서 사용
counter 안에 있는 number를 가져와라는 뜻으로 코드를 사용
=> 이렇게 하면 0을 가져오게 됨
9. 정리
1. 보통 모듈은 기능의 이름을 따서 파일을 생성
2. 모듈의 구성요소로는 initialState, Reducer가 있음
3. 모듈을 만들면, 스토어에 연결을 해야만 함. 그리고 연결은 configStore.js에서 함
4. 컴포넌트에서 Store를 조회할 때는 useSelector를 사용해야 함
5. useSelector((state)⇒state)에서 state는 모든 모듈의 state 를 조회할 수 있는 값
'(심층)리액트' 카테고리의 다른 글
리액트 심화1 - Redux Toolkit(2) - TodoList 리덕스 툴킷으로 변환 (0) | 2023.01.18 |
---|---|
리액트 심화 - 리액트 쿼리1 (react-query 1) - 수정할 것... (1) | 2023.01.18 |
리액트 심화1 - Redux Toolkit (0) | 2023.01.16 |
Json server + Axios 공부하기 01 (1) | 2022.12.23 |
TODOLIST 과제 영상 (0) | 2022.12.15 |
github : https://github.com/dnjfht
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!