[TIL] React Hook (useState, useEffect)

React에서 가장 핵심적인 useState와 useEffect에 대해서 정리해보려고 한다.

우선 React Hooks은 React 버전 16.8에서 새로 추가된 기능으로 Class를 안쓰고, 상태 값들과 여러 기능들을 사용할 수 있게 되었다.

Hook 이란? function component에서 React state와 lifecycle features을 연동(hook into)할 수 있게 해준다.
즉 Class없이 function으로 React 기능들을 사용하는 방법이다.

Why use?

• 클래스 기반 구성 요소와 같은 상태를 사용할 수 있고, 상태 관련 로직을 재사용할 수 있다.

• 코드가 상당히 단순화되고 가독성이 좋다.

• componentDidMount()와 componentDidUpdate()와 같은 것을 작성하는 것을 피할 수 있다. - Hook(useEffect) 통해 로직에 기반을 둔 함수로 해결

Hooks-rules

리액트 훅에서는 규칙이 있고, 규칙을 잘 지켜야 리액트가 각 훅의 상태를 기억하고 사용할 수 있다.

1) 최상위(at the top level)에서만 Hook을 호출해야 하고 반복문이나 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다.
(렌더링 간에 Hook을 건너뛰기 때문에 Hook 호출 순서는 달라지게 됩니다.)

EX)

import React, { useState } from "react"

function Hooks(props) {
	if (!props.isExist) {
		const [state, setState] = useState(); // Error!
	}
	const [state2, setState2] = useState(); // Error!
}

2) 오직 React 함수 내에서 Hook을 호출해야 한다.

일반적인 JavaScript 함수나 Hook을 호출하면 안된다. 대신 React 함수형 컴포넌트 안에서 호출하거나, 직접 만든 커스텀 Hook 안에서만 호출할 수 있다.

Using the State Hook (useState)

• useState Hook을 React에서 가져온다.

import React, { useState } from 'react';

• state 변수와 해당 state를 갱신할 수 있는 함수가 만들어지고 useState의 인자의 값으로 0을 주면 count 값을 0으로 초기화할 수 있습니다.

const [count, setCount] = useState(0);

• 사용자가 버튼 클릭을 하면 setConut 함수를 호출하여 state 변수를 갱신하고 해당 컴포넌트를 리렌더링합니다.

<button onClick={() => setCount(count + 1)}>

Using the Effect Hook (useEffect)

componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것이고, 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있다.

• 컴포넌트가 리렌더링 될 때마다 호출

useEffect(() => {
	console.log("componentDidUpdate")
})

• 마운트 될 때만 실행하고 싶을 때

useEffect(() => {
	console.log("componentDidMount")
}, [])

• 특정 값이(number) 업데이트 될 때만 실행하고 싶을 때

useEffect(() => {
    console.log("component did mount with useEffect!");
  }, [number]);

• 뒷정리 하기 (componentWillUnmount는 컴포넌트가 마운트 해제되어 제거되기 직전에 호출하고 싶을 때)

useEffect(() => {
	console.log("componentDidMount")
	return () => console.log("componentWillUnmount")
}, [])

출처)
https://ko.reactjs.org/docs/hooks-intro.html#gatsby-focus-wrapper/ https://velog.io/@velopert/react-hooks