Redux vs React context api 어떤 경우에 사용 할 까?

Redux는 리액트 에서 많이 사용되는 state 관리 라이브러리 이고  context api는 리액트에서 기본으로 제공하는 state 관리 api 이다. 대부분에 경우 state management 라이브러리인 redux를 사용하는데 왜 그런지 알아보도록 하자. 

 

먼저 Redux와 context api에 특징에 대해서 알아보자 

Redux 

컴포넌트에 state를 prop으로 넘겨 줄 때 어느 컴포넌트 깊이와  상관 없이 넘겨줄 수 있다. 

 

만약에 컴포넌트 구조가 아래와 같이 되어 있는데 

  
  //<Parent>
    <Child1>
      <Child2>
    	  <Child3></Child3>
      </Child2>
    </Child1>
  </Parent>
  
const child3Reducer = {
  candies: []
  iceCreams: []
}


const Child3 = () => {
  const iceCreams = useSelector(state => state.child3Reducer.iceCreams)
  return null

}

만약에 redux가 없다면 parent에서 state로 child3Data를 관리하고 Child1 Child2 Child3에게 prop으로 넘겨줘야 합니다. prop이 1-2개면 괜찮은데 prop이 많아지면 머리가 아파지고 또한 불필요한 rendering이 일어날 가능성이 크기 때문에 비효율 적일 수 있습니다. 하지만 코드에 보는 것 처럼 useSelector나 connect로 reducer에서 데이터를 바로 가져와서 사용할 수 있습니다.

 

연결된 state가 바뀌었을 때만 컴포넌트를 다시 랜더링 한다.

 위에 보이는것 처럼 child3Reducer에서 iceCreams state만 사용할 때 iceCreams가 바뀌었을 때만 다시 랜더링을 시킨다.

 

 

랜더링을 할지 안할지 코드를 통해서 컨트롤 할 수 있다.

함수형 컴포넌트를 사용할 때 memo로 컴포넌트를 감싸주면 불필요한 랜더링을 피할 수 있다. reselect 같은 라이브러리를 사용 할 수 도 있다.

 

---

Context api

• 리덕스와 비슷하게 필요한 컴포넌트에서 바로 useContext를 사용해서 사용할 수 있다.
• 코드를 통해서 랜더링을 할지 않할지 선택이 불가능 하다
• 더 많은 코드를 써야된다. 
• 완전히 간단한 앱에서만 사용하는 것을 추천한다. 

context api를 사용한 예제 입니다. 티스토리에서 랜더링 되는 것은 막는거 같으니 가서 보시기 바랍니다.

 

 

 

리덕스와 context api가 하는 일은 거의 비슷하지만 리덕스는 나중에 어플리케이션이 커졌을 때 관리하기가 더 쉬워지지만 초반에 셋업하는데 수고와 시간이 조금 더 들고 context는 초반에 아무런 셋업 없이 사용이 가능하지만 나중에 context가 엄청 많이 필요하게 된다면 관리하기가 많이 힘들어 질 것입니다.