React - Basic Hooks

• useState
  • state를 대체
  • useState를 사용할 때 상태의 기본값을 파라미터로 넣어서 호출
  • 함수를 호출하면 배열이 반환
    • 첫번째 요소는 현재 상태, 두번째 요소는 Setter 함수

import React, { useState } from 'react';

export default function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

---

• useEffect
  • LifeCycle 대체
    • componentDidMount / componentDidUpdate / componentWillUnmount
      
      
  • useEffect 첫번째 매개변수
    • 렌더링 이후 호출되는 함수
      
      
  • useEffect 두번째 매개변수
    1. 미 선언 시, 렌더링 할 때마다 useEffect 첫번째 매개변수에 선언된 함수 호출
    2. 빈 배열 선언 시, 최초 한번만 useEffect 첫번째 매개변수에 선언된 함수 호출
    3. 배열 선언 및 useState에서 관리하는 변수 설정 시, 해당 state가 업데이트 될 때마다 useEffect 첫번째 매겨변수에 선언된 함수 호출
       
       
  • cleanup
    • useEffect 첫번째 매개변수 안에서 return 함수 선언
      1. 컴포넌트가 제거되기 전에 호출(componentWillUnmount)
      2. 컴포넌트가 state가 변경되어 컴포넌트가 업데이트 되기 전에 호출

import React, { useState, useEffect } from 'react';

export default function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('componentDidMount');

    return () => {
      // cleanup
      // componentWillUnmount
      console.log('componentWillUnmount');
    };
  }, []);

  useEffect(() => {
    console.log(`componentDidMount & componentDidUpdate by count ${count}`);

    return () => {
      // cleanup
      console.log(`cleanup by count ${count}`);
    };
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

 

[ 참고자료 ]

https://rinae.dev/posts/a-complete-guide-to-useeffect-ko

[번역] useEffect 완벽 가이드