[React] React는 왜 사용할까?(+ Redux는 왜 사용할까?)

Frontend 3주차 과제를 진행하면서 React 및 Redux를 적극적으로 사용하려고 노력했다. 과제 수행을 위해 사용하는 것으로 출발했지만 해당 라이브러리들을 사용하는 이유에 대해 사용하며 느낀 점에 대해 정리를 필요성을 느껴 글을 작성한다.

 

먼저 React를 접했을때 이름에서도 알 수 있듯이 사용자와의 상호작용이 일어나는 순간 즉각 반응(react)한다는 의미로 이해되었다. 최근 우리가 사용하는 애플리케이션에서는 다양한 인터랙션 즉, 정보의 입력, 버튼의 클릭 등 다양한 상호작용이 일어난다. 부트캠프 이전에는 사용자의 입장에서 이러한 상호작용에 대해 생각해보지 않고 넘어갔다. 최근 개발자의 입장에서 개발을 진행하면서, React는 수도 없이 발생하는 상호작용을 어떻게 처리해야 하는지에 대한 고민을 해결하려는 개발자들의 많은 고민들의 집합이 아닐까 라는 생각이 들었다.

 

실제로 과제를 진행해나가면서 사용자와 상호작용하는 부분(사용자가 뭔가를 입력하면 그 데이터를 처리하는 방식)에서 무수히 많은 상태가 생성되고 변경되며 또 이를 적절하게 관리해야할 필요성을 절실히 느꼈다. React가 도입되기 이전 시기를 경험해보지 못해 이전에는 어떻게 처리했고 얼마나 많은 에너지와 시간이 소비되었는가를 알게 되면 조금 더 와닿지 않을까 생각해본다.

 

직접 사용하며 느낀 React의 장점을 적어보자면,

React 장점

• 컴포넌트 기반 → 컴포넌트 단위의 개발을 통한 컴포넌트의 재사용성 증가와 이에 따른 유연함 증가
• 단방향 데이터 바인딩 데이터의 흐름이 한쪽 방향으로 흐르기 때문에 디버깅시 오류를 추적하기 쉬움(관리의 용이)
• 가상 돔 사용(불필요한 리렌더를 줄일 수 있음)
• 대규모 어플리케이션에 적합(체감되지는 않았음)

추가하기 그러면 React의 단점은..?

 

 

Redux

Redux는 이러한 React를 좀 더 효율적으로(?) 사용하기 위한 라이브러리라고 생각한다. React를 사용하면서 정말 헷갈리고 복잡했던 문제들을 Redux를 통해 해결할 수 있었고(당연한 얘기..?) 훌륭한 도구라고 생각한다.

 

추가하기 React를 사용하면서 정말 헷갈리고 복잡했던 문제들은 무엇일까?

 

Redux를 사용하며 알게 된 점들

• 각 component에서 dispatch를 통해 action을 발생시킨다!
• redux는 하나의 새로운 action이 발생할 때마다 reducer함수를 실행시킨다(reducer 함수가 실행되는 것은 개발자의 책임이 아니다, 통제할 수 없음)
• Redux에서 상태(state)개념은 React에서 알고 있던 상태(state)의 개념과 구분하여 생각할 필요가 있다. 결론부터 말하자면 Redux는 전역에서 관리될 필요가 있는 상태를 위해 사용한다. 따라서 ‘내가 어디에서 해당 상태를 사용할 것인가?’에 대한 고민이 필요하며 지역적으로만 사용되는 state는 Redux를 사용하여 관리할 필요 없이 useState를 사용해 상태를 관리하면 된다. 꼭 Redux를 사용해야만 하는가? → Yes! 일 때만 사용한다.
• 작동원리: component에서 state의 값이 변동될 때 store에 저장되어있는 해당 state값을 update해야함 → 그러나 직접적으로 update 시키지 않고 action과 reducer함수를 통해 관리하게 된다 → component에서 dispatch를 통해 action을 발생시킨다 → action의 내용이 reducer를 통해 handling 되고 state 값이 새롭게 store에 저장된다 → 최신 state의 값을 subscribe를 통해 compoment에서 사용한다.