[React] Redux와 context 차이점 알아보기1

🤔 리덕스로 전역 상태를 관리하다보니 이전 회사에서는 주로 ContextAPI를 사용했던 기억이 났다. 그러면서 둘의 차이점이 뭘까에 대한 고민이 생겼다.

서치해보니 주로 사용법에 대한 차이점이 기술되어 있었고 나는 그거 말고 개념적으로 무엇이 다른가에 대해 궁금해졌다. 그럼 Context는 뭐지?

일단 redux의 동작을 더 이해해보자

useState로 redux 구현해보기

useState로 리덕스를 구현해보면 리덕스의 동작 원리를 이해하는 데 도움이 될 거 같아서 시도해보기로 했다.

예제
Counter1, Counter2라는 각각의 컴포넌트에서 동일한 state를 이용하는 경우 이를 global state로 관리하는 예제

store 타입 생성

• get : store에서 관리중인 state의 최신 상태를 반환해줌
• set : store에서 관리중인 state의 상태 변화를 일으키는 함수로써 상태를 반환함 ≒ setState
• subscribe : store의 변경을 감지하고 싶은 컴포넌트들이 자신의 callback 함수를 등록하는 곳
• unsubscribe : subscribe 함수가 받아온 callback함수를 등록된 callbacks에서 제거

createStore, useStore 생성

• 사용할 store를 받아서 get으로 최신 상태를 받은 후 useState의 초기값으로 설정
• useStore의 useEffect 에서 선언한 callbackFn 함수는 setState로 state를 변화시키기 때문에 리렌더링을 일으킴(렌더 트리거)
• clean up이 일어날 때 unsubscribe (callbacks에서 callbackFn 삭제) 실행
  • 여기에서 약간 헷갈렸는데 clean up 함수는 함수가 일단 등록되고 clean up이 되는 시점에 실행된다. 그런데 useEffect return 함수에 함수가 아니라 함수를 실행시켜버리면(return unsubscribe()), clean up 시점이 오기도 전인 컴포넌트가 렌더링 되자마자 실행되어 버리기 때문에 useStore 함수가 제대로 동작하지 않게 된다 → subscribe 하자마자 unsubscribe 되기 때문에 비정상 동작
    

컴포넌트에서 store 사용하기

• Counter1, Counter2 라는 각각의 컴포넌트에서 동일한 store의 state 사용

이대로 진행하면 각 counter의 버튼을 누를때마다 store를 공유하며 업데이트 되는 것을 알 수 있다. 하지만 store가 원시값이 아니라 객체일 경우, 일부만 바뀌어도 useState가 실행되므로 store의 어떤 값이 바뀌든지 간에 리렌더링이 일어나게 된다.
⇒ 원하는 값이 바뀌었을때만 리렌더링 되도록 수정해보자

store에서 원하는 값이 바뀌었을때만 리렌더링하도록 하기

useStoreSelector 생성

• store에 등록된 상태 중 사용할 상태만 selector라는 콜백 함수로 반환받아서 value로 등록하여 사용

컴포넌트에서 사용해보기

• store에 등록된 상태는 이제 count, text 이렇게 두가지이다

• count를 사용할 컴포넌트에서는 selector 함수로 count만 뽑아서 사용하고, text를 사용할 컴포넌트에서는 selector 함수로 text만 뽑아서 사용한다

• 근데 이때 selector 함수를 useCallback으로 감싸준다

  • dependencies를 빈 배열로 줘서 최초 렌더시에만 등록할 수 있도록 해줬는데 이렇게 하지 않으면 상태의 변화에 따라 컴포넌트가 리렌더 됐을 때 selector 함수는 동일한데 계속해서 unsubscribe → subscribe가 계속 반복되기 때문이다
    
    

  • useCallback을 사용하고 싶지 않다면 컴포넌트 리렌더 시 해당 컴포넌트내에 등록된 함수가 재실행되는게 문제이기 때문에 컴포넌트 바깥에 함수를 생성하고 컴포넌트 안에서 해당 함수를 가져다 쓰는 것도 해결방법이 될 수 있다