왜 리액트에선 useState를 사용해야 하는가?
블로그를 쓰면서 한번 useState에 대해 다룬적이 있었는데요,
오늘은 좀 더 나아가 왜 리액트에서 useState를 써야하는지 알아보도록 하겠습니다.
리액트(React)에 대해 한번 더 알아보기
▶ 리액트(React)는 현대 웹 개발에서 널리 사용되는 라이브러리로,
사용자 인터페이스를 구축하는 데 중점을 두고 있으며, 컴포넌트의 상태(state)와 이를 관리하는 방법을 말합니다.
리액트에서는 보통 상태를 직접 수정하지 않고 useState와 같은 훅(hook)을 사용하는 경우가 많은데 이유는 리액트의 설계 철학과 성능 최적화, 코드의 일관성 등을 지키기 유용하기 때문입니다.
아래에서 좀 더 자세히 알아보겠습니다.
1. 리액트의 상태 관리 철학
▶ 리액트의 철학은 “단방향 데이터 흐름”과 “불변성”에 기반을 둡니다.
여기서 단방향 데이터 흐름은 데이터가 상위 컴포넌트에서 하위 컴포넌트로만 흐르는 것을 의미하며, 이는 예측 가능하고 디버깅하기 쉬운 애플리케이션을 만들기에 유용합니다.
또한, 불변성은 상태가 변경될 때마다 새로운 상태 객체를 생성하는 것을 의미하며, 이는 이전 상태와 새 상태 간의 비교를 쉽게 만들어 줍니다.
2. 렌더링 최적화
▶ 리액트는 상태가 변경될 때마다 컴포넌트를 재렌더링하는데 만약 여기서 상태를 직접 수정하면 리액트는 상태가 변경되었는지 알지 못합니다.
반면에 useState 훅을 사용하면 리액트는 상태가 변경되었음을 감지하고 필요한 부분만 효율적으로 업데이트할 수 있어 성능 최적화에 유용합니다. 예시를 한번 볼까요?
상태를 직접 수정할 경우
1
2
3
4
5
6
7
8
function MyComponent() {
let [count, setCount] = useState(0);
// 직접 상태 변경 - 안티 패턴
count = count + 1;
return <div>{count}</div>;
}
- 이 경우 리액트는 상태가 변경되었음을 인지하지 못하고, 컴포넌트는 다시 렌더링되지 않습니다.
useState를 사용할 경우
1
2
3
4
5
6
7
8
function MyComponent() {
let [count, setCount] = useState(0);
// 상태 변경 - 권장되는 패턴
setCount(count + 1);
return <div>{count}</div>;
}
- useState를 사용하면 리액트가 상태 변경을 감지하고 컴포넌트를 다시 렌더링하여 UI를 업데이트합니다.
3. 코드의 일관성
▶ 리액트는 컴포넌트 기반의 구조를 가지고 있어 각 컴포넌트는 자신의 상태를 독립적으로 관리합니다.
여기서 useState를 사용하면 상태 관리 방식이 일관성을 가지게 되는데 이는 팀 단위로 작업할 때 특히 중요하며, 모든 개발자가 동일한 패턴으로 상태를 관리할 수 있기 때문에 코드의 가독성과 유지보수성이 크게 향상시킬 수 있습니다.
4. 버그 방지
▶ 상태를 직접 수정하면 예기치 않은 버그가 발생할 수 있는데, 특히 복잡한 애플리케이션에서는 상태의 변경이 여러 곳에서 이루어질 경우 상태의 일관성을 유지하기 어려워집니다.
이 때, useState와 같은 훅을 사용하면 상태 변경이 함수 호출을 통해 이루어지므로 상태 변경 로직을 중앙에서 관리할 수 있어 버그 발생 가능성을 줄일 수 있습니다.
5. 리액트 개발 도구와의 통합
▶ 리액트 개발 도구(React Developer Tools)는 상태와 상태 변경을 추적하여 디버깅을 돕는데,
useState를 사용하면 이러한 도구들이 상태 변경을 쉽게 추적할 수 있어 디버깅 과정이 훨씬 간편해집니다.
6. 결론
▶ 리액트에서 useState를 사용하여 상태를 관리하는 것은 리액트의 설계 철학에 부합하고, 성능 최적화, 코드 일관성 유지, 버그 방지, 그리고 개발 도구와의 통합 등 여러 측면에서 많은 이점을 제공하기 때문입니다.
즉, 상태를 직접 수정하지 않고 useState와 같은 훅을 사용하는 것은 리액트 애플리케이션을 안정적이고 유지보수하기 쉽게 만드는 중요한 원칙 중 하나라고 할 수 있습니다.
이렇게 오늘은 리액트에선 useState를 사용해야 하는가에 대해 알아봤는데요,
면접에서도 충분히 나올 수 있는 질문이기 때문에 미리 공부해두면 좋을 것 같네요!
그렇다면 저는 다음에 또다른 면접에 대비한 내용을 들고오도록 하겠습니다 😁!