๐Ÿ‘ป Task) map, filter๋ฅผ ์ด์šฉํ•ด์„œ monster ๋•Œ๋ ค์žก๊ธฐ!

solmiiยท2020๋…„ 6์›” 16์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
7/10


์–ด์ œ react ์„ธ์…˜์—์„œ ๊ณผ์ œ๋กœ ๋‚˜์™”๋˜ monsters ๋ฅผ ๊นจ๋ถ€์ˆ˜๊ณ ๐Ÿ’ช ์–ด๋–ป๊ฒŒ ๊นผ๋Š”์ง€ ์ฝ”๋“œ๋ฅผ ์ •๋ฆฌํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค!!
๊ณผ์ œ์—์„œ ์•ˆ๋‚ดํ•œ ์ˆœ์„œ๋Œ€๋กœ ์ฐจ๊ทผ์ฐจ๊ทผ ๋”ฐ๋ผ๊ฐ€๋ฉด์„œ ๋ด…์‹œ๋‹ค!!


ย ย  1. [index.js] API ํ˜ธ์ถœ ย ย 

API ์ฃผ์†Œ๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ๋ฐ์ดํ„ฐ ๋กœ๋”ฉ์„ ์ฒ˜๋ฆฌ

index.js

componentDidMount() {
  fetch('https://jsonplaceholder.typicode.com/users')
  .then((res) => res.json())
  .then((res) => this.setState({ monsters: res }));
}

=> ์ด ์ฝ”๋“œ์— ๋Œ€ํ•œ ์ž์„ธํ•œ ์„ค๋ช…์€ ๋‹ค๋ฅธ๊ธ€์— ์ž‘์„ฑํ–ˆ์œผ๋‹ˆ ์ฐธ๊ณ !


ย ย  2. [index.js] props๋กœ ๋ฐฐ์—ด ์ „๋‹ฌ ย ย 

CardList ์ปดํฌ๋„ŒํŠธ์— monsters ๋ผ๋Š” ์ด๋ฆ„์˜ props๋กœ monsters ๋ฐฐ์—ด ์ „๋‹ฌ

index.js

<CardList monsters={this.state.monsters} />

monsters ๋ฐฐ์—ด์„ <CardList /> ์— props ๊ฐ’์œผ๋กœ ์ „๋‹ฌ!!


ย ย  3. [Card.js] Card ์ปดํฌ๋„ŒํŠธ ๊ตฌ์กฐ ๋ฐ ๋ชจ์–‘ ย ย 

์ด๋ฏธ์ง€ ์ฃผ์†Œ์˜ ์ˆซ์ž ๋ถ€๋ถ„์„ props๋กœ ๋‚ด๋ ค๋ฐ›์€ id๋กœ ๋Œ€์ฒด

Card.js

<img src={`https://robohash.org/${this.props.id}?set=set2&size=180x180`} alt={this.props.name} />
<h2>{this.props.name}</h2>
<p>{this.props.email}</p>

