엘리스 AI 트랙 07주차 - Redux 기초 I (2/6) 🔥

✔ 07주차. 웹 프론트엔드 II

<학습 목표>

1. 클래스 컴포넌트와 함수 컴포넌트의 공통된 점과 차이점을 비교하여 상황에 맞게 사용할 수 있습니다.

2. Hook을 사용해 함수 컴포넌트에서도 State의 값을 변경할 수 있습니다.

3. State관리를 하는 방법과 구조를 이해하고 Redux를 사용하는 이유를 알 수 있습니다.

---

[01 Redux란?]

1. Redux

  - Redux 등장배경
    - 프로그램의 복잡성은 개발자와 코드를 관리하는 보안관리자의 사이를 멀어지게 하며 개발자들이 개발을 할 때 코드가 장황해지거나 애플리케이션 시스템을 제어하기가 매우 까다로워짐. Redux는 애플리케이션의 복잡성을 획기적으로 낮춰서 코드가 어떤 결과를 가져올지 예측가능하게 만들어주는 도구.
  - Redux 정의 : application 전체의 상태(state)를 편리하게 관리하기 위해 사용하는 라이브러리
  - Redux 개념정리
    → Redux는 사용률이 높은 상태 관리 라이브러리이며, 앱의 컴포넌트들의 상태 관련 로직은 각각 다른 파일로 분리해서 효율적인 관리 가능
    → React, Vue, Anguler에서 사용가능
    → 단방향 (앱 전체상태를 단일 스토어로 관리하여 앱 전체를 쉽게 관리할수 있고 디버깅이나 개발자도구를 쉽게 사용할 수 있게 함)
    → 리듀서는 순수 함수 (※순수함수 : 어떤 함수에 동일한 파라미터를 주었을 때 항상 같은 값을 리턴하고 외부 상태를 변경하지 않는 함수)

 

2. Redux 의 필요성
  - 간단한 방법으로 React에서 상태 관리를 할 수 있지만 application의 규모가 복잡해지고 커질수록 상태 관리는 더욱 더 힘들어지는 단점이 있음. 
  - Redux는 글로벌 상태 관리를 할 때 굉장히 효과적임. (훨씬 단순한 코드로 아주 복잡한 일을 할 수 있도록 해줌)

3. Action, Reducer, Store 개념 정리
  - 액션 (Action)
    → 애플리케이션 상태 중에서 어떤 부분을 바꿀지 지정하고 그런 변경에 필요한 데이터를 제공

  - 리듀서 (reducer)
    → 함수를 사용해 상태 트리 일부를 갱신하는데 이런 함수를 reducer라고 부름. 스토어를 생성시 반드시 제공해야하는 인자(함수).
  - 스토어 (Store)
    → 애플리케이션의 상태 데이터를 저장하고 모든 상태 갱신 처리. 현재의 앱 상태, 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있음.
  - 디스패치 (dispatch)
    → 스토어의 내장함수 중 하나. 액션을 파라미터로 전달해 발생 시킴

4. 스토어 생성하기
  - 리덕스에서는 한 애플리케이션 당 하나의 Store를 만듦 

function reducer() {
}
 Redux.createStore(reducer);

  - 스토어에 존재하는 State는 아주 신성한 것이기때문에 React 컴포넌트같은 하등한 것이 직접 접근하려고 하면 안됨. (ㅋㅋㅋㅋㅋ) 직접 접근하기 위해서는 Action이라는 의식을 거쳐야 함. 그렇게 호출을 하면, 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어준다

{/* reducer 함수를 만들고 그 안에 컨테이너 색을 바꾸는 리듀서 작성 */}

function reducer(state,action) {
    if (state=== undefined) {
        return { color: 'green' }
    }
}

{/* store 생성 */}
const store = Redux.createStore(reducer);

function red(){
    {/* console 이용해 state초기값 확인*/}
    var state= store.getState();
    console.log(store.getState());
    
    document.querySelector('#red').innerHTML = `
<div class="container" id="component_red" style="background-color:yellow">
    <h1>red</h1>
    <input type="button" value="fire" onclick="
    document.querySelector('#component_red').style.backgroundColor = 'red';
    document.querySelector('#component_green').style.backgroundColor = 'red';
    document.querySelector('#component_blue').style.backgroundColor = 'red';
    ">
</div>
    `;
}
red();

