useState를 줄이자

들어가며

연차가 올라가고, 경험이 생기면서 여러가지 고민에 빠지게 되었다. 바로 상태를 관리하는 방법이다. 처음에는 상태관리툴을 사용하지 않으면 굉장히 부정적으로 보았다. 언제나 기술은 사용해야 한다는 잘못된 마인드가 그런 생각을 가지게 한 것 같다.

하지만 점점 간결한 코드를 원하게 되면서 상태관리툴의 필요성을 의심하게 되었다. 그 의심은 점점 확신이 되었고, 이후 필요한 상황이 아닌 이상 상태관리툴을 사용하지 않게 되었다. 물론 라이브러리 자체의 상태는 사용을 하고 있다.

useState를 얼마나 사용하시나요?

useState가 없으면 React 개발은 불가능할 것이다. 그만큼 굉장히 중요한 것은 나도 안다. 하지만 이 기능을 많이 사용하게 된다면, 많은 리렌더링과 보기 힘들게 길어지는 컴포넌트들을 발견하게된다. 나는 이 두가지 모두 싫어한다.

useState를 줄이기 위해 다양한 방법들을 사용하고 있다. 컴포넌트의 구조를 단순하게 잡거나, HTML자체에서 지원하는 Attribute를 사용하는 등 다양한 방법을 고민하면서 사용한다. 그 중 URL 활용을 가장 즐긴다.

URL에 상태를 담는다.

상태에 변화를 주는 이유는 화면을 바꾸기 위한 것이다. URL은 그 기능을 완벽하게 수행한다.

const Component = () => {
	const [title, setTitle] = useStae('')
	
	// ...
	
	return (
		<div>
			<h1>{title}</h1>
		</div>
	)
}

일반적인 상태를 활용한 컴포넌트이다. title을 렌더링하기 위해 어떤 로직이 실행되어야 한다.

const Component = () => {
	const [serchParams, setSearchParams = useSearchParams()
	
	return (
		<div>
			<h1>{serchParams.get('title')}</h1>
		</div>
	)
}

정리하며

상태에 대한 질문을 많이 받았다. 어떤 상태관리툴을 사용해보았는지… 리렌더링을 방지하기 어떤 노력을 해보았는지… 언제나 상황에 따라 필요한 방법을 사용했다. 정답은 없다. 사용자의 환경을 개선하기 위해, 협업을 위한 깨끗한 코드를 위해 늘 방법은 바뀌었다.

하지만 특정 방법이 정답이라 우기는 사람들에게는 위 방법을 추천하고 싶다.