상태관리 Redux를 설명하기전에, 짚고 넘거가야할 부분

React란?

  • View 함수 개발에 도움을 주는 라이브러리
  1. 단방향 사고
  2. 특정 state, props에 따른 render 결과가 바뀌지 않습니다.
  3. JSX를 통해 어떻게 화면을 그릴지 정의
  4. 컴포넌트 간 합성가능

Redux란?

* context API 기능
* 고-오-급 상태관리
* 상태관리 라이브러리
!Keyword! : store, action, dispatch, subscribe, reducer
  • 의미 : 전역 state, 어떤 컴포넌트라도 store를 통해 접근가능하고, Container 컴포넌트(최상단)에 데이터를 집중화시켜 하위 컴포넌트에서 데이터를 접근하지 않더라도 state를 쉽게 전달할 수 있게 해줌
  • 수많은 state를 관리하기 위해! 하위 컴포너는에 쉽게 접근하기 위해!
  • 프로젝트 규모가 커지고 복잡해지면서 상태가 많아지고, 언제, , 어떻게 변화되었는지 알기 어렵고 쉽게 관리하고자 만들어짐.

1. state와 props의 차이

  • 둘 다 컴포넌트에 대한 정보를 갖는다.
  • 컴포넌트가 렌더링간에 정보를 추적해야 하는 경우 컴포넌트 자체에 state를 만들고 업데이트하고 사용함.
  • 상황에 따라 변경되어야 하는 값들은 state
  • 논리적으로 이치에 맞는 사고모델을 제공하기 위해 분리
  • state는 컴퓨넌트 내부에 존재하고, 상태값 변경이 가능하다.
  • props는 부모객체가 데이터를 자식객체에게 전달한다.이는 넘겨주는 데이터이기 때문에, 실제 사용하는 컴포넌트 내에서 props의 변경은 원칙적으로 금지되어 있다.

2. state기간에 따른 저장 위치

  • Short-term : 빠르게 변화하는 데이터

    • Local State를 사용하는 것이 유리하다.
      이유 :
  • Medium-term : 앱 실행동안 유지되는 데이터

    • Redux Store
    • 예를들어 전역으로 사용되는 유저 정보나 submit 양식 제출하여 사용자 프로필 정보 업데이트를 해야하는 경우
      이유 :
  • Long-term : 여러 페이지간 방문, 새로고침 동안 유지되어야 하는 경우

    • LocalStorage
      이유 :
    • 로그인을 한다고 해도 자동으로 로그인 상태가 유지되지 않는다.

    • 브라우저를 닫거나 새로고침할 시 상태값이 초기화되므로 로그인을 유지하는 로직이 필요하다.

    • HTML5에서 제공하는 localStorage를 사용한다.
      localStorage

    • key와 value로 저장함.

    • 문자열이 아닌 객체도 가능함.

    • 쿠키와 다르게 만료기간을 지정할 수 없으며, 서버로 전송되지 않음.

    • 자동로그인을 원하면 localStorage를 사용하고, 브라우저를 닫으면 로그인이 풀리는 것을 원하면 sessionStorage를 사용하면 됨.

    • 하지만 비밀번호같은 중요한 개인정보는 저장하지 않아야함! 클라이언트에 저장하는것이기 때문에 언제든지 털릴 수 있다!

    • Redux-React-Session 라이브러리

    --- 아직 확실히 구분짓기에 어려움이있다.
    --- localStorage에 저장했는데, refreshUser()는 왜 만들었지?
    => 브라우저간 스토리지 공유가 되지 않는다. 같은 컴퓨터에서 일지라도 브라우저들이 독자적으로 스토리지를 관리하기 때문에 항상 같은 내용을 보유하고 있어야 하는 경우 스토리지를 사용하는 것이 아니라 서버에서 관리하는 것이 좋다. React에서 UI를 그릴때 state가 초기화되면 로컬스토리지에 token정보가 있어도 UI는 초기화되므로 로컬스토리지에 token정보가 있다면, 현재 사용자 정보를 계속 저장할 수 있도록 해야한다.

3. React State와 Redux State의 차이

  • React State : 컴포넌트에 지역적으로 저장되는 값으로 다른 컴포넌트에 유동적인 값을 props 형태로 전달함.
  • Redux State : 어떤 컴포넌트라도 접근가능함. 하위컴포넌트에 전달하지 않더라도 state를 쉽게 전달 할 수 있음.

4. Redux를 사용해야하는 이유

결론

  • Redux는 앱 전역에 사용되고 복잡한 문제를 일으키는 상태는 Redux store를 사용하길 권장하고 있지만, 절대적인 방법은 아니다. 그러므로 모든 상태를 Redux store에 저장하거나, 반대로 Redux를 사용하지 않고 모든 상태를 Local state를 사용할 수 있다.

참고