[JS Tam9생활] #2 FE 상태관리

프론트엔드의 상태관리 

프론트엔드를 개발하면서 느끼는 마주하는 어려움 중 하나는 상태 state관리

FE의 상태는 웹 상의 다양한 요소들이 가지고 있는 값을 말하며 

이 값들은 사용자의 선택과 방향에 따라 변화한다.

 

 

이 상태를 어떻게 관리하고 제어하느냐에 따라 코드의 일관성이 결정되는데,

프론트엔드의 상태관리는 한 곳에서 하면 가장 좋다.

보통은 최상위 component 나  storage에 보관한다.

 

 

그렇다면 설계는 ?

보통 아래와 같이 component를 구성하여 부모가 state를 관리하며 상태 변화에 따라 자식 component는 rendering만 해주는 구조로 설계하는 것이 좋다.

 

부모 component : 상태를 가지고 있는 않음

자식 component : 상태를 가지고 있지 않음

 

 

ex ) TodoList 

예시로 TodoList를 만든다고 하면

TodoApp이라는 상위 component에서만 state를 관리하고

나머지 TodoList, TodoInput, TodoFilter는 이 상태를 받아 render하게끔만 동작하게 한다.

 

 

상위 component (TodoApp)

export default function TodoApp($app) {
  // localStorage.clear();
  
  //상태
  const this.state= { // }
  
  //부모와 자식 component 상태 변경 감지 및 전달
  this.setState = (nextState) => {
    this.state = nextState;
    todoList.setState(nextState);
    todoInput.setState(nextState);
    todoFilter.setState(nextState);
  };
  
  //상태 전달 받아 사용
  const todoInput = new TodoInput({
    $app,
    initialState: this.state,
  });

  const todoList = new TodoList({
    $app,
    initialState: this.state,
  });

하위 component (TodoList)

export default function TodoList({
  $app,
  initialState,
}) {
  this.state = initialState

  this.setState = (nextState) => {
    this.state = nextState;
    this.render();
  };

 

이렇게 설계하면 TodoApp에서만 상태 변화를 실행하고 

TodoList는 상태가 변화하면 setState를 통해 감지하여 재 렌더링 하게 된다.

 

이렇게 상태에 따라 재 렌더링 되는 원리는 React에서도 잘 사용되는데 

React에서도 상태관리의 까다로움을 해결하기 위해 Recoil, Redux, Context API 등 다양한 라이브러리와 프레임워크들이 사용되고 있다.

 

 

React 프로젝트를 하며 겪었던 React의 상태관리에 대한 글도 공부하여 정리해놓았다.

https://rrecoder.tistory.com/127?category=955706 

[React] ReactHooks & Context API 를 이용한 state 관리 ( VS Redux)