리액트에서 상태관리가 필요한 이유

jQuery 라면 selector로 Element를 찾아서 직접 DOM을 조작해야 한다.

하지만 리액트는 실제 DOM 변경 전에 내부적으로 가상 DOM이라는 개념이 사용되기 때문에 

직접적으로 DOM을 조작하지 않고 HTML과 비슷한 JSX 문법을 통해 View를 정의하되

특정 상태값에 따라 컴포넌트를 어떤식으로 렌더링할지 선언하는 방식이다.

 

이러한 상태와 컴포넌트는 옵저버 패턴처럼 연결되어 있어서

컴포넌트는 참조하는 상태값의 변화할때마다 자동으로 리렌더링 된다.

렌더링 과정에서 내부적으로 가상DOM 에 페이지 자체를 새로 만들고

실제 DOM 과 비교하여 변경된 부분만 적용한다.

 

리액트에서는 이를 위한 상태관리가 필요하다.

이러한 상태는 기본적으로 State 가 있는데 이는 컴포넌트 내부에서만 사용되는 상태로

타 컴포넌트와 공유하려면 props로 일일히 넘겨줘야 한다.

이에 어플리케이션에서 전역적으로 바라볼 수 있는 상태를 관리하기 위한 라이브러리로

Redux 와 Mobx가 있는데 Redux가 가장 대중적으로 사용된다.

 

물론 DOM을 직접 조작할 수도 있지만 

일반적으로 가상DOM을 이용하는 리액트의 렌더링 방식이 효율이 좋기 때문에 권장되진 않는다.

하지만 특정 Element에 포커스를 주는 경우처럼 반드시 직접적으로 DOM을 조작해야 하는 상황에서는 

리액트에서 제공하는 Hooks인 useRef 함수를 사용하면 된다.