props, Context API, constate, Redux, Recoil

jjyung·2022년 1월 9일

Props constate context contextAPI props drilling redux

글을 쓰게 된 계기

수업시간에 context API에 관해 배우면서 조금 더 명확하게 정리하고 싶었다.

그리고 Redux가 생각보다 현업에서 많이 사용되지않고, 다른 라이브러리가 더 흥할것이라는 글을 보며 그 이유에 대해서도 알고싶어 글을 적게 되었다.

props drilling

React에서 컴포넌트가 많아지면 상위 컴포넌트에서 하위 컴포넌트에게 props를 넘겨줄때 많은 컴포넌트들을 거치게된다. 만약 props 전달이 적다면 (5개정도라면) 전혀 문제가 되지 않는다. 이 때는 다른 context api, constate, redux등을 사용하는 것 보다는 바로 props를 전달하는것이 훨씬 효율적일것이다. 하지만 만약 props의 전달이 10개, 100개 등 많은 과정을 거치게 된다면 상당히 비효율적이고 유지보수도 어려워지게된다. 즉, 그냥 전달하는 용도로만 사용되는 컴포넌트들이 늘어나게 되는 것이다.
이런 과정을 바로 props drilling이라고 한다.

Context API

context API는 이런 props drilling의 문제를 해결했다. 위에서 아래로 props를 전달하지않아도 provider을 이용해 중간 엘리먼트들에게 props를 넘겨주지 않고 주고자 하는 하위 엘리먼트에게 바로 접근이 가능하다. 여러개의 provider도 생성이 가능하다.

하지만 이 context의 단점은 재사용이 불가능하다는 점이다. 또한, value가 바뀔 때 마다 매번 새로운 객체가 생성이 되는데 Provider가 렌더링될 때마다 그 하위에서 구독하고 있는 컴포넌트가 모두 다시 렌더링된다. 또한, 단 한개의 상태만 저장이 가능하다.

Constate = Context + State

Context의 성능 이슈를 해결하면서도 Context의 사용하기 편하다는 장점을 합친것이 Constate이다. Constate는 Context를 기반으로 작동하는 라이브러리로 하나는 상태, 하나는 상태 업데이트를 위한 context가 존재한다. 그러면 리덕스는 필요없는거 아닌가?라는 생각을 할 수 있다.

Redux

Context API의 문제점을 해결한 것이 Redux다. 이 리덕스는 React를 만든 팀에서 만들었다. 리덕스에서는 컴포넌트에서 특정 값을 의존하게 될 때 해당 값이 바뀔 때에만 리렌더링이 되도록 최적화되어 Context에 비해 불필요한 리렌더링이 발생하지 않는다. (물론 현재 개선된 Context API는 글로벌 상태관리를 쉽게 사용할 수 있게 해준다)
리덕스는 단순히 전역적인 상태관리가 아닌 미들웨어, 강력한 개발자 도구,액션 기반 앱 상태 업데이트 로직 작성등의 장점이 있다. 또한, 리덕스는 리액트뿐만 아니라 다른곳에서도 사용이 가능하다.

Redux는 store, state, reducer, action, subscription 등을 제공해 효육적으로 상태를 관리한다.

디스패치는 변경을 요청하는 메서드다.
액션에는 타입과 페이로드정보가 담기는데, 타입은 명령(~해라) + 페이로드(디테일) 정보가 디스패치에 담겨 리듀서(순수함수)에게 전달된다.
리듀서는 하나 이상의 리듀서와 결합이 가능하다 (리듀서는 여러개 존재할 수 있지만 스토어는 단 한개만 존재가능하다)
스토어는 상태 관리하는 곳으로써 리듀서에 의해서만 상태가 업데이트된다

Recoil

리덕스는 단방향의 흐름 상태로 예측이 쉽고, 디버깅할 수 있다는 등의 장점은 존재하지만 초기 세팅이 너무 번거롭고 코드량이 늘어난다는 단점이 존재했다. 이런 단점을 보완하고자 Redux Saga이후 redux-toolkit으로 코드는 줄었지만 여전히 리액트에 최적화되어있지 않다는 불만이 존재했다.

이 Recoil이 바로 React를 위한 상태 관리 라이브러리다. 이 리코일은 atom이라는 상태를 store없이 전역으로 관리한다. 또한, 구독과 옵저버같은 개념이 없고 hooks를 사용하듯이 사용하면 돼서 훨씬 리액트스럽다. 다만, 아직 정식으로 릴리즈되지 않았다.