[데브코스] React 기초 핵심 정리(state, 구조 분해 할당, 컴포넌트 반복)

React는 상태 기반 UI 라이브러리라고 부를 수 있을 만큼 state(상태)가 중심이 되는 구조다. 오늘은 React 앱을 구성할 때 가장 기본이자 본질적인 다음 네 가지 주제를 기반으로 리액트 기초 핵심과 컴포넌트 구현을 알아보려고 한다.

• useState로 상태 만들기
• 구조 분해 할당으로 props와 state 깔끔하게 처리하기
• 배열 데이터 반복 처리(map)
• setInterval을 활용한 실시간 시계 구현

---

🦝State

React에서 상태의 개념

React의 기본 철학은 UI는 상태에 따라 자동으로 갱신되어야 한다는 것이다. 여기서 상태(state)란 다음 조건을 만족하는 데이터를 말한다.

• 사용자 입력, 네트워크 응답, 시간 흐름 등에 따라 변화 가능
• 변경될 때마다 화면(UI)를 자동으로 다시 렌더링해야 하는 값

즉, 다음과 같은 데이터는 상태로 관리해야 한다:

• 버튼 클릭 횟수
• 입력 폼의 값
• API 요청 결과
• 시간

 

useState

React에서는 useState라는 훅을 제공해 상태값을 관리한다. 아래는 가장 기본적인 카운터 예제다.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 상태 초기값: 0

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

• const [count, setCount] = useState(0) -> count는 현재 상태값, setCount는 이 값을 바꾸는 함수다.
• setCount()를 호출하면, React는 count 값을 새로운 값으로 교체하고 컴포넌트를 다시 렌더링한다. 그리고, 최신 UI를 사용자에게 보여준다.

React에서 상태를 직접 바꾸지 않고 setCount() 같은 함수를 반드시 거쳐야 하는 이유는, React가 이 변화를 감지하고 UI를 동기화하기 위해서다. 즉, 상태 관리 없이 직접 DOM을 조절하면 아래 같은 문제가 생긴다.

• UI와 실제 데이터가 불일치
• 복잡한 조건문과 타이머 관리 필요
• 협업, 유지보수가 어려움

useState는 이 과정을 완전히 자동화해준다.

---

🛠️구조 분해 할당: React와 찰떡 궁합 문법

destructuring assignment, 객체나 배열에서 필요한 값을 추출해 변수에 바로 담는 문법

React에서는 구조 분해 할당을 많이 쓴다! 왜? 

• useState가 배열을 반환하기 때문에, [state, setState]로 받을 수 있다.
• props나 객체에서 원하는 속성만 꺼내 쓸 수 있다.

props 구조 분해

function Greeting({ name, age }) {
  return <p>{name}님은 {age}살입니다.</p>;
}

// 사용
<Greeting name="채트" age={3} />

 

상태 구조 분해

const [user, setUser] = useState({ name: '채트', age: 3 });

const { name, age } = user; // 구조 분해

구조 분해 덕분에 user.name, user.age처럼 길게 쓸 필요 없이 간결하게 코드 작성이 가능하다

---

🗺️.map()

React에서는 배열을 화면에 출력하려면 .map()을 사용해 JSX를 반복적으로 만들어야 한다.

const fruits = ['🍎 사과', '🍌 바나나', '🍇 포도'];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, idx) => (
        <li key={idx}>{fruit}</li>
      ))}
    </ul>
  );
}

• fuits.map(...) -> 각 항목마다 JSX <li>를 만들어 배열로 반환
• key = {idx} : React가 각 항목을 식별하기 위한 고유 key 필요 

React는 배열을 그대로 출력할 수 없다. JSX는 객체이기 때문에, 배열 내 각 요소를 JSX로 변환한 다음 출력해야 한다. 이를 효율적으로 처리할 수 있게 해주는 것이 map()이다.

---

⏰시계 구현하기

React에서는 실시간 데이터를 만들려면 일정 주기로 상태를 갱신해야 하며, 이를 위해 useEffect와 setInterval을 조합한다.

import { useEffect, useState } from 'react';

function Clock() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => clearInterval(timer); // 언마운트 시 타이머 정리
  }, []);

  return <h2>현재 시각: {time.toLocaleTimeString()}</h2>;
}

• useState(new Date()) -> 현재 시각을 상태로 저장
• useEffect(() => {...}, []) -> 마운트 시 딱 한번 실행
• setInterval(...) -> 1초마다 setTime()을 호출해 상태 업데이트
• clearInterval() -> 컴포넌트 제거 시 메모리 누수 방지를 위한 정리(cleanup)

---

React를 본질적으로 이해하려면 상태가 변할 때 UI가 변한다는 관점을 놓치지 않아야 하는 것 같다. 오늘은 다음 흐름으로 이 원리를 공부해 보았다.

• useState는 UI를 상태 기반으로 만들 수 있는 핵심 도구
• 구조 분해는 상태와 props를 간결하고 명확하게 다루기 위한 문법적 도구
• .map()을 이용한 반복 렌더링은 리스트 기반 UI의 기본
• useEffect와 타ㅇ머는 시간 흐름 같은 외부 이벤트를 React 컴포넌트에 반영할 수 있게 해준다.

이 네가지 개념은 React를 사용하는 모든 프로젝트의 출발점이자 시작점이다. 다음에는 useEffect의 의존성 배열과 조건부 렌더링, 컴포넌트 분리 전략들을 더 공부해봐야 할 듯.