6/19 TIL

Hwiยท2024๋…„ 6์›” 19์ผ

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
52/96
post-thumbnail

๐Ÿ“– ์ง„ํ–‰ํ•œ ๊ณต๋ถ€ ๐Ÿ“–

  • ๊ฒ€์ƒ‰ ํ‚ค์›Œ๋“œ์— ๋งž๊ฒŒ ์ „์‹œํšŒ ๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ

์ผ๋‹จ ์˜ค๋Š˜ ๊ณต๋ถ€ํ•˜๋ฉด์„œ ๊ฐ€์žฅ ํ—ท๊ฐˆ๋ ธ๋˜ ์ ์€ ๋ถ„๋ช… ๋‚˜๋Š” ํ‚ค์›Œ๋“œ์— ์ž…๋ ฅํ•œ ๊ฐ’๋Œ€๋กœ ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ๊ฐ€ ๋ฐ”๊ผˆ์œผ๋ฉด ์ข‹์„ ๊ฑฐ ๊ฐ™์€๋ฐ ๋‹ค๋ฅธ ๊ฑธ ๊ฒ€์ƒ‰ํ•ด๋„ ์™œ ๊ณ„์† ๊ธฐ๋ณธ ๊ฐ’์œผ๋กœ ์„ค์ •ํ•ด๋‘” "์„œ์šธ ๋ฏธ์ˆ ๊ด€" ๋งŒ ๊ฒฐ๊ณผ ๋ชฉ๋ก์œผ๋กœ ํ‘œ์ถœ๋˜๋Š”์ง€ ํ•œ์ฐธ๋™์•ˆ ์ด์œ ๋ฅผ ์ฐพ์ง€ ๋ชปํ–ˆ์—ˆ๋‹ค

๊ทผ๋ฐ ์ง„์งœ ๋ฐ”๋ณด๊ฐ™์ด input ํƒœ๊ทธ์— value, onChange ๋‘˜ ๋‹ค ์•ˆ ๋„ฃ์–ด์ค˜์„œ ์•ˆ๋๋˜ ๊ฑฐ์ž„

๊ทธ๋ž˜์„œ ๋ฐ”๋กœ ์ถ”๊ฐ€ํ•ด์ฃผ๋‹ˆ ์ž‘๋™์€ ์ž˜ ๋˜๋Š”๋ฐ.. ๊ฑฐ์Šฌ๋ฆฌ๋Š” ์ ์ด ํ•˜๋‚˜ ์ƒ๊ฒผ๋‹ค

์šฐ๋ฆฌ ์กฐ๋Š” ๋ถ„๋ช… ๋ฐ•๋ฌผ๊ด€์— ๊ด€๋ จ๋œ ์ •๋ณด๋งŒ ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ์€๋ฐ ์˜๋„์— ๋งž์ง€ ์•Š๊ฒŒ ํ‚ค์›Œ๋“œ ๊ฒ€์ƒ‰์นธ์— ์‹๋‹น, ์˜ค๋งˆ์นด์„ธ, ๋””์ €ํŠธ ๋“ฑ๋“ฑ ์ „ํ˜€ ๊ด€๋ จ์—†๋Š” ํ‚ค์›Œ๋“œ๋ฅผ ์ž…๋ ฅํ•ด๋„ ํ•ด๋‹น ํ‚ค์›Œ๋“œ์— ๋Œ€ํ•œ ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ๊ฐ’์ด ์ถœ๋ ฅ๋˜๋Š” ๊ฒƒ์ด๋‹ค

form onSubmit={} ์— ๋“ค์–ด๊ฐ€๋Š” handleSearch ํ•จ์ˆ˜์—์„œ "๋ฐ•๋ฌผ๊ด€", "๋ฎค์ง€์—„" ํ‚ค์›Œ๋“œ๊ฐ€ ํฌํ•จ๋ผ์•ผ๋งŒ ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ์ด ์‹คํ–‰๋˜๊ฒŒ๋” ํ•˜๋‹ˆ๊น

๋˜ ํ•˜๋‚˜์˜ ๋ฌธ์ œ์  ๋ฐœ๊ฒฌ.. ๋งจ ์ƒ๋‹จ์— ์žˆ๋Š” "๋ฎค์ง€์—„์‚ฐ" ์€ ๋ฎค์ง€์—„, ๋ฐ•๋ฌผ๊ด€์ด ์•„๋‹Œ๋ฐ๋„ ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ์— ํฌํ•จ์ด ๋ผ์žˆ๋‹ค๋Š” ๊ฒƒ

