프론트엔드 면접 준비 : 왜 state를 직접 바꾸지 않고 useState를 사용해야 하나요?

state란?

• state는 React Component의 변경 가능한 데이터, 간단하게 말해서 변수이다. 하지만 const, let 등으로 선언한 변수와 다르게 값이 변하면 관련 있는 컴포넌트들이 재렌더링되어 화면이 바뀐다.
• state는 컴포넌트의 내부에서 변경 가능한 데이터를 다루기 위해 사용하는 객체이다.

왜 state를 직접 바꾸지 않고 useState를 사용해야 하나?

주요 이유는 React의 상태 관리 방식과 성능 최적화와 관련이 있습니다.

 

 

1. 상태 변경 감지:

React는 useState를 통해 상태가 변경될 때마다 컴포넌트를 다시 렌더링합니다. 상태를 직접 변경하면 React는 상태가 변경된 것을 알 수 없기 때문에 컴포넌트가 업데이트되지 않습니다.

반면에, useState를 사용하면 상태가 변경될 때 React가 이를 감지하고 컴포넌트를 다시 렌더링합니다.

 

2. 불변성 유지:

React는 상태가 불변(immutable) 데이터 구조라고 가정하고 동작합니다. 상태를 직접 변경하면 불변성이 깨질 수 있습니다. useState를 사용하면 새로운 상태를 설정할 때 기존 상태를 복사하여 새로운 상태 객체를 만들어 불변성을 유지할 수 있습니다.

 

3. 성능 최적화:

React는 여러 가지 성능 최적화를 제공합니다. 예를 들어, 상태 변경이 필요하지 않은 부분은 다시 렌더링하지 않습니다. useState를 사용하면 이러한 최적화를 효과적으로 활용할 수 있습니다. 상태를 직접 변경하면 React의 최적화 기능이 제대로 작동하지 않을 수 있습니다.

 

4. 디버깅 용이성:

React의 상태 관리 시스템을 통해 상태 변경을 추적하고 디버깅하기가 더 쉽습니다. useState를 사용하면 상태 변경이 명시적으로 이루어지기 때문에 디버깅이 용이합니다. 상태를 직접 변경하면 상태 변경이 어디서 일어나는지 추적하기 어려워집니다.

 

5. 리액트 훅과의 호환성: useState는 React 훅의 일부로, 다른 훅(useEffect, useContext, 등)과 잘 어울려 작동합니다. 훅을 사용하여 상태와 사이드 이펙트를 관리하면 코드의 가독성과 유지보수성이 향상됩니다.

 

 

(참고)
useState를 사용하면 상태 변경을 감지할 수 있는 이유는 useState가 상태 관리를 위해 특별히 설계된 함수이기 때문입니다.
이 함수는 다음과 같은 방식으로 작동합니다:

 

1. 상태와 상태 설정 함수 제공: useState는 두 개의 값을 반환합니다. 첫 번째 값은 현재 상태이고, 두 번째 값은 상태를 업데이트할 수 있는 함수입니다. 이 함수는 상태 변경 요청을 React에 전달합니다.

const [state, setState] = useState(initialState);

 

2. 상태 변경 요청 처리: setState 함수를 호출하면 React는 이 함수를 통해 전달된 새로운 상태를 확인하고, 내부적으로 상태를 업데이트합니다. 이 과정에서 React는 이전 상태와 새로운 상태를 비교하여 실제로 상태가 변경되었는지를 확인합니다.

 

3. 컴포넌트 재렌더링 트리거: 상태가 변경되었다고 판단되면 React는 해당 컴포넌트를 다시 렌더링합니다. 이때 React는 상태 변화에 따라 UI를 업데이트합니다. 이 과정은 React의 "Virtual DOM"을 통해 효율적으로 이루어지며, 변경된 부분만 실제 DOM에 반영됩니다.

 

4. 리액티브 시스템: useState와 같은 훅을 사용하면 React는 상태 변경이 발생할 때마다 이를 감지하여 적절히 반응(reaction)합니다. 이는 React가 "리액티브 시스템"으로 작동하는 것을 의미하며, 상태가 변경될 때 자동으로 UI가 업데이트됩니다.