[React] Hook 이란 ?

Hook 이란

 

함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다. 

 

Hook 을 이용해서 Class 를 작성할 필요없이 상태값과 여러 React 의 기능등을 사용할 수 있다

 

Hook 의 종류

 

• State Hook : 가장 기본적인 Hook . 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줌

 

react 공식홈페이지 참조

위에서 useState 가 바로 hook 이다.

useState 는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다.

위의 예제에서 현재의 state 값은 count , 이값을 업데이트하는 함수는 setCount 이다

 

• Effect Hook  : 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook

useEffect가 실행될 때

 

1. 이 컴포넌트가 처음으로 화면에 표시될 때

2. 주시 대상에 변화가 일어났을 때

 

 useEffect(() => {
    console.log('마운트 될 때만 실행됩니다.');
  }, []);

[ ] : 주시대상 -> 주시대상에 값을 넣어주면 이 값이 변할때 useEffect 가 실행된다.

useEffect 를 이용하면 React 는 DOM 을 바꾼 뒤에 effect 함수를 실행한다.