React 로 색상 필터 앱 구축하기

소개

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

👀 미리보기

project preview

🎯 과제

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

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