조건에 맞는 항목 나타나게 하기
코드
import React, { useState, useEffect } from 'react';
import SearchBox from './Components/SearchBox/SearchBox';
import CardList from './Components/CardList/CardList';
import './Monsters.scss';
function Monsters() {
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then((res) => res.json())
.then((data) => setMonsters(data));
}, []);
const [monsters, setMonsters] = useState([]);
return (
<div className="monsters">
<SearchBox />
<CardList monsters={monsters} />
</div>
);
}
export default Monsters;
코드 결과물
input에서 검색 시 일치하는 카드를 등장시키자!
1단계) input에서 value를 가져오자
import React, { useState, useEffect } from 'react';
import SearchBox from './Components/SearchBox/SearchBox';
import CardList from './Components/CardList/CardList';
import './Monsters.scss';
function Monsters() {
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then((res) => res.json())
.then((data) => setMonsters(data));
}, []);
const [monsters, setMonsters] = useState([]);
const [userInput, setUserInput] = useState(''); // input state 설정
const updateUserInput = (e) => {
setUserInput(e.target.value); // input value
};
return (
<div className="monsters">
<SearchBox handleChange={updateUserInput} />
<CardList monsters={monsters} />
</div>
);
}
export default Monsters;
- 먼저 input에서 value를 가져와야 하므로 userInput state를 만든다
- updateUserInput이라는 함수를 만들고 가져온 value를 setUserInput을 통해 userInput에 넣는다.
2단계) filter와 inCludes를 활용해 걸러내자
import React, { useState, useEffect } from 'react';
import SearchBox from './Components/SearchBox/SearchBox';
import CardList from './Components/CardList/CardList';
import './Monsters.scss';
function Monsters() {
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then((res) => res.json())
.then((data) => setMonsters(data));
}, []);
const [monsters, setMonsters] = useState([]);
const [userInput, setUserInput] = useState('');
const updateUserInput = (e) => {
setUserInput(e.target.value);
};
const sortedMonster = monsters.filter((monster) => {
return monster.name.includes(userInput); // filter & Includes 함수 활용
});
return (
<div className="monsters">
<SearchBox handleChange={updateUserInput} />
<CardList monsters={sortedMonster} /> // 검색 결과를 prop으로 전달
</div>
);
}
export default Monsters;
- filter와 includes를 이용해 검색 value가 갖고있는 monster의 name과 일치하는지 확인한다.
- 나온 결과 값은 sortedMonster에 넣어주고 CardList에 prop으로 전달해서 일치하는 값만 보여지게 한다.
3단계) 검색이 심플하게 모두 소문자로 만든다
import React, { useState, useEffect } from 'react';
import SearchBox from './Components/SearchBox/SearchBox';
import CardList from './Components/CardList/CardList';
import './Monsters.scss';
function Monsters() {
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then((res) => res.json())
.then((data) => setMonsters(data));
}, []);
const [monsters, setMonsters] = useState([]);
const [userInput, setUserInput] = useState('');
const updateUserInput = (e) => {
setUserInput(e.target.value);
};
const sortedMonster = monsters.filter((monster) => {
return monster.name.toLowerCase().includes(userInput.toLowerCase());
}); // toLowerCase() 활용
return (
<div className="monsters">
<SearchBox handleChange={updateUserInput} />
<CardList monsters={sortedMonster} />
</div>
);
}
export default Monsters;
- 하지만 대소문자까지 일치해야 원하는 결과를 볼 수 있는 문제가 있다.
- 그러므로 input으로 들어오는 값과 갖고있는 Data에 name을 모두 소문자로 통일시켜주기 위해 toLowerCase()를 활용한다.
결과
Author And Source
이 문제에 관하여(조건에 맞는 항목 나타나게 하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hsuj86/filterandincludes저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)