1. React의 늪은 아주 깊고 깊다..
계속되는 컨디션 난조와 가을-겨울을 오가는 이상기온까지 겹치면서 진짜 상태가 최악이다. 이번 감기는 정말 지독해서 다 나았나~싶으면 다시 도지고.. 이걸 무한 반복해서 벌써 감기를 3주 째 앓고 있다. 지긋지긋한 감기 빨리 나았음 좋겠다. 절대 이번 감기는 걸리지말 것!!!
이 지긋지긋한 감기와 함께 계속해서 React의 늪에 빠지고 있다. MVC구조할 때도 느꼈던 걸 Redux하면서 또 느끼고 있다. 구조화만 하면 늪에서 허우적거리기 시작하는 나.. 잘 이겨내보자!! 빠샤!
2. Redux
1) 정의
JS 상태 관리 라이브러리로, React를 배울 때 많이 나오는 용어이나 꼭 React에 종속되는 개념은 아니다.
React의 상태 관리 라이브러리로 가장 많이 사용된다.
2) 필요성
컴포넌트 수가 많은 대형 프로젝트에서는 state를 전해주기 위해 props를 많이 써야하는 경우가 발생하는데(props 지옥), Redux를 사용할 경우 전역으로 상태를 관리할 수 있게되어 state를 props로 전달하지 않고 store라는 곳에서 바로 꺼내 쓸 수 있기 때문에 더 효율적이다.
💡 state 종류
- Local State : 각각의 컴포넌트가 소유하고 있는 상태를 의미한다. 이 상태는 해당 컴포넌트 내에서만 관리되고 사용된다.
- Cross-Component State : 두 개 이상의 컴포넌트 간에 공유되는 상태를 의미하며 props를 통해 상태를 전달한다.
- App-Wide State : 애플리케이션의 전체 영역에서 사용되는 상태이다. 여러 컴포넌트, 혹은 앱의 전체 영역에서 공유되어야 하는 데이터나 상태에서 사용된다.
→ Cross-Component와 App-Wide State 일 때 context API나 Redux가 요구 된다.
3) 용어 정리
① Store(스토어)
상태가 관리되는 오직 하나의 공간으로, 스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있다.
한 개의 프로젝트는 단 하나의 스토어만 가질 수 있으며 스토어에 있는 데이터는 컴포넌트에서 직접 조작하지 않고 '리듀서 함수'를 사용한다.
② Action(액션)
상태에 어떠한 변화가 필요하면 action이란 것이 발생한다. action은 컴포넌트에서 store에 운반할 데이터를 말하며, action은 하나의 객체로 표현된다. 리듀서가 수행할 작업을 설명한다.
{
type: 'INCREASE'
text: '안녕하세요'
}store.dispatch() 를 통해 action을 보낼 수 있으며, action은 반드시 어떤 형태의 action이 실행될지 나타내는 type 속성을 가져야 한다.
③ Reducer(리듀서)
Reducer는 action의 type에 따라 변화를 일으키는 함수이다.
첫번째 매개 변수는 현재 상태값을, 두번째 매개변수는 action 값을 받는다.
항상 새로운 상태 객체를 반환하며, HTTP요청/데이터저장 같은 건 불가능하다.
④ Dispatch(디스패치)
action을 발생시키는 것을 의미하며, dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출한다.
4) 사용 방법
① 모듈 설치
npm i redux react-redux @reduxjs/toolkit💡 @reduxjs/toolkit?
Redux의 복잡성을 줄이기 위해 만들어진 도구이다.
action 생성, reducer, 미들웨어 등 Redux와 관련된 기능들을 효율적으로 구현한다.
② Redux 적용
Redux를 React에 적용한다.
import { Provider } from "react-redux";
import rootReducer from "./store";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Provider store={store}>
<App />
</Provider>
);- Provider
state를 어떤 component들에게 제공할 것인지 범위를 설정한다.
제공받을 component들을<Provider></Provider>로 감싼다.
Provider를 사용할 때 반드시 store라는 props을 반드시 정의해줘야 한다.
<Provider store={store}></Provider>
즉, Provider로 감싸진 component들을 store를 사용할 수 있게 된다.
-
useSelector
리덕스 store의 상태 값을 조회하기 위한 hook 함수이다.
인자로 함수를 넘겨줘야 하며, 그 함수는 state를 매개변수로 받을 수 있고, return 값은 원하는 state 변수 값으로 설정한다.import { useSelctor, useDispatch } from "react-redux"; const number = useSelctor(state => state.number); -
useDispatch
action을 발생시키는 Dispatch 함수를 실행하는 hook 함수이다.
인자로 원하는 action 객체를 넘겨줘야 한다.import { useSelctor, useDispatch } from "react-redux"; const dispatch = useDispatch(); <button onClick={()=>{dispatch({type:'INCREASE'})}}>PLUS</button> <button onClick={()=>{dispatch({type:'DECREASE'})}}>MINUS</button>
③ Chrome에서 store 확인
-
설치
npm install redux-devtools-extension -
React앱에 적용
import { composeWithDevTools } from "redux-devtools-extension"; const store = configureStore({reducer: reducer}, composeWithDevTools()); -
Chrome 확장 프로그램 Redux DevTools 설치
설치 후 Chrome 개발자 도구 > Redux 에서 store에 저장된 상태 확인이 가능하다.
5) 구조화
redux 구조화 + containers 컴포넌트 폴더와 components 폴더를 분리하였다.
① containers 폴더
redux store에 직접적으로 접근하는 컴포넌트를 모아두기 위해서 생성한다.
② components 폴더
redux store에 직접적으로 접근하지 않고, 보통 presentational 컴포넌트만 저장한다.
3. 마치며
React와 감기에 허우적대고 정신차려보니 벌써 12월 중순, 곧... 2차 프로젝트가 다가오고 있다. 두렵다... 이렇게 React의 R도 겨우 이해하는 내가 프로젝트를 잘 마칠 수 있을지.. 걱정된다.. ㅠㅠㅠ
💻 본 글은 새싹X코딩온 풀스텍 웹 개발자 과정 수업과 수업자료를 참조하여 작성하였습니다.
