Hook이란 무엇인가?
Hook은 React 버전 16.8부터 React에 추가된 요소로써 class를 사용한 class형 컴포넌트를 사용할 필요없이 함수형 컴포넌트만 사용해서 리액트의 기능들을 사용할 수 있게 해준다. 또한 렌더링을 따로 해줄 필요가 없어 코드를 상당히 줄일 수 있다.
그래서 HooKs에는 어떤 게 있는데?
훅 요소로는 대표적인 useState, useEffect를 알아보자면
useState는 자주 변경되는 동적인 값을 state를 관리를 할 수 있다.
일반 변수는 컴포넌트가 끝나게 되면 초기화가 되지만 state값으로 관리를 하면 자신이 원할 때 생성,변경,제거를 할 수 있어 훨씬 유독적인 컴포넌트 관리를 할 수 있다.
useEffect는 컴포넌트의 Life cycle(생명 주기)를 관리할 수 있게 만들어주고 렌더링 시, state 변경 시 등등 다양한 조건에서 특정 작업을 시작할 수 있게 만들어 준다.
useState useEffect는 어떻게 사용하나?
import React, { useState,useEffect } from 'react'우선 위와 같이 리액트에서 두 개의 모듈을 불러와서 사용한다.
주의사항!
1. 최상위에서만 Hook을 호출해야한다.
( 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다. )
2. 리액트 컴포넌트에서만 Hook을 호출해야하며 일반 JS에서 호출하면 안 된다.
useState의 경우는
const [count, setCount] = useState(0);
useState는 위와 같이 사용하며 count를 state 값으로 두고 setCount를 이용해서 state 값을 변경할 수 있다. 뒤에 useState(0)는 state의 초기값으로 첫 렌더링 시에는 count값이 0으로 시작하게 된다.
useEffect의 경우는
콜백 함수와, 콜백 함수가 작동되게 하는 종속적인 state를 인자로 사용할 수 있다.
useEffect(callBackFunc);
//렌더링 시마다 콜백 함수 작동
useEffect(callBackFunc, []);
//첫 렌더링에만 콜백 함수가 작동
useEffect(callBackFunc, [state1, state2]);
//state1,state2값이 변경될 때마다 작동
useEffect(()=>{ return(() => func()) });
//return()은 컴포넌트가 언마운트 될 때 특정 작업을 하게 만듦
