[WIL] 항해99 4주차

4주차 WIL

이번 주차에선 redux에대해서 공부를 하고, 반복을 하였다. 상태관리를 할 수 있는 라이브러리는 다양하지만
그중 redux는 다른 라이브러리들에 비해 뭔가 코드의 양이 방대하고, 작은 프로젝트를 할때에는 오히려 코드 양이 많아져서 Context API나 그런 것들을 쓰는 것이 더 효율 적일수도 있다고 한다.
왜 다음주에는 redux를 사용했는지 부터 생각을 하고 정리를 해야겠다.

리렌더링 조건

• react는 Virtual DOM을 사용하여 렌더링을 최적화 하고 성능을 개선한다.
  Virtual DOM은 브라우저에서 실제 DOM 조작을 최소화하여 애플리케이션의 성능을 향상시킨다.

  1. props나 state가 변경될 때 : 컴포넌트의 Props나 state가 변경될 때 마다 리렌더링이 발생한다.
  2. 부모 컴포넌트가 리렌더링될 때 : 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링된다.
  3. react.memo() 또는 shouldComponentUpdate() 메서드를 사용하여 최적화한 컴포넌트가 Props나 State가 변경될 때
     => React.memo()나 shouldComponentUpdate() 메서드를 사용하여 컴포넌트의 Props나 State가 변경되지 않으면 리렌더링을 방지할 수 있다.

상태관리

• React에서 상태는 state를 인데 이 state를 관리해주는 것을 말한다.
• React에서 이 state가 변동 되면 리렌더링이 되어 페이지에 변동이 일어나는데, 이 state는 오로지 자식컴포넌트에게만 전달 해줄 수 있다.
• 그래서 자식의 자식의 자식의 ... 컴포넌트로 state를 전달해주려면 하나하나의 컴포넌트를 모두 거쳐서 전달을 해줘야한다. 즉 props Drilling 이 일어난다.

이러한 문제를 해결 할 수 있는 것이 상태관리 라이브러리이다. state를 마치 전역 변수 처럼 만들어서 모든 컴포넌트에 상태를 전달해주지 않고도 바로 state에 접근이 가능하게 된다.
Redux를 사용하게 되면 store, Recoil을 사용하게 되면 useRecoilState가 될 것이다.

import { createStore } from 'redux'

/**
 * 이것이 (state, action) => state 형태의 순수 함수인 리듀서입니다.
 * 리듀서는 액션이 어떻게 상태를 다음 상태로 변경하는지 서술합니다.
 *
 * 상태의 모양은 당신 마음대로입니다: 기본형(primitive)일수도, 배열일수도, 객체일수도,
 * 심지어 Immutable.js 자료구조일수도 있습니다.  오직 중요한 점은 상태 객체를 변경해서는 안되며,
 * 상태가 바뀐다면 새로운 객체를 반환해야 한다는 것입니다.
 *
 * 이 예제에서 우리는 `switch` 구문과 문자열을 썼지만,
 * 여러분의 프로젝트에 맞게
 * (함수 맵 같은) 다른 컨벤션을 따르셔도 좋습니다.
 */
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

// 앱의 상태를 보관하는 Redux 저장소를 만듭니다.
// API로는 { subscribe, dispatch, getState }가 있습니다.
let store = createStore(counter)

// subscribe()를 이용해 상태 변화에 따라 UI가 변경되게 할 수 있습니다.
// 보통은 subscribe()를 직접 사용하기보다는 뷰 바인딩 라이브러리(예를 들어 React Redux)를 사용합니다.
// 하지만 현재 상태를 localStorage에 영속적으로 저장할 때도 편리합니다.

store.subscribe(() => console.log(store.getState())))

// 내부 상태를 변경하는 유일한 방법은 액션을 보내는 것뿐입니다.
// 액션은 직렬화할수도, 로깅할수도, 저장할수도 있으며 나중에 재실행할수도 있습니다.
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1

// 출처: https://ko.redux.js.org/introduction/getting-started/

하지만 redux는 규모가 큰 프로젝트에선 유용하게 쓰일 수 있지만, 규모가 작은 프로젝트에선 코드의 양이 너무 많이 때문에 오히려 비효율적일수도 있다고 한다.
나중에 어떤 것을 사용할 지는 회사가 원하는 기술스택을 쓸테지만 혹시 모르니 다양한 상태관리를 공부해 가야겠다.