토피넛라떼조아

함수형 컴포넌트는 클래스형 컴포넌트와 다르게 라이프 사이클 메서드가 없습니다. 그렇기 때문에 라이프 사이클 관리를 Hooks을 사용하여 하게 됩니다. 저번 포스팅을 통해 useEffect로 mount, unmount, update를 다루는 방법들을 배워봤는데, deps를 활용해 componentDidMount와 componentDidUpdate를 동시에 다루는 방법은 있지만 componentDidUpdate만을 다루는 방법은 소개하지 않았습니다. 2023.06.20 - [개발일기/Web] - [React] 리액트 클래스형 컴포넌트의 생명 주기 메서드(Life Cycle) [React] 리액트 클래스형 컴포넌트의 생명 주기 메서드(Life Cycle) 리액트 생명주기를 LifeCycle Method와 함께..

일반적으로 많이 사용하는 react hook에 대해 알아보겠습니다. Hook Hook은 React v.16.8부터 새로 추가되었습니다. 함수형 컴포넌트에서도 life cycle을 효과적으로 관리하며 기존의 방식보다 직관적인 API를 제공합니다. 또한, 상태 관리 로직을 추상화 할 수 있는 장점도 있습니다. render porps이나 HOC와 같은 패턴으로 재사용 로직을 구현했을 당시에는 컴포넌트의 재구성을 강제하고 코드의 추적이 어려웠습니다. (wrapper hell) Hook을 사용한다면 컴포넌트마다 로직을 추상화하여 독립적인 테스트와 재사용이 가능합니다. 또한 계층의 변화없이 로직을 재사용할 수 있습니다. 그렇기 때문에 로직 기반으로 컴포넌트를 나눌 수 있어 함수 단위로 관리 할 수 있는 이점이 있습..