context & redux

김태영·2022년 4월 9일
0

React

목록 보기
4/4

component tree 구조

이미지 출처

위의 이미지는 우리가 리액트로 웹을 만들 때 컴포넌트들의 트리구조를 나타내고 있는 이미지다.
이러한 트리구조를 가진 리액트에서 전역(지역) 데이터를 상위 컴포넌트에서 하위 컴포넌트로 전달해 주려면 prop를 통해서 위에서 아래로 계속해서 내려줘야 하는데 컴포넌트의 구조가 단순하고 적다면 크게 문제가 되지 않지만 이 구조가 복잡해지고 많아진다면 문제가 발생한다.

  1. prop이 여러 컴포넌트에서 사용되면서 의도치 않은 값이 될 수 있다.
  2. 컴포넌트의 뎁스가 깊어질수록 prop를 계속해서 사용해야 하기에 개발자는 에러가 생겼을 때 위치를 특정하기가 힘들어진다.
  3. prop이 변경될 경우 페이지는 리렌더링이 이루어지는데 아래의 컴포넌트에서 변화가 생기면 상위 컴포넌트도 불필요한 리렌더링이 이루어진다.

그렇기 때문에 이를 해결하기 위한것이 context로 app 컴포넌트에서 데이터를 가지고 있다면 필요한 곳에서만 해당 데이터를 가져다 사용할 수 있게 해주어서 위의 문제점들을 해결한다.




context와 redux

두 가지의 도구는 얼뜻 보면 동일한 기능을 하는 것 같지만 사용의 목적이 다르다.

context 특징

  • 다양한 컴포넌트에 전역적인 데이터를 전달하기 위해 사용하는 도구이며 "상태관리를 위한 도구는 아니다."
    상태관리란 시간이 지남에 따라 상태가 변경되는 방식을 말하며 리액트에서 상태를 관리하는 도구는 useState와 useReducer를 통해서 이루어진다.

  • 리액트의 내장 기능이다.

그렇다면 언제 사용하는가?

props drilling을 피할 때 즉 context.provider 내부에서 상태 변경이 거이 없을 때 하위 컴포넌트에 전달하는 용도로 쓰는데 사용하기 좋다.
props drilling은 props를 하위 컴포넌트로 전달하는 용도로"만" 쓰이는 컴포넌트들을 거치면서 react component트리의 한 컴포넌트에서 다른 곳으로 데이터를 전달하는 과정을 말한다.

장점

  • prop을 사용하여 데이터를 전달하지 않아도 되기에 코드가 짧아진다.

단점

  • context를 사용하려면 Provider를 사용해야 하는데 이를 분리할 수 없기에 재사용성이 떨어진다.



redux 특징

애플리케이션 전체의 상태 중앙 저장소 역할을 하며 애플리케이션의 상태를 예측 가능한 방식으로 업데이트 하기 위해서 사용하는 라이브러리다.

여러 위치에 많은 양의 상태 값이 존재 할 때

  • 업데이트 로직이 복잡 할 때
  • 거대한 코드 베이스를 여러 사람이 작업 할 때
  • 상태 변경 시각화가 필요 할 때
  • 사이드이펙트, 메모이제이션, 데이터 직렬화등 관리를 위해 더 강력한 기능이 필요 할 때

장점

  • 상태의 중앙화
    웹사이트의 상태를 한 곳에서 관리할 수 있기 때문에 store prop을 사용하지 않고 에러를 찾아내기 쉽다.
  • 단방향 모델링
    리덕스는 action은 dispatch를 거쳐서 데이터가 변경되고 store를 통해 전달받아 웹에 보여준다. 이 단방향 모델링으로 디버깅이 쉽다.
  • 읽기전용 취급
    리덕스의 상태는 읽기 전용으로 취급한다. 실제로 읽기 전용으로 만드는 것은 아니기에 주의할 필요가 있으나 이로인해 이전 상태로 돌아가기 위해서 이전 상태를 현재 상태에 덮어쓰기만 하면 된다.

단점

  • 익숙해 지기전에는 리덕스를 쓰기 위해서 reducer, store, dispatch, action 등 작성해야 하는 코드가 많고 복잡하기도 하다.
profile
즐거운 개발을 위해~

0개의 댓글