패스트캠퍼스 챌린지 11일차 - 상태관리 리덕스 끝내기

0. 공부인증

공부 시작 12 : 29

회사 일 + 집 내려가는 시간 13: 30 ~ 22 : 50

공부 종료 21 : 47(살다 살다 기차에서 공부 포스팅을 할줄은 몰랐습니다......😂)

 

 

회사에서 리덕스를 사용하게 되어 기존 강의 순서를 살짝 무시하고,
리덕스 관련 강의를 먼저 듣게되었다.

 

그래서 이번 리덕스를 공부하고 부터는 다시 본 순서대로 글을 작성할 예정이다.

 

0. 리덕스가 리액트의 꽃이라고 한다.

그만큼 중요하지만 그만큼 어렵기도 하다.

계속 리덕스를 실제 플젝에 적용하려고 해도 그냥 더 쉬지만 복잡한 방법을 주로 선택했었는데...

이제는 리덕스를 꼭 끝내야겠다라는 생각이 들어서 글을 작성하게 되었다.

 

1. 리덕스를 왜 사용해야하는가

회원 인증 관리같은 경우에는 useState로 관리하기에 한계가 있다.

어느 컴포넌트에서나 접근이 가능한 그런 상태 관리가 필요하다.

그런 라이브러리 중에 하나가 리덕스이다.

 

그래서 설치는 어찌 하느냐

방법 1 : 시작할때부터 Template를 적용하는 것

npx create-react-app my-app --template redux

 

방법 2 : 리액트 앱 생성 후, 리덕스 추가하기

npm install react-redux

 

리덕스의 순서 (액션 발생후 순차적으로 스토어까지 감. 역순 절대 불가)

 

리덕스의 용어

Action, Dispatch, Reducer, Store ...

 

쉽게 정리하면,

1. 디스패치 함수가 실행하면

2. 액션이 발생한다.

3. 이를 리듀서가 전달하면

4. 최종적인 상태가 된다.

 

Action 은 무엇인가 (액션 타입을 통해서 액션을 호출하는 방식)

 -> {type : "some Text"} 

Reducer 는 무엇인가 (상태 정보인 state와 액션 정보를 인자로 전달함. 그래서 값을 변화시킴)

 -> function reducer(state, action){ retrun changeState }

Store 는 무엇인가 (앱에는 단 하나의 스토어가 존재. 현재 상태 및 리듀서가 포함되어 있음)

Dispatch 는 무엇인가 (스토어 내장함수, 액션을 발생시키는 함수)

 -> dispatch(action)

 

2. 리덕스 프로젝트 시작

npx create-react-app redux-project

npm install redux react-redux

 

폴더 생성 : src/store/index.js && src/store/modules/todo.js

-> store 에서는 앱에서 사용되는 최상위 저장소라고 생각하면 좋음

-> store/index.js 는 각 저장소를 총괄 책임하는 하나의 파일

