3) 데이터 바인딩

1. 배열형태의 데이터 바인딩

React의 가장 큰 장점 중 하나는 배열이나 객체 같은 데이터 구조를 손쉽게 화면(UI)에 출력할 수 있다는 점입니다. JavaScript의 내장 함수와 함께 React의 렌더링 구조를 활용하면, 복잡한 데이터도 매우 간단하게 처리할 수 있습니다.

• 순수 js방식 바인딩 예시

// js
const fruits = ['apple', 'banana', 'orange'];
const ul = document.createElement("ul");
for(let i =0; i<fruits.length; i++){
  const li = document.createElement("li");
  li.textContent = fruits[i];
  ul.append(li);
}
root.append(ul);

1) map과 key

• map() 함수는 배열의 각 항목을 순회하면서 새로운 요소를 반환하는 함수입니다.

• 리액트에서는 배열에 map()함수를 적용하여 jsx요소를 반환시켜 화면에 바인딩 합니다.

• 이 때 각 항목마다 고유한 key값을 설정하면 보다 효율적으로 렌더링이 가능합니다.

const fruits = ['apple', 'banana', 'orange'];

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

2) filter

• filter()는 조건에 맞는 항목만 배열에 남기는 함수입니다. map함수와 결합하여 조건에 맞는 데이터만 렌더링 되도록 처리할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];

function EvenNumbers() {
  const even = numbers.filter((n) => n % 2 === 0); // 짝수만 필터링

  return (
    <ul>
      {even.map((n) => (
        <li key={n}>{n}</li>
      ))}
    </ul>
  );
}

2. 객체형테의 데이터 바인딩

• React에서는 사용자 정보, 입력 폼, 설정값 등 다양한 형태의 데이터를 객체로 다루는 경우가 많습니다.

1) onChange

• onChange 은 input의 현재 값이 변경될 때 실행할 이벤트를 기술하는 이벤트함수입니다.

• useState와 연동하여 사용자의 입력값을 실시간으로 화면에 렌더링 할 수 있습니다.

• 사용자의 입력값을 바탕으로 실시간으로 유효성검사를 진행해야 한다면 적절한 방식입니다.

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

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setUser((prev) => ({ ...prev, [name]: value }));
  };

  const isNameValid = user.name.length >= 2;
  const isAgeValid = Number(user.age) >= 0;

  return (
    <div>
      <input
        name="name"
        placeholder="이름"
        value={user.name}
        onChange={handleChange}
      />
      {!isNameValid && <p style={{ color: 'red' }}>이름은 2글자 이상이어야 합니다</p>}

      <input
        name="age"
        placeholder="나이"
        value={user.age}
        onChange={handleChange}
      />
      {!isAgeValid && <p style={{ color: 'red' }}>나이는 0 이상이어야 합니다</p>}

      <p>이름: {user.name}</p>
      <p>나이: {user.age}</p>
    </div>
  );
}

2) useRef

• useRef는 input의 현재 값을 직접 참조할 수 있게 해주는 hook입니다.

• useState를 통해 객체 형태로 상태를 만들고, useRef를 통해 입력창에서 직접 값을 가져와서 상태를 업데이트할 수 있습니다.

• 입력값을 상태로 실시간으로 반영하지 않고, 버튼 클릭 시점에만 가져올 수 있어서 불필요한 리렌더링을 방지할 수 있습니다.

function UserForm() {
  const nameRef = useRef<HTMLInputElement>(null);
  const ageRef = useRef<HTMLInputElement>(null);

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

  const handleSubmit = () => {
    setUser({
      name: nameRef.current?.value || '',
      age: ageRef.current?.value || '',
    });
  };

  return (
    <div>
      <input ref={nameRef} placeholder="이름" />
      <input ref={ageRef} placeholder="나이" />
      <button onClick={handleSubmit}>등록</button>

      <p>이름: {user.name}</p>
      <p>나이: {user.age}</p>
    </div>
  );
}