[React] [Hook] useState, useEffect

React Hook 이란?

React를 사용할 때, 좀 더 편리하게 상태나 기능을 다룰 수 있게 해주는 도구들

//사용에 앞서 js파일 내부 상단에 import한다.
import React, { useState, useEffect } from 'react';

useState (상태)

컴포넌트 내에서 상태를 다룰 때 사용된다. 상태는 어떤 정보나 데이터를 저장하는 공간이라고 생각하면 된다. 예를 들어, 게임에서 목숨이 몇 개 있는지를 저장하고 싶다면 useState를 사용해서 목숨 상태를 만들 수 있다. 혹은 버튼을 누를때마다 1씩 증가하는 카운터를 만들 수 있다.

🧐 예시 1)

import React, { useState } from 'react';

function MyComponent() {
  //lives 목숨의 현재 상태
  //setLives 목숨의 상태를 변경할 때 사용하는 함수
  									//초기값은 3
  const [lives, setLives] = useState(3);

  return (
    <div>
      <p>목숨: {lives}</p>
    </div>
  );
}

🧐 예시 2)

import React, { useState } from 'react';

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

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

useEffect (효과)

컴포넌트가 렌더링될 때마다 특정한 작업을 할 때 사용된다. 예를 들어, 게임에서 점수를 표시하고 싶다면 useEffect를 사용해서 특정 상황에만 점수를 업데이트할 수 있다. 혹은 렌더링될 때마다 콘솔에 메세지를 출력할 수 있다.

🧐 예시1)

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

function MyComponent() {
  const [score, setScore] = useState(0);

  useEffect(() => {
    //점수를 업데이트할 코드 작성
  }, [score]); // 여기에 넣은 값이 변할 때마다 useEffect가 실행

🧐 예시2)

import React, { useEffect } from 'react';

function MessageComponent() {
  useEffect(() => {
    console.log("컴포넌트가 렌더링되었습니다!");
  }, []); 

  return (
    <div>
      <p>안녕하세요! 이 컴포넌트는 콘솔에 메시지를 출력합니다.</p>
    </div>
  );
}