-> store/modules/*.js 는 기능별 데이터를 분류해둔 파일들

다시 정리를 하자면,
디스패치 함수 -> 액션 -> 리듀서 -> 스토어

 

스토어 파일을 어떤 식으로 구성해야하느냐!!

  1. 액션 타입 지정

  2. 액셩 생성 함수

  3. 초기 상태를 만들어주자

  4. 리듀서를 만들자 

예시

// 우리가 원하는 행동, 데이터의 변화를 각각의 액션으로 할당

// 액션 타입 (문자열) : 액션 타입을 보통 대문자로 하는 것이 관례
// todo/CREATE 가 된 이유는 todo의 CREATE 다 라는 것을 알려주기 위한 목적도 있음.(어디에 속해 있냐라는 것)
// todo/CREARTE 를 통해서 조금이나마 더 가독성이 좋게 그리고 에러 발생율을 줄일 수 있음. 
// 외부의 여러 곳에서 사용될 수도 있음
const CREATE = 'todo/CREATE' // 할 일 목록을 추가하는 액션
const DONE = 'todo/DONE' // 할 일 목록 중에서 완료 처리하는 것



// 액션 생성 함수 
// 무조건 객체 형태임. 그리고 객체에 type이 꼭 필요함.
// 어떤 값을 생성하기 위해서는 데이터가 필요함 그것이 payload라는 변수라고 하자.
// 현재 payload의 값에는 {id : 1, text : "hello"} 처럼 들어가 있음 
export function create (payload) {
    return{
        type : CREATE,
        payload
    }
}

export function done (id) {
    return{
        type : DONE,
        id
    }
}


// 초기 상태를 만들어주자
const initState = {
    list : [{
        id : 0,
        text : "척추 펴기",
        done : true
    },
    {
        id : 1,
        text : "물 마시기",
        done : false
    }],

    listColor : "red" // 이건 그냥 예시
}

// 마지막으로 리듀서라는 것을 만들어보자
// 리듀서 :::: 스토어를 변경 시키는 것
// 함수를 생성할 때에는 state와 action 을 무조건 주어야 함. 
// state의 기본 값으로 initState를 줄 수 있음
export default function todo(state = initState, action){
    // 리듀서 안에는 스위치 문이 들어감
    // 액션 함수의 타입을 가져와서 그것에 맞게 작동함.
    switch(action.type) {
        case CREATE: 
            return{
                // 우선 기본 상태를 가져와야함.
                ...state,
                list : state.list.concat({
                    id : action.payload.id,
                    text : action.payload.text,
                    done : false
                })
            }
        case DONE :
            return{
                ...state,
                list : state.list.map(item => 
                    item.id === action.payload.id 
                    ? {...item, done : true}
                    : item
                )
            }
        default :
            return state // 디폴트에 아무것도 작성하지 않으면 에러가 발생해. 꼭 state를 리턴해줘
        
    }
}

3. 저장소를 만들어서 사용하기 (리덕스 적용하기)

store/index.js 에서 모든 모듈의 파일을 가져와서 관리하자

// 여러 리듀서들을 합쳐주자 -> 이것이 루트 리듀서야 ~
import { combineReducers } from "redux";

// 리듀서를 임포트하자
import todo from "./modules/todo";


export default combineReducers({
    // 여러 리듀서들을 넣어줘 :: 서브 리듀서
    todo
})

 

리액트의 index.js 파일에서 리덕스를 적용해보가

1.  저장소를 만들어줘야함으로 리덕스에서 createStore 를 가져오자.

1-2. createStore 에 입력할 내가 만든 리듀서를 가져오자.

2. 프로바이더를 가져오자 :<App /> 를 감싸주도록.

3. App 컴포넌트를 감싸주자.

3-2. 프로바이더의 Props 로 store를 보내주자

 

전체 코드 >>

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';


// 리덕스를 위한 코드들
// 1. 저장소를 만들어줘야함
import { createStore } from "redux"
import rootReducer from './store'

// 2. 프로바이더를 가져오자
import { Provider } from "react-redux"

// const store = createStore(루트 리듀서)
const store = createStore(
  rootReducer,
  // 크롬 확장 프로그램을 위해서
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

console.log(store.getState())

ReactDOM.render(
  <React.StrictMode>
    <Provider store = {store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

3-3. 컴포넌트에서 리덕스를 사용하자.

리덕스의 값을 변경시키기 위해서는

  1. useDispatch,

  2. 액션 함수를 가져와야하고,
  3. 변경하고자 하는 값을 생각하여 액션 함수를 선택하고,

  4. 액션 함수의 인자에 값을 페이로드에 실어서 디스패치에 실어서 보내자!!!!!

 

리덕스의 값을 가져오기 위해서는

  1. useSelector

  2. const list = useSelector(state => state.todo.list)

 

*기타 참고 사항 
  1. input 에서 값을 입력 받을때, useRef 를 활용하는 것도 낫베드

      -> const inputRef = useRef()

           <input ref = {inputRef}>

       -> 값을 가져올 때 :: inputRef.current.value

 

import { useRef } from 'react'
import { useDispatch, useSelector } from "react-redux"
import { create, done } from '../store/modules/todo'

export default function AllTodoList() {
    const list  = useSelector(state => state.todo.list)
    const inputRef = useRef()
    const dispatch = useDispatch()

    return(
        <section>
            <h1>할 일 목록</h1>
            <div>
                <input type = "text" ref = {inputRef} />
                <button
                    onClick = {() => {
                        dispatch(create({id : list.length, text : inputRef.current.value }))
                    }}
                >확인</button>
            </div>

            <ul>
                {list.map(item => (
                    <li key = {item.id}> {item.text} </li>
                ))}
            </ul>
        </section>
    )
}

 

 

 

환급 챌린지 (11/30)

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/37BpXiC

 

패스트캠퍼스 [직장인 실무교육]

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는Node.js웹프로그래밍초격차패키지