if๋ฌธ์„ ์จ์„œ "์‚ฐ" ์ด ๋“ค์–ด๊ฐ„๋‹ค๋ฉด ํ•ด๋‹น ์žฅ์†Œ์˜ ๋งˆ์ปค์™€ ์ •๋ณด๋ฅผ ์ œ์™ธํ•˜๊ณ  ๋ฆฌ์ŠคํŠธ๋ฅผ ์ถœ๋ ฅํ•˜๋ ค๊ณ ๋„ ํ•ด๋ดค์œผ๋‚˜.. ์‹คํŒจ


์ถ”ํ›„ zustand๋ฅผ ๋งก์€ ํŒ€์› ๋ถ„์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ import ํ•ด์„œ ์˜†์— ๋ถˆ๋Ÿฌ์˜ค๊ธฐ๊นŒ์ง„ ์„ฑ๊ณตํ–ˆ๋Š”๋ฐ ์ด๊ฒŒ ์ฝ”๋“œ ๋ฌธ์ œ์ธ์ง€ api ๋ฌธ์ œ์ธ์ง„ ์•„์ง ํŒŒ์•…์„ ๋ชปํ–ˆ๋Š”๋ฐ ๊ณต์ฃผ๋ฐ•๋ฌผ๊ด€, ๋Œ€๊ตฌ๋ฐ•๋ฌผ๊ด€์„ ์ œ์™ธํ•˜๊ณค ์„œ์šธ๋ฐ•๋ฌผ๊ด€, ๊ฒฝ๊ธฐ๋ฐ•๋ฌผ๊ด€ ๋“ฑ ๋‹ค๋ฅธ ์ง€์—ญ์€ ์•„์˜ˆ ์•ˆ ๋œจ๊ธธ๋ž˜


์œ„ ์ฝ”๋“œ์—์„œ queryKey๋กœ keyword ๋Œ€์‹  inputKeyword ๋ฅผ ๋ฐ›์€ ํ›„ ๋‹ค์‹œ ๊ฒ€์ƒ‰์„ ํ•ด๋ดค๋‹ค

inputKeyword ๋ฅผ ๋ฐ›์œผ๋‹ˆ ๊ธฐ์กด์—๋Š” ์•ˆ ๋œจ๋˜ ์ œ์ฃผ๋ฐ•๋ฌผ๊ด€๊นŒ์ง€๋Š” ๋œจ๋Š”๋ฐ.. ๋„๋Œ€์ฒด ์–ด๋””๊ฐ€ ์ž˜๋ชป๋œ ๊ฑธ๊นŒ?? ์ด ์ •๋„๋ฉด api ๋ฌธ์ œ ์•„๋‹Œ๊ฐ€

(์ด ๋ถ€๋ถ„์€ ์ถ”ํ›„ ํ™•์ธํ•ด๋ณธ ๊ฑด๋ฐ ๊ธฐ์กด์ฒ˜๋Ÿผ keyword ๋ฅผ ์จ๋„ ์ œ์ฃผ๋ฐ•๋ฌผ๊ด€์€ ๋˜‘๊ฐ™์ด ๋ถˆ๋Ÿฌ์˜ด. api๊ฐ€ ์˜ค๋ฝ๊ฐ€๋ฝํ•œ ๋“ฏ)

์ฝ”๋“œ ๋ฌธ์ œ์˜€๋‹ค๋ฉด ๊ณต์ฃผ,๋Œ€๊ตฌ,์ œ์ฃผ ์ „๋ถ€ ์•ˆ ๋ถˆ๋Ÿฌ์™€์กŒ์–ด์•ผ ์ •์ƒ์ธ๋ฐ ์™œ ์ด ์„ธ ์ง€์—ญ ์ œ์™ธํ•˜๊ณค ์•ˆ ๋œจ๋Š” ๊ฒƒ์ธ๊ฐ€.. ์ง„์งœ ๊ณจ๋จธ๋ฆฌ ์•„ํ”„๋‹ค๋‹ค๋‹ฅ

profile
๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ณ  ์‹ถ์–ด~~~

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