August 21, 2022

React 아키텍쳐에 대해서

yarn berry workspace 등 새로운 기술이 많이 나왔지만, Barebone 혹은 Row-level React에 관심이 많다.
특히, 동료들이 Barebone next.js를 경험해봤으면 하는 생각이다.
예로 들어, Workspace는 왜 나왔을까? Yarn은 어떤 문제를 해결할까?
처음 개발할 때, 내가 재밌어 했던 점도 끊임없이 변화하는 개발 생태계였다.
그래서, 내가 생각하는 Barebone next.js 프로젝트는,
npx create-next-app .
최근에 지원자들을 보면 컴공 전공자가 아니면서, 다양한 직군의 사람들이 개발자가 되기 위해 이력서를 넣는 것을 보고 있고, 근 1년 간 코딩 과제를 보면서 생각보다 같은 패턴이 계속 보여서 글을 쓰게 되었다.
가장 많이 보이는 패턴은 불필요한 useState 의 사용, 혹은 내가 useEffect 내에서 setState 를 하는 패턴이다. 예시 코드로 설명하는 게 좋은데,
Typescript
// 부모에서 매 초마다 currentTime을 갱신해서 <Timer /> 에 넘겨준다고 가정
function Timer({ currentTime }) {
	const [time, setTime] = useState(currentTime)
	
	useEffect(() => {
		setTime(time)
	}, [currentTime])

  return <div>{time}</div>
}
위의 코드는 말이 안되는 예시이긴 하지만, useEffect 내에 연산이 들어가기 시작하면 얼핏 봤을 때 어떤 부분이 문제인지 알기 어렵다.
Typescript
useEffect(() => {
	// currentTime을 가지고 복잡하게 연산한다고 가정
	const formattedTime = dayjs(currentTime).format('YYYY-MM-DD')
	setTime(formattedTime)
}, [currentTime])
의도한 동작을 문장으로 풀어보면 “현재 시간이 바뀔 때마다 2022-04-20 처럼 포맷을 다듬어서 화면에 노출하고 싶다” 으로 될 것이다.