[Day61] ⚛️ React ⚛️ React 비제어 컴포넌트를 제어 컴포넌트로 전환

[github-actions]

⚛️ React 비제어 컴포넌트를 제어 컴포넌트로 전환

카테고리: ⚛️ React
난이도: 🟢 Easy
제한 시간: 15분

---

문제

쇼핑몰의 상품 검색 기능을 구현하는 중입니다. 현재 검색 입력 필드는 비제어 컴포넌트로 되어 있습니다. 이를 제어 컴포넌트로 전환하여 검색어를 상태로 관리하고, 검색어가 변경될 때마다 콘솔에 출력되도록 하세요.

코드

import React, { useState } from 'react';

function ProductSearch() {
  // TODO: 여기에 구현하세요
  return (
    <div>
      <input type="text" placeholder="상품 검색" />
    </div>
  );
}

export default ProductSearch;

요구사항

1. 검색 입력 필드를 제어 컴포넌트로 전환해야 합니다.
2. 검색어를 상태로 관리해야 합니다.
3. 검색어가 변경될 때마다 콘솔에 검색어를 출력해야 합니다.

힌트

💡 힌트 보기

useState 훅을 사용하여 입력 값을 상태로 관리하고, onChange 이벤트 핸들러를 통해 상태를 업데이트하세요.

---

🤖 이 문제는 AI에 의해 자동 생성되었고, 생성 후 검수 단계를 거쳤습니다.
풀이는 PR로 제출해주세요! 정답은 다음 날 자정에 댓글로 공개됩니다.

[github-actions]

📝 레퍼런스 정답

import React, { useState } from 'react';

function ProductSearch() {
  const [searchTerm, setSearchTerm] = useState('');

  const handleChange = (event) => {
    const newSearchTerm = event.target.value;
    setSearchTerm(newSearchTerm);
    console.log(newSearchTerm);
  };

  return (
    <div>
      <input type="text" placeholder="상품 검색" value={searchTerm} onChange={handleChange} />
    </div>
  );
}

export default ProductSearch;

자신의 풀이와 비교해보세요! 다른 접근 방식도 정답일 수 있습니다.