리액트 Hooks: useEffect

useEffect

- 컴포넌트가 화면에 첫 렌더링, 다시렌더링, 화면에서 사라질때 특정작업을 실행 시캘떄 사용됨.

기본구문

- useEffect는 괄호안에 두가지 인자를 가진다 첫번째 인자는 함수를 가지고 두번째 인자는 배열을가진다.

import react, { useEffect } from "react"


useEffect(()=>{작업내용}

인자로 콜백함수를 전달 받는다.

콜백함수:다른 함수의 인자로 전달된 함수

useEffect 형태1

- useEffect의 인자로 하나의 콜백함수만 전달받는 형태

useEffect(())=>{
  작업내용
});

useEffect 형태2

- useEffect의 첫번째인자로 콜백함수를 전달받고 두번째 인자로 배열을 전달받는경우

useEffect (())=>{
	작업내용
},[배열]);

전달된 배열을 dependensyarray라고 한다.

dependensyarray는 맨처음 화면에 렌더링될떄 실행

[value]안의 value값이 바뀔때 실행된다. 

예제) 렌더링이 완료될때마다 실행되는 예

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
    console.log("렌더링이 완료될때마다 실행")
  });

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

export default Example

예제) 최초렌더링시에만 실행되는 예시 document.ready와 비슷한 역할이다

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

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


  useEffect(() => {

    document.title = `You clicked ${count} times`;
    
  },[]);

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

export default Example

예제)특정 값이 변경될때만 실행되는 예시

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

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


  useEffect(() => {
 
    document.title = `You clicked ${count} times`;
  }.[count]);

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

export default Example

react hook에 대해 이해하기 이해하기 위해 반복적으로 react hook들을 포스팅하며 연습해야겠다.