왜 React Hooks인가?

기존 React Component는 React.Component를 기본으로 상속받는 Class Component를 만들어 많이 사용해왔었다.

이러한 Class Component는 몇가지의 단점들이 존재하였다.

 

코드가 복잡하고 길다.

기본적으로 constructor에서 super에 props를 전달해주는 번거로움이 있다.

이와 함께 this와 binding에 대한 기본 javascript의 지식이 더 필요한 경우들이 있다.

또한, 장점이자 단점으로 상속받는 Component에 내포된 Life Cycle method가 다양하게 있어 다양하게 활용할 수 있으나, 이에 대한 이해가 필요하고 꽤나 무겁다고 느낄 수 있다.

상태관리 로직의 재사용이 힘들다.

state관련 처리 로직이 필요한 경우 여러 Life Cycle method에 중복해서 넣어야하는 등의 재사용에 대한 제약이 있다.

그러나 이러한 부분은 별도의 hook을 만들어 필요에 따라 넣어주어 해결해줄 수 있다.

 

이전까지는 이러한 단점들에도 불구하고 state관리와 Life Cycle method의 사용성 덕분에 복잡하고, 무겁지만 Class Component를 사용해왔다. 그러나 Hooks의 등장으로 인해 Function Componet로 전환이 되기 시작했다.

 

가장 크게 useEffect와 useState를 통해 Class Component의 이점들을 Function Component에서 누릴 수 있게되었다.

 

이후 useEffect와 useState를 바탕으로 React Hook과 관련된 내용들을 추가적으로 다뤄볼 계획이다.