[TIL 39] React | hooks

Hooks

공식문서에 따르면 Hooks는

함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)" 할 수 있게 해주는 함수

• hook은 class안에서는 동작하지 않는다.
• useState, useEffect, useRef 등의 내장 Hook을 제공한다.
• 컴포넌트 간 상태 관련 로직을 재사용하기 위해 custom Hook을 만들어서 사용할 수 있다.

Class vs Hooks

1. 클래스는 한번 생성되고 메모리상에 남는다. 함수형은 한번 생성되고 사라진다.
2. this가 없다.
3. state, setState가 한쌍
4. 콜백이 없다.

사용규칙

1. 최상위에서만 Hook을 호출해야한다.
2. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행할 수 없다.

import React, { useState } from "react"

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

-> react가 여러 훅들을 구분할 수 있는 유일한 정보는 훅이 사용된 순서 뿐이기 때문이다.

3. 함수 컴포넌트 내에서만 Hook을 호출해야한다.

useState

• class의 setState와 마찬가지로 비동기로 업데이트된다.
• useState 실행 시 state, setState 한 쌍이 부여됨

setState(newState + 1);
setState(prev => prev + 1);

useEffect

여러가지 라이프 사이클이 합쳐진 형태

• componentDidMount (의존성 배열 : [])

• shouldComponentUpdate (의존성 배열 내에 해당 사항 없을 경우)

• componentDidUpdate (의존성 배열 자체가 없거나, 해당 사항이 있을 경우)

• componentWillUnmount

• 의존성 배열 : useEffect 내부에서 해당 값의 변화만(!) 감지하도록 함

useEffect(() => {
	console.log(color)
}, [color]) //color의 상태값이 변할때마다 console.log 출력

-> 사실 useEffect는 CDM, CWM를 완전히 대체할 수 없다..! 둘의 동작을 생각하고 useEffect를 사용했다가 원하는 방향으로 동작하지 않는 useEffect를 보게 될 수도 있다. 이 부분은 어려워서 좀 더 공부 후에 더 블로깅해볼 예정이다 ✍️

class setState내의 두번째 인자는 어떻게 사용하지?🤔

class component

handleBtnColor = () => {
	this.setState({
		color: "red"
	}, () => console.log(this.state.color))
}

function component

const [color, setColor] = useState("blue")

const handleBtnColor = () => {
	setColor("red")
}

useEffect(() => {
	console.log(color)
}, [color]) //color의 상태값이 변할때마다 console.log 출력