React 로 색상 필터 앱 구축하기

소개

이 프로젝트에서는 React 를 사용하여 색상 필터 애플리케이션을 구축하는 방법을 배우게 됩니다. 이 애플리케이션을 통해 사용자는 찾고 있는 색상의 이름을 입력하여 색상 목록을 필터링할 수 있습니다. 이 프로젝트는 React 에서 상태 관리, 이벤트 처리 및 조건부 렌더링을 사용하는 방법을 이해하는 데 도움이 될 것입니다.

👀 미리보기

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다.

React 프로젝트를 설정하고 종속성을 관리하는 방법
실시간 색상 필터링 기능을 구현하는 방법
CSS 를 사용하여 애플리케이션 스타일을 지정하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

React 프로젝트를 설정하고 종속성을 설치합니다.
React 에서 상태 관리 (state management) 를 활용하여 데이터를 필터링합니다.
사용자 입력 이벤트를 처리하고 그에 따라 UI 를 업데이트합니다.
CSS 를 사용하여 React 애플리케이션의 스타일을 지정합니다.

프로젝트 설정

이 단계에서는 프로젝트를 설정하고 필요한 종속성을 설치하는 방법을 배우게 됩니다.

코드 편집기를 열고 프로젝트 디렉토리로 이동합니다.

├── public
├── src
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── package-lock.json
└── package.json

다음으로, 터미널에서 npm install 명령을 사용하여 종속성을 다운로드합니다. 종속성 다운로드가 완료될 때까지 기다린 다음 npm start 명령을 사용하여 프로젝트를 시작합니다.

프로젝트가 성공적으로 시작되면 "Web 8080"을 클릭하여 브라우저에서 미리 봅니다.

✨ 솔루션 확인 및 연습

색상 필터 구현

이 단계에서는 색상 필터 기능을 구현합니다.

코드 편집기에서 App.js 파일을 엽니다.
이 파일에서 필요한 종속성을 가져옵니다.
```
import React, { useState } from "react";
```
const App = () => {} 안에 필터링된 색상 목록을 저장하기 위한 상태 변수를 추가합니다.
```
const [filteredList, setFilteredList] = useState(colors);
```

사용자의 입력에 따라 색상 목록을 필터링하는 handleOnChange 함수를 구현합니다.

const handleOnChange = (e) => {
  const value = e.target.value;
  if (!value) {
    setFilteredList(colors);
  }

  const filtered = colors.filter((c) =>
    c.name.toUpperCase().includes(value.toUpperCase())
  );
  setFilteredList(filtered);
};

입력 필드와 필터링된 색상 목록을 렌더링합니다.

return (
  <div className="app">
    <input
      className="filter-input"
      type="text"
      name="filter"
      placeholder="Enter a colour name to see filtered results"
      onChange={handleOnChange}
    />
    <div className="list">
      {filteredList.map((c) => {
        return (
          <div
            className="list-item"
            key={c.name}
            style={{ backgroundColor: c.hex }}
          >
            {c.name}
          </div>
        );
      })}
    </div>
  </div>
);

const App = () => {} 내의 전체 코드는 다음과 같습니다.

const App = () => {
  const [filteredList, setFilteredList] = useState(colors);

  const handleOnChange = (e) => {
    const value = e.target.value;
    if (!value) {
      setFilteredList(colors);
    }

    const filtered = colors.filter((c) =>
      c.name.toUpperCase().includes(value.toUpperCase())
    );
    setFilteredList(filtered);
  };

  return (
    <div className="app">
      <input
        className="filter-input"
        type="text"
        name="filter"
        placeholder="Enter a colour name to see filtered results"
        onChange={handleOnChange}
      />
      <div className="list">
        {filteredList.map((c) => {
          return (
            <div
              className="list-item"
              key={c.name}
              style={{ backgroundColor: c.hex }}
            >
              {c.name}
            </div>
          );
        })}
      </div>
    </div>
  );
};

App.js 파일을 저장하면 사용자가 입력 필드에 입력할 때 애플리케이션이 실시간으로 색상 목록을 필터링해야 합니다.