리액트에서 컴포넌트 내부의 상태관리를 할 때 우리는 setState를 사용합니다. 하지만 막연하게 사용만 했을 뿐 "왜 사용할까?", "왜 직접 수정을 하면 안되지?" 에 대해서는 생각해 보지 않았습니다. 그래서 이번 포스트 에서는 setState가 뭔지 그리고 왜 쓰이게 되었는지에 대해 알아보겠습니다.
비동기 처리와 배치 업데이트
setState 함수는 상태 업데이트를 비동기적으로 처리합니다. 이는 여러 상태 업데이트가 동시에 발생할 때 React가 이를 효율적으로 처리할 수 있도록 합니다. 직접적인 상태 수정은 이러한 비동기 처리를 방해하고 예상치 못한 결과를 초래할 수 있습니다. 예를 들어, 사용자가 카운터를 증가시키는 버튼을 마구마구 클릭했을 경우 리액트는 이것을 한번에 모아서 처리합니다.
리렌더링 트리거와 생명주기 이슈
setState를 통한 상태 업데이트는 React에게 해당 컴포넌트를 리렌더링하라는 신호를 줍니다. 이를 통해 React는 가상 DOM을 활용하여 효율적인 업데이트를 수행합니다. 또한 setState를 사용하면 컴포넌트 생명주기 메서드들이 예상대로 호출되어 예상치 못한 동작을 방지할 수 있습니다.
함수형 업데이트의 활용
setState는 이전 상태를 받아와서 새로운 상태를 리턴하는 함수를 인자로 받을 수 있습니다. 이를 활용하면 이전 상태에 기반하여 상태를 업데이트할 수 있습니다.
// 함수형 업데이트의 예시
setCount((prevCount) => prevCount + 1);실습
버튼을 클릭하면 카운트가 올라가고 이를 직접 변경 했을 때 어떤 일이 발생하는지 직접 실습해 보세요
결론
setState 함수를 사용하여 상태를 업데이트하는 것은 리액트 애플리케이션에서 안전하고 예측 가능한 상태 관리를 위한 핵심입니다. 상태를 직접 수정하면 비동기 처리와 생명주기 이슈 등 다양한 문제에 직면할 수 있습니다. setState를 통한 상태 관리를 통해 더욱 안정적이고 효율적인 리액트 개발을 진행할 수 있습니다.
