Hooks | Notion

<aside> 💡 useEffect, useState 등이 있으며, 클래스 컴포넌트에서만 허용되던 상태값 관리나 생명주기 함수들을 함수형 컴포넌트에서도 사용할 수 있게끔 리액트에서 제공하는 함수들이다.

</aside>

useState

export default function Example2() {
	// useState 첫 번째 방식 (특정성)
  **const [count, setCount] = React.useState(0)**
	// useState 두 번째 방식 (setState와 거의 동일)
****	**const [state, setState] = React.useState({count: 0, age: 30})**

  const click = () => {
    **setCount**(count + 1)
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={click}>Click me</button>
    </div>
  )
}

함수형 컴포넌트에서 useState()를 통해 setState의 기능을 사용할 수 있다.
useState를 구조 분해 할당하면 state 변수와 그 state 변수의 값을 변경시킬 수 있는 setState 함수로 분해된다.
useState 두 번째 방식에서 state에 접근하는 방법 : state.count 또는 state.age
useState 두 번째 방식에서 setState를 사용하는 방법 : setState({ count: state.count + 1})

useEffect

// 첫 번째 방식
React.useEffect(() => {
  console.log('렌더링 되고 나서 무조건 실행')
})

// 두 번째 방식
React.useEffect(() => {
  console.log('렌더링 되고 나서 최초 한번만 실행')
}, [])

// 세 번째 방식
React.useEffect(() => {
  console.log('렌더링 되고 나서 실행, 이후 count 값이 변할 때마다 실행')
}, [count])

// 네 번째 방식
React.useEffect(() => {
  console.log('렌더링 되고 나서 실행, 이후 count 값이 변할 때마다 실행')
	return () => {
		console.log('count 값이 변하기 직전에 실행')	
	}
}, [count])

라이프 사이클을 대체할 수 있는 함수
콜백 함수와 배열(state가 들어가는 곳)을 인자로 받는다.
두번째 인자에 배열이 삽입되어 있을 때, 그 배열 안의 state 값을 계속 감시하다가 그 값이 바뀌면 useEffect 함수를 호출한다.
어떤 방식이든 간에 최초 렌더링 후 무조건 한번 실행된다.
useEffect 함수의 return 뒤에는 cleanup 함수가 온다.
cleanup 함수는 useEffect의 첫 호출에는 실행되지 않고 두 번째 호출 이후부터 실행된다.
cleanup 함수

① 두 번째 인수가 빈 배열이 아닌 경우, 배열에 들어가 있는 state의 값이 변하기 직전에 실행된다.

② 두 번째 인수가 빈 배열인 경우, 컴포넌트가 unmount 되기 직전에 실행된다.

useState

useEffect

useReducer