# search bar with react

cra

npx create-react-app search_bar

practice 폴더에 위 명령어를 사용하여 search_bar 프로젝트 폴더 생성

eslint와 prettier 설정.

component

users와 user 총 2개의 components 파일 작성

App

import { useState, useEffect } from "react";
import { Users } from "./component/users/users";

function App() {
  const [users, setUsers] = useState([]);
  const [searchField, setSearchField] = useState("");
  const [filteredUsers, setFilteredUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((users) => {
        setUsers(users);
      });
  });

  useEffect(() => {
    setFilteredUsers(() =>
      users.filter((user) => user.name.toLowerCase().includes(searchField.toLowerCase())
      )
    );
  }, [searchField, users]);

  return (
    <div className="app">
      <input
        type="search"
        placeholder="searchField"
        onChange={(e) => setSearchField(e.target.value)}
      ></input>
      <Users users={filteredUsers} />
    </div>
  );
}

export default App;

class component를 사용하지 않고 functional component를 사용하여 hooks의 useState와 useEffect를 적용.

useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((users) => {
        setUsers(users);
      });
  }, []);

처음 렌더링 이후에 useEffect에서 유저 데이터를 받아와 setUsers로 users의 상태 값을 업데이트 한다.

return (
    <div className="app">
      <input
        type="search"
        placeholder="searchField"
        onChange={(e) => setSearchField(e.target.value)}
      ></input>
      <Users users={filteredUsers} />
    </div>
  );

input jsx에 onChange event를 걸어 input의 내용이 바뀔때마다 searchField 상태 값을 업데이트 한다.

useEffect(() => {
    setFilteredUsers(() =>
      users.filter((user) => user.name.toLowerCase().includes(searchField.toLowerCase())
      )
    );
  }, [searchField, users]);

처음 받아 온 데이터 users의 이름 값과 input에서 업데이트 된 searchField의 값을 Array.filter와 String.includes를 사용하여 searchField를 포함한 내용의 새로운 배열 값을 filteredUsers에 업데이트 해준다.

return (
    <div className="app">
      <input
        type="search"
        placeholder="searchField"
        onChange={(e) => setSearchField(e.target.value)}
      ></input>
      <Users users={filteredUsers} />
    </div>
  );

filteredUsers의 상태 값을 Users component props로 전달한다.

Users

import { User } from "../user/user";

export const Users = (props) => {
  return (
    <div>
      {props.users.map((user) => (
        <User key={user.id} user={user} />
      ))}
    </div>
  );
};

App에서 전달 받은 props.users는 배열 상태로 받아 Array.map 메소드를 사용하여 배열 전체 내용을 하나씩 User component props로 보내 보여준다.

User

export const User = (props) => {
  return (
    <div>
      <h2>{props.user.name}</h2>
      <h4>{props.user.email}</h4>
    </div>
  );
};

props로 받아온 user의 내용 렌더.

결과