React Hooks가 도입된 이유를 간단하게 알아보자

date

Apr 2, 2022

slug

status

Published

함수형 컴포넌트로 클래스형 컴포넌트를 대체하기 위한 목적으로 도입되었다고 볼 수 있어요

여기서 아주 조금만 더 자세히 말해볼게요

왜 함수형 컴포넌트가 나왔을까?

일단 함수형 컴포넌트는 특징상 props와 state가 바뀌면 다시 렌더링이 되는 1개의 규칙만을 가지고 있어 클래스형 컴포넌트에 비해 비교적 단순한 구조를 가지고 있어요 또한 클래스형 컴포넌트가 가진 라이프사이클 메소드는 함수형 컴포넌트에 비해 러닝커브를 높인다는 단점두 있고요

그럼 hooks는 왜 도입된건데?

그래서 함수형 컴포넌트는 유지보수 측면에서 좀 더 원할하게 코드를 관리할 수 있다는 장점을 가지고 있는데 클래스형 컴포넌트가 가지고 있는 라이프 사이클 메소드를 대체하고 state값을 관리하기 위해서 hooks가 도입되었다고 볼 수 있죠

추가적으로 hooks에 대한 제 생각을 말한다면 상태관리나 데이터 흐름을 제어하는데 있어서 hooks는 좀 더 클래스형 컴포넌트의 라이프사이클 메소드보다 좀 더 자율성과 명확성이 확보된다고 생각합니다 예를 들어 저같은 경우는 컴포넌트에서 비즈니스 로직을 custom hooks로 분리하는 편인데 이로써 유지보수를 하는데 파일을 분리해서 볼 수 있으니까 상태관리를 좀 더 원할하게 파악을 할 수 있어 편리한거 같아요 이외에 useEffect 같은경우도 어떤 상태값에 의해 리렌더링이 되느냐에 따라 useEffect를 활용할 수 있다는 측면에서도 클래스형 컴포넌트에 비해 상태값을 자유롭게 구현할 수 있는 부분이 늘어난거 같아요 (몰론 클래스형 컴포넌트도 조건문으로 구분지어서 활용은 가능합니다)

참고자료 https://blog.rhostem.com/posts/2019-08-18-reason-whey-react-hooks-opt-in https://reactjs.org/docs/hooks-intro.html#motivation