Hooks는 무엇?
- Hooks는 React 16.8버전에 새로 추가된 기능이다
- 기존에 리액트에서 쓰던
클래스형 컴포넌트(Class component)의 단점들을 개선했다. - React Hooks에서는
함수형 컴포넌트(Functional Component)를 사용한다.
기존에 사용하던 Class를 이용한 코드 작성 대신, Function에서 state와 여러 React 기능을 사용할 수 있도록 만든 라이브러리
기존 Class Component의 단점
- 계층이 너무 많아진다.
- Component가 너무 복잡해진다.
- 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
반응형