[React] React의 value와 HTML의 value의 차이

프런트 공부를 처음 시작하면 배우는 checkbox, radio 버튼, select를 react와 배우던 와중, 굉장히 이질적인 문장이 귀에 들어왔다. 바로

React의 value는 HTML 에서 value 와 다르다

무슨 뜻일까?

코드로 먼저 확인하자.

import React, { useState } from 'react';


const App016 = () => {

  const [fruit, setFruit] = useState('grape');

  const [key, setKey] = useState(1);

  const resetSelect = () => setKey(prev => prev + 1);

  const items = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Cherry' },
  ];

    return (
      <>
        <h2>Controlled Component (value=)</h2>
        <select value={fruit} onChange={(e) => setFruit(e.target.value)}>
          <option value="apple">사과</option>
          <option value="banana">바나나</option>
          <option value="orange">오렌지</option>
          <option value="grape">포도</option>
        </select>
        <p>Selected: {fruit}</p>
      </>
    );
};

export default App016;

e.target.value를 보자.

HTML Value vs. React Value

동작 방식의 차이

• HTML value: 초기값만 설정하고 이후 사용자의 입력에 따라 자유롭게 변경
• React value: 컴포넌트의 state와 연결되어 있으며, state가 변경되지 않으면 값이 변경되지 않음

제어 방식의 차이

// HTML
<select value="apple">  // 초기값만 설정하고 이후 자유롭게 변경 가능

// React
<select value={fruit} onChange={(e) => setFruit(e.target.value)}>  
// value와 onChange가 쌍으로 동작

• React에서는 value와 onChange 핸들러가 세트로 동작하여 "제어 컴포넌트(Controlled Component)"를 형성한다.

상태 관리

• HTML: DOM 요소 자체가 상태를 관리
• React: 컴포넌트의 state가 상태를 관리하고, 이 state가 변경될 때마다 컴포넌트가 다시 렌더링 됨

const [fruit, setFruit] = useState('grape');  // state 관리
...
<select value={fruit} onChange={(e) => setFruit(e.target.value)}>

여기서 value는 단순한 속성이 아니라 React의 단방향 데이터 흐름을 구현하는 중요한 요소

사용자가 select를 변경하면:

- onChange 이벤트가 발생
- setFruit로 state 업데이트
- 컴포넌트 리렌더링
- 새로운 value 값이 select에 반영

React는 한 페이지 내에서 component가 변화될 때

State의 기본 개념

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

count: 현재 상태값
setCount: 상태를 업데이트하는 함수
0: 초기값

State의 특징

• 컴포넌트에 종속적: 각 컴포넌트는 자신만의 독립적인 state를 가짐
• 비동기적 업데이트: setState는 비동기적으로 처리됨
• 불변성 유지: 직접 수정하지 않고 항상 setState 함수를 통해 업데이트해야 함

잘못된 State 사용 예시

// ❌ 잘못된 방법
count = count + 1;  // state 직접 수정

// ✅ 올바른 방법
setCount(count + 1);  // setState 함수 사용

이전 상태를 기반으로 업데이트

// 이전 상태값을 사용할 때의 올바른 방법
setCount(prevCount => prevCount + 1);

객체 형태의 State 업데이트

const [user, setUser] = useState({
  name: 'John',
  age: 25
});

// 객체 업데이트 시 spread 연산자 사용
setUser({
  ...user,
  age: 26
});