[REACT] HOOK

HOOK이란

• 컴포넌트에는 클래스 컴포넌트와 함수 컴포넌트가 있다. 클래스 컴포넌트에는 state라는 랜더링에 필요한 데이터를 관리한다.
  함수 컴포넌트는 클래스 컴포넌트와는 다르게 코드도 굉장히 간결하지만, 별도로 state를 정의해서 사용하거나 컴포넌트의 생명주기에 맞춰 어떤 코드가 실행되도록 할 수 없다.
  따라서 함수 컴포넌트에 이런 기능을 지원하기 위해 나온 것이 HOOK
• HOOK을 사용하면 함수 컴포넌트도 클래스 컴포넌트의 기능을 모두 동일하게 구현 가능하다.
• HOOK은 갈고리라는 뜻으로 보통 프로그래밍에서는 원래 존재하는 어떤 기능에 마치 갈고리를 거는 것처럼 끼어 들어가 같이 수행되는 것을 의미 한다.
• HOOK의 이름은 모두 use로 시작한다.

 

HOOK의 종류

useState

• 가장 대표적이고 많이 사용되는 HOOK
• state를 사용하기 위한 훅
• 함수 컴포넌트에서는 기본적으로 state를 제공하지 않기 때문에 클래스 컴포넌트처럼 state를 사용하고 싶다면 useState() 훅을 사용 함

 

useEffect

• 사이드 이펙트를 수행하기 위한 훅
• 사이드 이펙트는 사전적으로 부작용이라는 뜻으로, 리액트에서 말하는 사이드 이펙트는 그냥 효과 혹은 영향을 뜻한다.
  예를 들면, 서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 등의 작업을 의미
• 이런 작업을 이펙트라고 부르는 이유는 이 작업들이 다른 컴포넌트에 영향을 미칠 수 있으며 랜더링 중에는 작업이 완료될 수 없기 때문에 렌더링이 끝난 이후에 실행되어야 하는 작업들
  useEffect는 클래스 컴포넌트에서 제공하는 생명주기 함수인 componentDidMount(), componentDidUpdate() 그리고 componentWillUnmount() 와 동일한 기능을 하나로 통합하여 제공한다. 그래서 useEffect() 훅만으로 생명 주기 함수와 동일한 기능이 수행 가능 하다.