TIL - 20260321

0321 리액트 기초 복습 (2/N): State와 이벤트 처리

---

✅ 1. State (useState): 컴포넌트의 기억 장치

• Props가 부모로부터 받은 "외부 데이터"라면, State(상태)는 컴포넌트가 내부적으로 소유하고 관리하는 "내부 데이터"입니다. 사용자의 인터랙션 등으로 인해 변경될 수 있는 모든 값은 State로 관리해야 합니다.

• React의 핵심 원리: State가 변경되면, React는 해당 컴포넌트를 자동으로 다시 렌더링(Re-render)하여 화면을 업데이트합니다.

• useState Hook: 함수형 컴포넌트에서 State를 사용할 수 있게 해주는 Hook입니다.

  • 문법: const [state, setStateFunction] = useState(initialState);
  • state: 현재 상태 값.
  • setStateFunction: 상태를 갱신하는 함수. 이 함수를 통해서만 상태를 변경해야 합니다. (직접 state = newValue 와 같이 수정하면 안 됨)
  • initialState: 상태의 초기값.

  import React, { useState } from 'react';
  
  function Counter() {
    // count 상태를 0으로 초기화
    // count: 현재 값(읽기용), setCount: 값을 변경하는 함수
    const [count, setCount] = useState(0);
  
    const increment = () => {
      // setCount 함수를 호출하여 count 상태를 갱신 -> 리렌더링 발생
      setCount(count + 1);
    };
  
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={increment}>Click me</button>
      </div>
    );
  }

➕ 상태 업데이트 시 주의사항: 함수형 업데이트

• 상태 업데이트가 이전 상태 값에 의존하는 경우, 함수형 업데이트를 사용하는 것이 안전합니다.

• 이유: React의 상태 업데이트는 비동기적으로 처리될 수 있어, setCount(count + 1)을 여러 번 호출해도 마지막 한 번만 적용될 수 있습니다.

• 해결책: setState 함수에 값을 직접 넣는 대신, 최신 상태(previous state)를 인자로 받는 함수를 전달합니다.

  const increment = () => {
    // setCount에 이전 상태(prevCount)를 받아 새로운 상태를 반환하는 함수를 전달
    setCount(prevCount => prevCount + 1);
  };

---

✅ 2. 이벤트 처리 (Handling Events)

• React의 이벤트 처리는 HTML과 유사하지만, 몇 가지 차이점이 있습니다. 이를 통해 사용자의 행동(클릭, 입력 등)에 반응하여 컴포넌트의 상태(State)를 변경하고 UI를 동적으로 만들 수 있습니다.

• 주요 특징:

  1. 카멜 케이스 (camelCase): onclick 대신 onClick, onchange 대신 onChange와 같이 이벤트 이름은 카멜 케이스로 작성합니다.
  2. 함수 전달: HTML에서는 문자열로 된 코드를 전달하지만, React에서는 이벤트 핸들러 함수 자체를 {} 안에 넣어 전달합니다.
  3. 이벤트 객체: 이벤트 핸들러 함수는 이벤트 객체를 인자로 받습니다. 이 객체를 통해 event.preventDefault() (기본 동작 방지), event.target.value (입력 값 접근) 등의 작업을 수행할 수 있습니다.

  function ColorChanger() {
    const [color, setColor] = useState('black');
  
    const changeColorHandler = () => {
      setColor('red');
    };
  
    return (
      <p
        onClick={changeColorHandler} // 클릭 시 changeColorHandler 함수 실행
        style={{ color: color }}
      >
        Click me to change my color!
      </p>
    );
  }

---

✅ 3. 제어 컴포넌트 (Controlled Components)

• HTML의 폼(Form) 요소(<input>, <textarea>, <select>)는 기본적으로 자기 자신의 상태를 내부적으로 관리합니다. 하지만 React에서는 폼 요소의 값을 컴포넌트의 State와 연결하여, React가 모든 데이터 흐름을 제어하도록 하는 방식을 권장합니다. 이를 "제어 컴포넌트"라고 합니다.

• 구현 방식:

  1. 폼 요소의 값을 관리할 state를 useState로 생성합니다.
  2. input과 같은 폼 요소의 value 속성에 이 state를 연결합니다.
  3. onChange 이벤트가 발생할 때마다, setState 함수를 호출하여 state를 업데이트합니다.

• 장점:

  • 모든 데이터가 React의 state에 의해 관리되므로, 데이터 흐름이 예측 가능하고 일관됩니다.
  • 입력값에 대한 실시간 유효성 검사나 동적인 UI 변경이 용이해집니다.

  function NameForm() {
    const [name, setName] = useState('');
  
    const handleChange = (event) => {
      setName(event.target.value);
    };
  
    return (
      <form>
        <label>Name:</label>
        <input
          type="text"
          value={name}        // 2. state를 value에 연결
          onChange={handleChange} // 3. 변경 시 state 업데이트
        />
        <p>Your name is: {name}</p>
      </form>
    );
  }

---

📌 요약

• State (useState)는 컴포넌트의 내부 데이터를 관리하며, 이 값이 변하면 화면이 자동으로 다시 렌더링됩니다.
• 상태 업데이트가 이전 상태에 의존할 경우, setState(prevState => ...) 형태의 함수형 업데이트를 사용하는 것이 안전합니다.
• 사용자의 행동은 이벤트 핸들러를 통해 처리하며, onClick, onChange와 같은 카멜 케이스 속성에 함수를 직접 전달합니다.
• React에서 폼(Form)은 State와 value, onChange를 연결하는 제어 컴포넌트 방식으로 관리하는 것이 표준입니다.