[3주차 생각과제]

[Chanwoo-Jeong]

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

이전 시간 자바스크립트를 통해 과제를 해보면서 우리는 수많은 상태를 일일이 업데이트 시켜줬다.

카드가 추가되었지만 바닐라 자바스크립트는 이를 알아채지 못하고 우린 카드섹션에 있는 모든 카드를 지운 후 업데이트된 카드더미를 다시 렌더링 시켜주는 함수를 실행해야한다.

(이처럼 불편할 수 있는가... 그렇다고 바닐라 자스가 나쁘다는 말은 아님^^)



이처럼 React 상태관리를 하지 않는다면 우리는 일일이 상태가 변함을 웹브라우저에게 알려줘야한다.

그러나 React 상태관리를 사용하면 이러한 번거로운 작업을 덜어준다.

useState로 선언한 상태는 Set함수를 통해 수정할 수 있으며 이러한 동적인 변화를 상태 스스로가 인지하고 상태가 변환된 가상 DOM만 스스로 리랜더링을 진행한다.



따라서 리액트에서 상태란 동적으로 변화하는 값이며 이 상태가 속한 컴포넌트의 리랜더링에 지대한 영향을 미친다.

또한 우리가 관리하는 상태가 다양한 컴포넌트에 사용된다면 우리는 prop drilling 이라는 번거로움에 마주하게 된다.(컴포넌트간 프롭 전달)

따라서 다양한 컴포넌트에 사용되는 상태는 전역상태관리를 이용하여 관리하는 것이 코드의 수고스러움을 덜어준다.(Recoil , Redux , ContextAPI)

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

동적인 값 , 즉 사용자와 상호작용하는 값들이 주로 상태로 관리되어야한다.

더불어 리액트에서는 props로 상태(state)를 전달해 줄 수 있으며 이는 컴포넌트간 의존성을 가지게 만든다.

즉 하나의 상태가 여러컴포넌트의 props로 전달되면 이는 다양한 컴포넌트 랜더링에 영향을 미치기 때문에 더욱 세심히 관리해 주어야 하는 상태값이다.

따라서 이러한 값들은 전역상태관리 툴을 사용하는 것이 조금 더 바람직하다.

- 어떤 상태관리 라이브러리를 어떤 상황에서 사용해야 할까? ( 장단점 또는 간단 비교 분석 )

마침 Redux Recoil ContextApi 와 관련된 아티클을 작성하였다.(웹심화 스터디 짱)

https://chanu38.tistory.com/52

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

앞서 언급했듯이 상태와 프롭으로 전달된 상태는 해당 컴포넌트의 리랜더링을 야기시킨다.

따라서 이러한 상태로 인해 굳이 리렌더링 되지 않아도 되는 부분까지 불필요한 리렌더링이 진행될 수 있다.

따라서 이번 과제에서도 사용했던 useMemo 나 useCallback을 통해서 기본적으로 유지되는 부분은 상태로 인한 리렌더링에 영향을 미치지 않도록 저장하는 것이 좋다.

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

다시한번 정리해자면 상태관리는 동적인 값을 인지하고 스스로 리렌더링을 진행하는 요소이다.

엄청 편리함과 동시에 불필요한 렌더링이 일어날 수 있다는 점을 확실히 인지하고 내가 상태관리를 사용하고자 하는 부분이 정말 상태관리가 필요한지,

그렇다면 useMemo나 useCallback을 통해 저장해둬도 되는 부분인지 등을 고려한 다음 사용한다면 조금더 좋은 상태관리를 할 수 있을 것 같다.