hooks
[React] useEffect의 철학과 Lifecycle
useEffect는 클래스 컴포넌트에서 Lifecycle 메서드를 통해 복잡하게 다뤘던 Side Effect 로직을 개선합니다. 컴포넌트의 마운트, 업데이트, 언마운트 등의 Lifecycle을 하나의 useEffect hook으로 처리하기 때문입니다. 이를 통해 함수형 컴포넌트에서도 쉽게 Side Effect를 다룰 수 있습니다. 하지만 useEffect의 철학은 단순히 Lifecycle을 대체하는 것이 전부가 아닙니다. "thinking in effects." useEffect의 철학은 Side Effect를 Lifecycle이 아닌, 관심사에 따라 관리할 수 있게 하는 것입니다. (Dan Abramov의 A Complete Guide to useEffect 내용이 많은 도움 되었습니다.) 등장 배경..
[React] useState의 동작 원리와 클로저
useState hook은 함수형 컴포넌트의 상태 관리 문제를 클로저를 통해 해결합니다. 이 글을 통해 간단한 useState hook을 단계별로 직접 구현해보겠습니다. 매 단계마다 어떠한 문제를 만나 어떻게 해결하는지의 과정을 이해해봅시다. (아래의 글들이 useState를 이해하는데 많은 도움이 되었습니다.) swyx의 Deep dive: How do React hooks really work? Rudi Yardley의 React hooks: not magic, just arrays 여울코딩님의 클로저와 useState Hooks 함수형 컴포넌트의 상태 관리 클래스형 컴포넌트는 render() 메서드를 통해 상태 변경을 감지할 수 있습니다. 반면 함수형 컴포넌트는 렌더링이 발생하면 함수 자체가 다시 ..