[ 3주차 생각 과제 ] 3주차 생각 과제 제출

[Geun-Oh]

✨ 구현 기능 명세

생각 과제

💟 React에서 상태관리는 왜 필요한가?

• 상태(state) 란 세미나 때 공부한 것처럼 컴포넌트 내부에서 공유되는 지역 변수와도 같다. 일반적으로 선언된 변수와 다른 점이라면 데이터 바인딩이 적용되어 JSX 문법과 사용하기 좋다는 것이고, 동적인 데이터를 다루기 용이하다는 점이다.

• 상태를 사용하여 동적인 웹 페이지를 생성하는 과정에서 상태관리는 필수가 되었다. 리액트 프로젝트의 규모가 커지고 코드 추상화에 따른 파일과 폴더의 수가 증가할수록 컴포넌트 간의 데이터를 전달하고 특정 컴포넌트에서의 상태 변경을 이에 관여하는 모든 컴포넌트들에 전달하기 어려워지는 문제가 발생했다. 이러한 개별 컴포넌트 관계를 정확하게 파악하고 데이터를 전달해주기 어려운 상황에서 우리는 각 컴포넌트에서 사용하는 상태를 관리하고, 특히 컴포넌트 간에 공유되는 상태를 관리할 필요가 생긴 것이다.

• 이러한 상황에서 등장한 것이 '전역 상태 관리'라는 개념인데, 기존에 props drilling으로 해결하던 컴포넌트 간의 상태 전달 문제를 전역적으로 관리해야하는 상태를 따로 빼낸 store의 개념을 도입하며 해소하였다. 다수의 컴포넌트에 공유되는 상태를 전역 상태로 선언하여 관리에 용이하게 만든 것이다.

관리 해야 하는 상태에 대한 기준은 무엇인가?

• 상태관리가 필요한 상태의 경우 여러 컴포넌트에서 공유되는 값을 가지고 있다는 특징이 있다. 여러 컴포넌트에서 해당 값을 사용해야하므로, 이를 전역 상태 관리 store 단에서 선언해 값을 사용하고자 하는 모든 컴포넌트에 전달할 필요가 있다.

어떤 상태관리 라이브러리를 어떤 상황에서 사용해야 할까?

• 상태 관리 라이브러리는 Redux, Recoil, ContextAPI 등등이 존재하는데, 나는 우선 이 3가지를 비교해보고자 한다. 우선 ContextAPI 는 React 내장 기능으로 그 목적이 나머지 둘과 조금 다르다. 상태 관리를 위한 것은 맞지만 전역상태관리에 목적을 두는 것은 아니다. 오히려 Redux, Recoil이 전역상태관리를 위한 다양한 기능들을 많이 제공해주므로 전역 상태관리를 위해서라면 Redux, Recoil 등의 라이브러리를 사용하는 것이 좋다. ContextAPI는 그 외에 간단한 컴포넌트 묶음 내부에서 공유할 상태가 존재하는 경우 등 특수한 상황에서 가볍게 적용하는 것이 좋다고 생각했다.

• Redux와 Recoil을 비교하면, Redux는 오랫동안 유명했고 그만큼 사용자와 팬층이 두터워 현재 분명한 1위로 자리하고 있다. 또한 강력한 Devtools와 Flux 패턴 기반의 아키텍쳐는 Redux를 사용하는 개발자들의 개발자 경험을 충분히 끌어올려준다. 그러나 React 친화적이고 Redux보다 훨씬 간단한 구성 환경을 제공하여 진입장벽을 낮춘 Recoil의 경우 앞으로 사용자가 많이 늘어나고 적용하는 곳이 많아진다면 충분히 입지를 다질 수 있을 것이라고 생각한다. 그리고 Recoil 또한 Devtools가 발전 중에 있고, React를 만든 페이스북에서 React를 위한 상태관리 라이브러리라고 소개한 만큼 시간이 지나면 React 생태계 내에서 충분히 Redux와 견줄 만한 좋은 라이브러리가 될 수 있을 것이라고 생각한다.

• 따라서 정말 대규모 비즈니스 로직을 관리하는 곳에서는 Redux를 사용하고, 아직 대규모가 아니거나 프로젝트 단위의 개발이라면 충분히 Recoil을 사용해도 좋을 것 같다.

💟 React에서 렌더링을 효과적으로 관리하는 방법은 무엇이 있을까?

• React에서 렌더링은 사용자 경험을 좌지우지하는 결정적인 요소이다. 렌더링을 효과적으로 관리하기 위해서는 불필요한 리렌더링을 방지하는 것이 가장 중요하다. 불필요한 리렌더링이란 특정 state의 변경을 감지하고 리렌더링을 진행할 때, 해당 state의 변경에 영향을 받지 않는 요소까지 렌더링되는 것을 말한다. 이를 위해서는 useMemo 혹은 useCallback과 같은 메모이제이션을 위한 훅을 사용하면 좋다.

이를 위해 어떤 식으로 비즈니스 설계를 진행해야 할까

• state가 변경되는 로직을 캡슐화하여 관리하는 방법이 존재한다. 뷰와 로직을 분리하고 로직을 따로 관리함으로써 해당 state에 영향을 받는 것들을 확실하게 할 수 있다.

• 이를 위해 이전에 언급되었던 Custom Hooks를 최대한 활용하면 좋을 것 같다.

🥺 소요 시간, 어려웠던 점

• 1h
• 효과적인 렌더링을 위한 비즈니스 설계..생각보다 까다로운 주제인 것 같아요. 좀 더 공부해봐야겠어요!

[Yeonseo-Jo]

정리 깔끔하게 잘했당! 수고 많았오

[Yeonseo-Jo]

props drilling,, 진짜 까다롭더라 🥹

[Yeonseo-Jo]

오호 그렇구낭