์ค‘๊ฐ„์— props ๋ฅผ ๋„ฃ์„๋•Œ๋Š” ${ } ์œผ๋กœ ๋„ฃ์–ด์ค€๋‹ค!
JavaScript ํ…œํ”Œ๋ฆฟ ๋ฌธ์ž์—ด ` ์ฒ˜๋Ÿผ ์“ธ ์ˆ˜ ์žˆ๋„ค! ์™„์ „ ํŽธํ•˜๋‹ค!๐Ÿ˜˜


ย ย  4. [CardList.js] map์„ ์ด์šฉํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ ๋ฆฌํ„ด ย ย 

props๋กœ ๋‚ด๋ ค๋ฐ›์€ ๋ฐ์ดํ„ฐ์— map ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ด์„œ ๊ฐ๊ฐ ๋‹ค๋ฅธ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ง„ Card ์ปดํฌ๋„ŒํŠธ๋“ค์„ ๋ฆฌํ„ด

CardList.js

  {this.props.monsters.map((monster, idx) => (
    <Card key={idx} id={monster.id} name={monster.name} email={monster.email} />
  ))}

์ „๋‹ฌ๋ฐ›์€ monsters์— map ๋ฉ”์„œ๋“œ๋ฅผ ์ด์šฉํ•ด์„œ ๊ฐ๊ฐ์˜ key, id, name, email ์ •๋ณด๊ฐ€ ๋“ค์–ด๊ฐ€๋ฉด ์ž๋™์œผ๋กœ componen๊ฐ€ ๋ฐ˜ํ™˜๋˜๋„๋ก ์ž‘์„ฑ!
(์ธ์Šคํƒ€๊ทธ๋žจ ๋Œ“๊ธ€์ฐฝ๊ณผ ๋น„์Šทํ•ด์„œ ์—ฌ๊ธฐ๊นŒ์ง„ ์•ˆํž˜๋“ค์—ˆ๋‹ค...!)

:: Key={idx} ๋Š” ์™œ ๋„ฃ์€๊ฑธ๊นŒ?

Key๋Š” React๊ฐ€ ์–ด๋–ค ํ•ญ๋ชฉ์„ ๋ณ€๊ฒฝ, ์ถ”๊ฐ€ ๋˜๋Š” ์‚ญ์ œํ• ์ง€ ์‹๋ณ„ํ•˜๋Š” ๊ฒƒ์„ ๋•๋Š” ์ด๋ฆ„ํ‘œ๊ฐ™์€ ์—ญํ• ์„ ํ•œ๋‹ค.

key๊ฐ€ ์—†์–ด๋„ Virtual DOM์„ ๋น„๊ตํ•˜๋Š” ๊ณผ์ •์—์„œ ๋ฆฌ์ŠคํŠธ๋ฅผ ์ˆœ์ฐจ์ ์œผ๋กœ ๋น„๊ตํ•˜๋ฉด์„œ ๋ณ€ํ™”๋ฅผ ๊ฐ์ง€ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, key ๊ฐ€ ์žˆ๋‹ค๋ฉด ๋ณ€ํ™”๋ฅผ ํ›จ์”ฌ ๋นจ๋ฆฌ ์ธ์‹ํ•  ์ˆ˜ ์žˆ๋‹ค.

key ๊ฐ’์„ ์„ค์ •ํ•  ๋•Œ๋Š” map ํ•จ์ˆ˜์˜ ์ธ์ž๋กœ ์ „๋‹ฌ๋˜๋Š” ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ ์ปดํฌ๋„ŒํŠธ props๋ฅผ ์„ค์ •ํ•˜๋“ฏ์ด ์„ค์ •ํ•˜๋ฉด ๋œ๋‹ค.

์ •๋ง ์œ ๋‹ˆํฌํ•œ ๊ฐ’๋งŒ ๋“ค์–ด๊ฐ€์•ผ ํ•˜๋ฉฐ, (ํ•ธ๋“œํฐ ๋ฒˆํ˜ธ, email, id ๋“ฑ...) ๊ณ ์œ ํ•œ ์ •๋ณด๊ฐ€ ์—†๋‹ค๋ฉด index๋ฅผ key ๊ฐ’์œผ๋กœ ์ค„ ์ˆ˜ ์žˆ๋‹ค.

์œ„์˜ ์ฝ”๋“œ๋Š” index ๊ฐ’์„ key์— ๋„ฃ์–ด๋ณด๊ธฐ ์œ„ํ•ด ์ž‘์„ฑํ•œ ๊ฒƒ์ด๊ณ , id, email ์ฒ˜๋Ÿผ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ณ ์œ ํ•œ ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ๋‹ค๋ฉด ๊ทธ ๊ฐ’์„ key ๊ฐ’์œผ๋กœ ์ฃผ๋Š”๊ฒŒ ์ข‹๋‹ค!
index๋ฅผ key ๋กœ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ, ๋ฐฐ์—ด์ด ๋ณ€๊ฒฝ๋  ๋•Œ ํšจ์œจ์ ์œผ๋กœ ๋ฆฌ๋ Œ๋”๋ง ํ•˜๊ธฐ ํž˜๋“ค๋‹ค๊ณ  ํ•œ๋‹ค...!

์ฐธ๊ณ ๋กœ, ์ด ๋•Œ ๋ถ€์—ฌํ•ด์ฃผ๋Š” key ๊ฐ’์€ react ์—์„œ ์‹๋ณ„ํ•˜๊ธฐ ์œ„ํ•ด ์ฃผ์–ด์ง€๋Š” ๊ฐ’์ด๊ณ , ์šฐ๋ฆฌ๊ฐ€ ๋‹ค๋ฅธ ๋ฉ”์„œ๋“œ๋‚˜ ์ด๋ฒคํŠธ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜๋Š” ์—†๋‹ค!

๋งŒ์•ฝ index ์ •๋ณด๊ฐ€ ํ•„์š”ํ•˜๋‹ค๋ฉด, ๋”ฐ๋กœ index={idx} ๋กœ index ์ •๋ณด๋ฅผ ๋ถ€์—ฌํ•ด์ค˜์•ผ ํ•œ๋‹ค!


ย ย  5. [index.js] ๋ฉ”์„œ๋“œ๋ฅผ props๋กœ ์ „๋‹ฌ ย ย 

์ •์˜ํ•œ handleChange ๋ฉ”์„œ๋“œ๋ฅผ props๋กœ ๋„˜๊ฒจ์ฃผ๊ณ  ํ˜ธ์ถœ ์‹œ ์ธ์ž๋กœ ๋“ค์–ด์˜ค๋Š” ์ด๋ฒคํŠธ๊ฐ์ฒด(e)๋ฅผ ํ™œ์šฉํ•ด userInput ์œผ๋กœ setState

index.js

handleChange = (e) => {
  this.setState({ userInput: e.target.value });
};
<SearchBox handleChange={this.handleChange} />

SearchBox์— props๋กœ ๋„˜๊ฒจ์ค„ handleChange ๋ฉ”์„œ๋“œ๋ฅผ ์ •์˜ํ•ด์„œ ํ•จ์ˆ˜ ์ž์ฒด๋ฅผ props ๋กœ ๋„˜๊ฒจ์ฃผ์—ˆ๋‹ค!
(์ด๊ฒƒ๋„ ์ธ์Šคํƒ€๊ทธ๋žจ ๋Œ“๊ธ€์—์„œ ํ•ด๋ณธ๊ฑฐ๋ผ ์–ด๋ ต์ง€ ์•Š์•˜์Œ!)


ย ย  6. [index.js] filter๋ฅผ ์ด์šฉํ•˜์—ฌ ํ•„ํ„ฐ๋ง ๋กœ์ง ๊ตฌํ˜„ ย ย 

์†Œ๋ฌธ์ž๋กœ ๋ฐ”๊พผ monster๊ฐ์ฒด์˜ name๊ฐ’๊ณผ userInput๊ฐ’์„ ๋น„๊ตํ•˜์—ฌ, ์ผ์น˜ํ•˜๋Š” ๊ฐ’๋งŒ ๋ณ€์ˆ˜์— ์ €์žฅ ํ›„ props๋กœ ์ „๋‹ฌ

=> ์ฒ˜์Œ์— ๋ฌธ์ œ ์ดํ•ด๋ฅผ ์ž˜๋ชปํ•ด์„œ ์ผ์น˜? === ์ด์ง€~! ์ด๋ผ๊ณ  ๋„ฃ์—ˆ๋”๋‹ˆ ํ•˜๋‚˜๋„ ์ถœ๋ ฅ์ด ์•ˆ๋๋‹ค.
monster์˜ ์ด๋ฆ„์€ ์ •ํ•ด์ ธ์žˆ๊ณ , userInput ์— ๋“ค์–ด์˜ค๋Š” ์ •๋ณด๋Š” monster ์ด๋ฆ„์˜ ์ผ๋ถ€์ด๋ฏ€๋กœ, monster.name ์ด userInput์„ ์™„์ „ํžˆ ํฌํ•จํ•ด์•ผ ํ•˜๋Š” ๊ฑฐ์˜€๋‹ค.

index.js

let filtereMonster = this.state.monsters.filter((monster) => monster.name.toLowerCase().includes(this.state.userInput.toLowerCase()));

๊ทธ๋ฆฌ๊ณ  ์ฒ˜์Œ์— this.state.monsters ๋ฅผ props ๊ฐ’์œผ๋กœ ์ „๋‹ฌํ•ด ์ฃผ์—ˆ๋˜ <CardList /> ์ปดํฌ๋„ŒํŠธ์— props ๊ฐ’์„ ๋ณ€๊ฒฝํ•ด์ฃผ์—ˆ๋‹ค.

<CardList monsters={filtereMonster} />

๊ทธ๋Ÿฌ๋ฉด SearchBox ์—์„œ ํ•„ํ„ฐ๋ง ํ›„, ํ†ต๊ณผํ•œ ์š”์†Œ๋“ค๋งŒ ๋ฐ˜ํ™˜๋˜๋ฏ€๋กœ, ์ด ํ•„ํ„ฐ๋ง๋œ ์นœ๊ตฌ๋“ค๋งŒ map์„ ๋Œ๋ ค์„œ ํ™”๋ฉด์— ๋ฟŒ๋ ค์ฃผ๊ฒŒ ๋œ๋‹ค.
filter ๋กœ ๋‚˜์˜จ ๊ฒฐ๊ณผ๊ฐ’์€ props๋กœ ์ „๋‹ฌํ•ด์„œ ๋‹ค์‹œ map ์„ ๋Œ๋ฆฐ๋‹ค๋Š”๊ฒŒ ์–ด๋ ต๊ธฐ๋„ ํ•˜๊ณ  ์‹ ๊ธฐํ–ˆ์Œ!!
์ข€๋งŒ ๋” ์ผ์ฐ ์•Œ์•˜๋‹ค๋ฉด ์ธ์Šคํƒ€๊ทธ๋žจ ๋Œ“๊ธ€ ์‚ญ์ œ๋ฅผ ์ˆ˜์›”ํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ์—ˆ์„ํ…๋ฐ......๐Ÿ˜‚


์ž˜ ๋™์ž‘ํ•œ๋‹ค!!!!

profile
ํ•˜๋ฃจํ•˜๋ฃจ๋Š” ์„ฑ์‹คํ•˜๊ฒŒ ์ธ์ƒ ์ „์ฒด๋Š” ๋˜๋Š”๋Œ€๋กœ

0๊ฐœ์˜ ๋Œ“๊ธ€