[리액트] useState, useEffect Hook

useState() ⭐⭐⭐⭐⭐⭐

• state를 사용하기 위한 Hook

• useState() 사용법 ⭐⭐

const [변수명, set함수명] = useState(초기값);
// useState() 함수는 배열을 return함.
// return된 배열 : [state로 선언된 변수, 해당 state의 set함수]

• useState() 사용 예시

import React, {useState} from "react";

function Counter(props){
  // 변수 각각에 대해 set함수가 따로 존재!
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>총 {count}번 클릭했습니다.</p>
      <button onClick = {() => setCount(count+1)}>
        클릭
      </button>
    </div>
  );
}

export default Counter;

useEffect() ⭐⭐⭐⭐⭐⭐

• Side effect를 수행하기 위한 Hook

• 리액트에서의 Side effect → 효과, 영향

  • 서버에서 데이터를 받아오거나, 수동으로 DOM을 변경하는 등의 작업을 의미
  • 다른 컴포넌트에 영향을 미칠 수 있으며, 렌더링 중에는 작업이 완료될 수 없는 것
    → 랜더링이 끝난 이후에 실행되어야 되는 작업
    

• 리액트의 함수 컴포넌트에서 Side effect를 실행할 수 있게 해주는 Hook

• 클래스 컴포넌트에서 제공하는 생명주기 함수인 componentDidMount(), componentDidUpdate(), componentWillUnmount()와 동일한 기능을 하나로 통합하여 제공함

• useEffect() 사용법 ⭐⭐

useEffect(이펙트 함수, 의존성 배열);
// 의존성 배열이란 이 effect가 의존 중인 배열
// 의존성 배열 안의 변수가 하나라도 값이 변경되면 useEffect 함수가 실행됨.

// 기본적으로 이펙트 함수는 처음 컴포넌트가 렌더링된 이후, 
// 업데이트로 인한 재렌더링 이후에 실행

// Effect function이 mount, unmount시에 단 한번씩만 실행됨.
useEffect(이펙트 함수, []);
// 빈 배열을 넣으면 해당 이펙트 함수는 props나 state에 있는 어떤 값에도 의존하지 않음.

// 의존성 배열을 생략하면 컴포넌트가 업데이트될 때마다 호출됨.
useEffect(이펙트 함수);

• useEffect() 사용 예시

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

function Counter(props){
	const [count, setCount] = useState(0);
	
	// componentDidMount(), componentDidUpdate()와 비슷하게 작동함
	// 의존성 배열이 생략된 useEffect() 케이스
	useEffect(()=>{
		// 브라우저 API를 이용하여 document의 title을 업데이트
		document.title = `You clicked ${count} times`;
	});
	
	return (
		<div>
			<p>총 {count}번 클릭했습니다.</p>
			<button onClick = {() => setCount(count+1)}>
				클릭
			</button>
		</div>
	);
}

export default Counter;

• 하나의 컴포넌트 내에서 useState(), useEffect()를 각각 2개씩 사용한 예시

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

function UserStatusWithCounter(props){
	const [count, setCount] = useState(0);
	useEffect(()=>{	
		document.title = `You clicked ${count} times`;
	});
	
	const [isOnline, setInOnline] = useState(null);
	useEffect(() => {
		ServerAPI.subscribeUserStatus(props.user.id, handleStatusChange);
		
		// clean-up 함수 (== componentWillUnmount())
		// 컴포넌트의 update 직전, unmount 시점에 실행되는 함수
		return () => {
			ServerAPI.unsubscribeUserStatus(props.user.id, handleStatusChange);
		}
	});
	
	function handleStatusChange(Status){
		setIsOnline(status.isOnline);
	}
	
	//...

}	

• useEffect 간단 정리
  

인용 자료 출처
처음 만난 리액트