React와 Redux 같이 쓰면 좋은 점

김민주·2022년 8월 24일
0

1. Redux란 무엇인가?

그냥 리액트만 가지고 개발하면 안 돼..?

React만으로 개발하면서 생겨난 불편함

React만으로도 충분히 개발 환경이 개선된 것 같은데, 리덕스는 왜 등장했을까?
React에서는 파일마다 또는 컴포넌트마다 state가 존재하는 위치가 다르다.
만약 필요로 하는 state값이 사용하는 컴포넌트보다 한참 위에 있을 경우에는 괄호 안에 props로 값을 넘겨주고..넘겨주고..넘겨주고..를 반복해야 할 때가 있다.

원칙적으로 state는 props drilling을 통해 부모 컴포넌트에서 자식 컴포넌트로만 전달이 가능한데, 상태 끌어올리기를 하면 반대로도 위치를 옮겨줄 수가 있다.
그러나 이를 여러번 반복하는 것은 복잡한 과정이고, state관리를 하는 것도 복잡하게 느껴질 때가 있다.
그리고 작업을 하다보면 리액트에서 비동기적으로 코드를 짰을 때 state가 의도한대로 안 나오는 경우도 많이 있다. 실제로 바닐라코딩 2주차 과제를 할 때 이 문제를 직면했었고, 한~참동안 고민을 했던 경험이 있다.

2. Redux가 props drilling을 해결한 방법

Redux에서는 상태값 관리를 하나의 객체에 다 한다. (이 하나의 객체를 store라 한다)
따라서 state 변경을 해줄 때는, 어떤 객체들의 키값을 타고 들어가서 수정해주기만 하면 된다(덮어쓰기).

이번 바닐라코딩 3주차 과제에서 리덕스를 사용했을 때, 리액트에서처럼 state가 바뀌었는지, 안 바뀌었는지 걱정을 해줄 필요가 없었다. 모든 state는 store에 있기 때문에. 반면 리액트에서는 state를 변경하면 부모 컴포넌트까지, 그리고 하위 컴포넌트들까지 다 리렌더링이 일어나 복잡하다.

3. 그럼 Redux를 매번 사용하면 더 좋은거 아니야?

위의 장점들 때문에 Redux를 사용하는 것이 무조건적으로 좋은 거 아니야? 라고 생각이 들 수 있다.
그러나, 작은 프로젝트의 경우 Redux를 사용하면 초기에 작성해야 할 코드가 많기 때문에 오히려 비효율적일 수 있다.
초기 러닝커브가 높고, 초기 셋팅을 위해 더 많은 코드를 작성해야 한다.

실제로 Redux를 만든 초창기 개발자들은 리덕스 사용을 최대한 미루다가, 리액트만으로 개발하는 것에 한계를 느낄 때, 리덕스를 사용하라고 한다. (하지만 대부분 개발자들은 처음부터 리덕스를 사용하지 않을까..?)

profile
성공은 퍼포먼스가 아니라 지속성이다. 언제 이루어지는지가 아니라, 어떤 모양으로 이루는지가 더 중요하다.

0개의 댓글

관련 채용 정보