(React) useState 와 useEffect

useState

함수형 컴포넌트에서 상태를 관리하는데 사용. 상태값을 저장할 변수와 해당 변수를 업데이트할 함수와 함께 선언됨
상태가 변경되면, 리액트는 해당 컴포넌트를 다시 렌더링하여 UI를 업데이트

예시

import React, {useState} from 'react';

const UseStateEx = () => {

    const [text, setText] = useState('');   
    const [count, setCount] = useState(0);
	// [변수명, 변수를 관리할 함수명] = useState(초기값)


    const minusCount = () => {
        setCount(count - 1);
    }

    const plusCount = () => {
        setCount(count + 1);
    }

    return (
        <div>

            <div>
                <button onClick={minusCount}> - </button>  <p>현재 숫자 : {count}</p>  <button onClick={plusCount}> + </button>
            </div>
           
            <br/>
            <br/>
            <input type='text' value={text} placeholder='값을 입력하세요' onChange={(e) => setText(e.target.value)}></input>
            <h1>입력한 값 : {text}</h1>

        </div>
    );
};

export default UseStateEx;

결과

버튼을 누르거나 타이핑할 때 마다 setText, setCount 함수가 실행되어 UI 업데이트

UseEffect

리액트 함수형 컴포넌트에서 부수효과를 관리하는 데 사용.
(부수효과 : 컴포넌트가 렌더링될 때마다 발생하는 작업(예: 데이터 가져오기, DOM 조작, 타이머 설정))
특정 의존성 배열에 따라 useEffect가 실행, 컴포넌트가 언마운트되거나 의존성이 변경될 때 클린업 작업을 수행할 수도 있음.

예시

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

const TypingEffect = () => {
    const text = "백엔드 개발자를 꿈꾸는 김도연입니다.";
    const [displayedText, setDisplayedText] = useState("");
    const [isErasing, setIsErasing] = useState(false);
    const [index, setIndex] = useState(0);
  
    useEffect(() => {
      const timeoutId = setTimeout(() => {
        if (!isErasing && index < text.length) {
          // 타이핑 중인 경우
          setDisplayedText((prev) => prev + text.charAt(index));
          setIndex((prev) => prev + 1);
        } else if (isErasing && index > 0) {
          // 지우는 중인 경우
          setDisplayedText(text.substring(0, index - 1));
          setIndex((prev) => prev - 1);
        } else if (index === text.length) {
          // 모든 텍스트를 다 타이핑한 경우 1초 대기 후 지우기 시작
          setIsErasing(true);
          setTimeout(() => setIsErasing(true), 1000);
        } else if (index === 0) {
          // 모든 텍스트를 다 지운 경우 1초 대기 후 타이핑 시작
          setIsErasing(false);
          setTimeout(() => setIsErasing(false), 1000);
        }
      }, isErasing ? 100 : 100); // 지우기와 타이핑 속도 설정
  
      return () => clearTimeout(timeoutId);
    }, [index, isErasing]);
    // index, isErasing 의 상태가 변경될 때 마다 TypingEffect 실행
  
    return (
      <div id="intro_container">
        <h2 id="introduction" style={{ margin: 0 }}>
          {displayedText}
        </h2>
      </div>
    );
  };

export default TypingEffect;

결과

useEffect 가 실행되며 text로 선언한 문자열의 글자를 가져와 displayText 에 추가. 이후 인덱스를 변경하면 다시 useEffect 실행 -> text를 끝까지 출력하면 isErasing이 true 로 변경되면서 다시 useEffect 실행 반복