useState란?

1) useState의 역할

• React(리액트)에서 "상태(state)"를 만들 때 사용하는 함수

"상태"란?

화면(UI)에 영향을 주는 값.

값이 바뀌면, 그걸 사용하는 부분의 화면이 자동으로 다시 그려준다.

2) 왜 필요한가?

• 일반 변수(let, var, const)는 값이 바뀌어도 화면이 자동으로 바뀌지 않는다.
• 예를 들어, 버튼을 눌러 숫자를 1씩 올리고 싶을 때, 그냥 변수만 쓰면 화면에 숫자가 안 바뀌기에 useState로 만든 값은 바뀌면 화면도 같이 바뀐다.

3) 사용법

import React, { useState } from "react";

  const [count, setCount] = useState(0);
  
  return (
  <div>
    <p>숫자: {count}</p>
    <button onClick={() => setCount(count + 1)}>+1</button>
  </div>
);

• 예시:js const [count, setCount] = useState(0);
  
• count : 현재 숫자 값 (처음엔 0)
• setCount : count 값을 바꿔주는 함수
• useState(0) : count의 초기값은 0

---

map() 함수란?

map()의 역할

배열에 있는 값들을 하나씩 꺼내서 "새로운 배열"로 바꿔주는 함수.

원본 배열은 그대로 있고, map을 거친 결과만 새 배열로 나옴.

1) map에서 idx란?

• map 함수의 두 번째 인자: index(순서번호)
• 예: messages.map((msg, idx) => ... )
• msg: 실제 메시지 내용
• idx: 0, 1, 2, ... (배열에서 몇 번째인지)

2) key={idx}는 왜 필요?

리액트는 여러 개의 같은 태그(div 등)를 반복해서 만들 때

각각을 구분할 수 있는 "key"라는 필수.

그래야 리액트가 화면을 효율적으로 업데이트할 수 있음

messages = ['안녕', '반가워']
messages.map((msg, idx) => (
  <div key={idx}>{msg}</div>
))
// 결과:
// <div key=0>안녕</div>
// <div key=1>반가워</div>

---

useEffect()란?

useEffect의 역할

• 리액트에서 "화면이 그려진 뒤" 또는 "특정 값이 바뀔 때"

어떤 코드를 실행하고 싶을 때 쓰는 함수

• 컴포넌트가 처음 나타날 때 한 번만 실행
• 어떤 값이 바뀔 때마다 실행

import React, { useEffect } from 'react';

useEffect(() => {
  // 여기에 코드를 쓰면, 화면이 그려진 뒤 실행됨
}, [의존성]);

useEffect(() => {
  console.log('count가 바뀔 때마다 실행!');
}, [count]);

• [의존성] : 이 배열 안에 있는 값이 바뀔 때마다 실행됨
• 만약 빈 배열([])이면, 컴포넌트가 처음 나타날 때 딱 한 번만 실행됨.

실제 DarkMode 구현

const [isDarkMode, setIsDarkMode] = useState(false);

 useEffect(()=>{
  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    setIsDarkMode(true)
  }else{
    setIsDarkMode(false)
  }
 },[])

 useEffect(()=>{
    if(isDarkMode){
      document.documentElement.classList.add('dark');
      localStorage.theme = 'dark';
    }else{
      document.documentElement.classList.remove('dark');
      localStorage.theme = '';
    }
 },[isDarkMode])

• map() : 배열을 반복해서 새로운 배열로 바꿔줌 (리액트에선 화면에 여러 개를 반복해서 보여줄 때 자주 씀 여러 프로젝트ui보여줄때..도구툴들)
• idx : map에서 각 아이템의 순서번호, key로 주면 리액트가 각 아이템을 구분할 수 있음
• useEffect() : 화면이 그려진 뒤, 또는 특정 값이 바뀔 때 실행되는 특별한 함수 .