useState & useEffect

구현하는 기능과 배우는 컨셉

✅ useState 사용
✅ UseEffect 사용

함수형은 왜 사용할까?

:: 공식 문서

• 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵습니다. (HOC, render props)
• 복잡한 컴포넌트들은 이해하기 어렵습니다. (관심사의 분리, Lifecycle API)
• Class은 사람과 기계를 혼동시킵니다.

Hook 사용규칙

• 규칙 1: 최상위(at the top level)에서만 Hook을 호출해야 합니다. 그리고 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.

import React, { useState } from "react"

function Hooks(props) {
	if (!props.isExist) {
		const [state, setState] = useState(); // Error!
	}
	const [state2, setState2] = useState(); // Error!
}
/ react가 여러 훅들을 구분할 수 있는 유일한 정보는 훅이 사용된 순서 뿐이기 때문.

• 규칙 2 : React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다.

useState

const [state, setState] = useState(initialState);

• 상태 유지 값과 그 값을 갱신하는 함수를 반환합니다.
• 최초로 렌더링을 하는 동안, 반환된 state(state)는 첫 번째 전달된 인자(initialState)의 값과 같습니다.
• setState 함수는 state를 갱신할 때 사용합니다. 새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록합니다.

setState(newState + 1); // setState와 동일하게 비동기 업데이트
setState(prev => prev + 1);

Effect Hook

Effect Hook, 즉 useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해줍니다. React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것입니다.

useEffect(function);

useEffect(() => {}, [count]) // 의존성 배열 (배열 안에 담긴 값들을 추적, 그때 마다 업데이트

명령형 또는 어떤 effect를 발생하는 함수를 인자로 받습니다.

(setState를 통해서만 state를 업데이트 해왔듯) 대신에 useEffect를 사용하세요. useEffect에 전달된 함수는 화면에 렌더링이 완료된 후에 수행되게 될 것입니다. React의 순수한 함수적인 세계에서 명령적인 세계로의 탈출구로 생각하세요.

기본적으로 동작은 모든 렌더링이 완료된 후에 수행됩니다만, 어떤 값이 변경되었을 때만 실행되게 할 수도 있습니다.

How to use useEffect!

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

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

useEffect(() => {
	console.log("componentDidMount")
	console.log("componentDidUpdate") // + shouldComponentUpdate
	return () => console.log("???")
}, [state])

// WRONG!!
useEffect(() => {
	console.log("CDM 쓰고 싶어요")
}, [])

useEffect(() => {
	console.log("CDU 쓰고 싶어요")
}, [state])