[React] 상태 관리

상태(state): UI에 동적으로 표현될 데이터

Side Effect: 함수(컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인

- Side Effect를 최대한 배제하고 컴포넌트를 만들어야 함

(API요청 없이도 컴포넌트가 작동하도록 로딩 화면 구현 = presentation표현 컴포넌트)

 

상태를 구분하는데 절대적인 기준이나 법칙이 있는 것은 아님

로컬 상태

: 특정 컴포넌트 안에서만 관리되는 상태

ex) 다른 컴포넌트와 데이터를 공유하지 않는 form폼 데이터(input box, select box 등)

전역 상태

: 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태

ex) 테마(다크모드), 국제화(Globalization, 사용자 언어), 포토샵/일러스트의 히스토리 기능과 Undo/Redo

 

서로 다른 컴포넌트가 사용하는 상태가 다르면 출처(source)가 달라도 되지만

서로 다른 컴포넌트가 사용하는 상태가 같다면 출처가 하나여야 함(전역)

-> 사본이 있는 경우 동기화(sync) 과정이 번거롭고, 동기화가 안된 경우 문제를 일으킬 수 있음

 

데이터 무결성

"의도한대로 예외 상황 없이 데이터를 보여주기 위해"

데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어

안정성을 저해하는 요소를 막고 데이터의 상태를 항상 옳게 유지하는 것

 

무결성을 위한 방법론

Single source of truth(신뢰할 수 있는 단일 출처)

동일한 데이터는 항상 같은 곳에서 가지고 온다

 

상태 관리를 위한 툴

- React Context

- Redux

- MobX

 

상태 관리 툴이 제공하는 기능

- 전역 상태 저장소 제공

- Props drilling(프로퍼티 내려꽂기) 이슈 해결

=> 상태의 출처를 파악하기 쉬워지기 때문에 코드의 유지보수가 쉬워짐

 

Props drilling(프로퍼티 내려꽂기)

 

A의 상태를 H가 이용하고자할 때 C와 G는 상태를 이용하지 않음에도 props를 받아 H로 전달해주어야 함

(C, G: 불필요하게 관여된 컴포넌트)

전달 횟수가 5회 이내면 문제가 되지 않으나

규모가 커지고 구조가 복잡해지며 props의 전달 과정이 늘어난다면

- 코드 가독성이 나빠지고

- 코드 유지보수가 어려어지며

- state 변경시 props 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생하여 웹성능에 악영향을 줄 수 있음

 

=> state를 사용하는 컴포넌트와 최대한 가깝게 배치하거나, 상태 관리 라이브러리 사용

 

상태 관리 툴이 반드시 필요한 것은 아님

Redux 개발자 Dan Abramov "You might not need Redux"

 

 

Redux(출처)

1. 상태 파일 따로 작성(상태, 상태변경type)

// reducer.js
export const reducer = (initialState = 1, action) => {
  let newState = initialState;
  switch (action.type) {
    case 'Plus':
      return newState + 1;
    case 'Minus':
      return newState - 1;
    default:
      return initialState;
  }
};

 

2. 최상위 컴포넌트

Provider, createStore 임포트

최상위를 Provider로 감싸주고 전역 상태(store) 내려주기

// index.js
import { legacy_createStore as createStore } from 'redux';
import { Provider } from 'react-redux';
import { reducer } from './reducer.js';

const store = createStore(reducer);

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

 

3. 사용할 컴포넌트(파일)에서 상태 받아서 사용

// App.js
import { useSelector, useDispatch } from 'react-redux';
// useSelector가 상태
// useDispatch가 상태변경함수 역할

// 생략
const number = useSelector((state) => state);

// 생략
const dispatch = useDispatch();
const plusNum = () => {
    dispatch({ type: 'Plus' });
  };
return (
  <Container>
    <Button onClick={plusNum}>👍</Button>
  </Container>
  )

 

 

 

 

2022.12.27

코스 S3U4 react 상태 진행중