[React] Hooks란?

Hooks는 무엇?

• Hooks는 React 16.8버전에 새로 추가된 기능이다
• 기존에 리액트에서 쓰던 클래스형 컴포넌트(Class component)의 단점들을 개선했다.
• React Hooks에서는 함수형 컴포넌트(Functional Component)를 사용한다.

기존에 사용하던 Class를 이용한 코드 작성 대신, Function에서 state와 여러 React 기능을 사용할 수 있도록 만든 라이브러리

기존 Class Component의 단점

1. 계층이 너무 많아진다.
2. Component가 너무 복잡해진다.
3. Class를 Component로 쓰면, bind, this를 사용하는데, 이는 컴퓨터의 많은 자원을 사용하며, 사람에게는 혼란을 야기한다.

Hooks의 등장

• Class 선언해서 사용하던 Component를 function을 사용해서 만들 수 있게 해주는 API이다.
• Hooks는 실질적으로 useState() , useEffect()만 사용한다.

---

리액트의 생명주기

Lifecycle은 어떤 애플리케이션이 실행되고 종료되는 과정을 의미한다.

리액트 16.8 업데이트 이전의 함수형 컴포넌트에서는 Mounting, Updating, Unmounting 에 대한 생명주기를 사용할 수 없엇지만,

16.8 Hooks 업데이트 이후로 생명주기를 사용할 수 있게되어, 데이터를 가져올 수 있고, 컴포넌트 시작하자마자 API도 호출하고 많은 부분을 할 수 있게 되었다.

---

Hooks를 사용한 코드

• 오른쪽 코드에서 코드가 간결해지고, 가독성이 좋아진 것을 느낄수 있다.

생명주기를 사용하는 코드

• 클래스 컴포넌트에서는 생명주기를 이용할때 componentDidMount, ComponentDidUpdate, componentWillUnmount 로 다르게 처리를 한다.
• 리액트 훅을 사용한 함수형 컴포넌트에서는 useEffect안에서 다 처리를 해 줄 수 있어서 코드가 간결해진다.

---

참고

https://ko.reactjs.org/docs/hooks-intro.html

https://www.inflearn.com/course/따라하는-리액트/unit/119853?tab=curriculum

https://ukcasso.tistory.com/86