📌 리듀서에 state를 설정하고 난 뒤 반드시 console.log(store.getState()); 를 찍어줘야 함

5. 리덕스로 색 관리 앱 만들기

function reducer(state, action){
    if(state === undefined){
        return {color:'yellow'}
    }
    var newState;
    if(action.type === 'CHANGE_COLOR'){
        newState = Object.assign({}, state, {color:action.color});
    }
    console.log(action.type, action, state, newState);
    return newState;
}
var store = Redux.createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()    
);
function red() {
    var state = store.getState();
    document.querySelector('#red').innerHTML = `
        <div class="container" id="component_red" style="background-color:${state.color}">
            <h1>red</h1>
            
            <input type="button" value="changeColor" onclick="
                store.dispatch({type:'CHANGE_COLOR', color:'red'});
            ">
        </div>
    `;
}
store.subscribe(red);
red();

function green() {
    var state = store.getState();
    document.querySelector('#green').innerHTML = `
        <div class="container" id="component_green" style="background-color:${state.color}">
            <h1>green</h1>
            
            <input type="button" value="changeColor" onclick="
                store.dispatch({type:'CHANGE_COLOR', color:'green'});
            ">
        </div>
    `;
}
store.subscribe(green);
green();

function blue() {
    var state = store.getState();
    document.querySelector('#blue').innerHTML = `
        <div class="container" id="component_blue" style="background-color:${state.color}">
            <h1>blue</h1>
            
            <input type="button" value="changeColor" onclick="
                store.dispatch({type:'CHANGE_COLOR', color:'blue'});
            ">
        </div>
    `;
}
store.subscribe(blue);
blue();

[02 React에 Redux 적용]

1. Redux 데이터 흐름 이해

https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow

  - 스토어를 통해 액션을 디스패치하면 모든 reducer에 액션이 전달되고 상태가 갱신됨
    ① UI가 액션을 dispatch로 전달
    ② 스토어는 reducer를 실행하고 발생한 상황에 따라 상태가 업데이트
    ③ 스토어는 상태가 변경되었음을 UI에 알림
    ④ 새로운 상태에 따라 UI가 다시 렌더링. ($10 으로 UI에서 업데이트)

  - Redux 3가지 원칙
    ① 글로벌 앱 state(상태)는 단일 스토어에 보관
    ② 스토어에 있는 state(상태)는 앱의 다른 부분에서 읽을 권한만 있음
    ③ reducer 함수는 state(상태)를 액션을 통해 바꾸기 위해 사용

2. Redux 코드 구조 - 액션
  - Action : 스토어에서 상태 변화를 일으킬 때 참조하는 객체
  - Action 작성시, 첫번째 필드 type은 필수적으로 포함되야 함. (type은 action이 무엇을 해야 하는지를 알리는 ID와 같은 개념)
  - Action을 좀 더 편하게 사용하기 위해서 액션 생성함수(action creator)를 사용

const INCREMENT = 'INCREMENT';

const increment = (diff) => ({
  type: INCREMENT,
  diff: diff
})

3. Redux 코드 구조 - 리듀서
  - 상태(state)에 변화를 일으키려면 reducer 함수가 필요
  - reducer는 두 개의 파라미터를 받으며 첫 번째는 현재 상태, 두 번째는 액션 객체
  - 초기 state는 Reducer에서 생성해야하며, 이후 변경된 state는 덮어씌어서 사용
  - action별로 다르게 동작시키기 위해 switch ~ case 문을 이용 (Action에서 지정했던 Type별로 분기하여 처리)

const initialState = {
 number: 1,
 foo: 'bar'
}

function counter(state = initialState, action) {
 switch(action.type) {
  case INCREMENT:
  return Object.assign({}, state, {
   number: state.number + action.diff
  })
 }
}

  - Reducer의 중요한 특징
    → Reducer 함수는 이전 state와, action 객체를 파라미터로 받아야 함
    → Reducer는 이전의 state는 변경하지 않고 변화를 일으킨 새로운 state 객체를 덮어씌우고 반환해야 함
    → 똑같은 파라미터로 호출된 Reducer 함수는 언제나 똑같은 결과값을 반환해야 함

---

※ 수업 자료의 출처는 K-Digital Training x 엘리스 인공지능 서비스 개발 기획 1기 (elice.io/)입니다.