useEffect란? 리액트 기초

useEffect의 동작

1. 페이지가 처음 렌더링 되고 난 후 useEffect는 무조건!! 한번 실행됨

2. useEffect에 배열로 지정한 useState의 값이 변경되면 싫행되게 됨

useEffect는 렌더링, 혹은 변수의 값 혹은 오브젝트가 달라지게 되면, 그것을 인지하고 업데이트를 해주는 함수

useEffect는 콜백함수를 부르게 되며, 렌더링 혹은 값, 오브젝트의 변경에 따라 어떠한 함수 혹은 여러 개의 함수들을 동작시킬 수 있음.

useEffect(()=>{});
//oR
useEffect(()=>{},[]);
//oR
const [name, setName] = useState();
useEffect(()=>{},[name]);

첫번째 : useEffect의 가장 기본 형태지만, 이러한 형태를 거의 사용하지는 않음.
Dependency가 없기 때문에 렌더링할 때 한번 그리고 어떠한 작은 요소라도 변화한다면 시시때때로 useEffect가 발동되어 불필요한 실행이 너무 많아짐

두번째 : useEffect를 렌더링 후 단 한번만 실행하고 싶을 때 사용하는 방법
콜백 함수 뒤에 배열을 나타내는 대괄호가 붙어있습니다.
이곳에 Dependeny를 지정합니다.
하지만 아무 변수나 값 없이 대괄호만 있다면,
이 useEffect는 렌더링 후 단 한번만 실행되고 다시는 실행되지 않음

세번째 : useEffect를 렌더링 후 한번, 그리고 배열 안 변수의 값이 변할 때마다 실행하는 코드
이렇게 Dependency를 지정해주어 지정된 변수의 값이 변했을 때만, 실행되게함

useState와 useEffect 사용법

예시를 통해 useEffect가 어떻게 동작하는지확인

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

const Number = () =>{
	const [number, setNumber] = useState(0); //useState로 number 변수들 0 초기화
}
const [name, setName] = useState('Josh'); //Josh로 초기화

useEffect(()=>{
	console.log('hello');
})

const counter = () => setNumber(number + 1); //함수
const nameChanger = () => setName('Mike');	 //함수

return (
	<div>
		<button onClick={counter}>click</button>
		<button onClick={nameChanger}>changer Name</button>
  		<div>{number}</div>
		<div>{name}</div>
  	</div>
);	// JSX사이에 변수를 사용가능하며 중괄호를 이용

export default Number;

이러한 화면이 브라우저에서 실행되게 됨.
버튼을 누르면 아래의 숫자가 올라가거나 이름이 바뀌는 간단한 형태

렌더링이 끝난 후 hello라는 문자가 출력된 것을 알 수 있음
(Dependency가 있고 없고의 여부와 상관없이 렌더링이 끝나면 무조건 한 번은 useEffect가 실행됨)

click버튼을 눌러본다면 지금의 useEffect는 아래의 형태로 작성되있음
즉 Dependency와 상관없이, 어떠한 값이든 변하게 되면, useEffect는 실행됨

useEffect(()=>{}, [name]); 기본 Form

//전체 코드안에 있는 useEffect를 변경
useEffect(()=>{	//전체 코드 안의 useEffect Form
	console.log('hello');
}, [name]);

렌더링 후 무조건 한 번은 useEffect가 실행됨
=> 즉 렌더링 후 무조건 한 번은 hello가 출력됨

이번에 click 버튼을 눌러본다면 현재 Dependecy는 name이라는 변수로 지정되어 있음.
즉 이론상 숫자가 변하더라도 useEffect는 실행되지 않을 것입니다.
즉 숫자가 변해도 hello는 출력되지 않을 것입니다.

changeName 버튼을 눌러 이름을 바꾼다면

useEffect의 Dependency인 name 값이 Josh에서 Mike로 변경되어 useEffect가 실행됨.
그리고 콘솔창에 hello가 한번 더 입력됨

결과적으로 Dependency안에 변수(들)를 지정하게 된다면, 다른 값들과 상관없이 지정된 값(들)이 변해야지만, useEffect가 실행된다.
Dependency는 배열로 되어있기 때문에, 여러 변수를 Dependency로 사용될 수 있음