[React, TS] ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉฐ ์ƒํƒœ ๊ด€๋ฆฌ์— ๋Œ€ํ•ด ์•Œ๊ฒŒ ๋œ ๊ฒƒ๋“ค
ยท
Frontend
์ด๋ฒˆ์— ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ useState()๋ฅผ ํ™œ์šฉํ•œ ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ํ•˜๊ณ  ์žˆ๋Š”๋ฐ, ์ƒํƒœ๊ด€๋ฆฌ์— ๋Œ€ํ•œ ํ™•์‹คํ•œ ์ดํ•ด ์—†์ด ๋ฌด์ž‘์ • ์ž‘์—…์„ ํ•˜๋‹ค๋ณด๋‹ˆ ์ฝ”๋“œ๊ฐ€ ๋‚ด๊ฐ€ ์ดํ•ดํ•˜๊ธฐ๋„ ์–ด๋ ค์šธ ์ •๋„๋กœ ๋ณต์žกํ•ด์ ธ ์žˆ์—ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ƒํƒœ๊ด€๋ฆฌ์— ๋Œ€ํ•œ ๊ณต๋ถ€๋ฅผ ํ•˜๊ณ  ๋‹ค์‹œ ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ–ˆ๋‹ค. ์ด๋ฒˆ์— ์•Œ๊ฒŒ ๋œ ๋‚ด์šฉ์„ ํ•œ ๋ฒˆ ์ •๋ฆฌํ•ด ๋ณด๋ ค ํ•œ๋‹ค. 1. ์ƒํƒœ ๊ด€๋ฆฌ๋Š” ๋ถ€๋ชจ์—์„œ ์ด๋ฃจ์–ด์ง€๊ณ , ์ž์‹์—๊ฒŒ props๋กœ ์ „๋‹ฌํ•œ๋‹ค. ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ A์™€ ์ž์‹ ์ปดํฌ๋„ŒํŠธ B,C๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜์ž. ๊ทธ๋ ‡๋‹ค๋ฉด ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๋กœ์ง์€ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ A์— ์ž‘์„ฑํ•˜๊ณ  ์ด๋ฅผ ์ž์‹ํ•œํ…Œ props๋กœ ์ „๋‹ฌํ•˜๋ฉด ๋œ๋‹ค. ๋งŒ์•ฝ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ์ƒํƒœ๊ฐ€ ์—…๋ฐ์ดํŠธ๋˜๋Š” ๊ฒƒ์„ ๋ถ€๋ชจํ•œํ…Œ ์ „๋‹ฌํ•˜๊ณ  ์‹ถ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜์ž. (์—ฌ๊ธฐ์„œ ๋ถ€๋ชจ๋Š” SearchResult.tsx์ด๊ณ , ์ž์‹์€ BtmShee..
[React] useState()์— ๋Œ€ํ•ด์„œ
ยท
Frontend
์–ด๋–ป๊ฒŒ ํ•˜๋ฉด React.js์—์„œ ๊ฐ’์ด ๋ฐ”๋€” ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ด์•„์ค„ ์ˆ˜ ์žˆ์„๊นŒ? useState()๋ฅผ ํ™œ์šฉํ•˜๋ฉด React.JS์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅ์‹œ์ผœ ์ž๋™์œผ๋กœ ๋ฆฌ๋ Œ๋”๋ง์„ ์ผ์œผํ‚ฌ ์ˆ˜ ์žˆ๋‹ค. useState() ์ฝ”๋“œ ์˜ˆ์‹œ const data = React.useState();๋ฅผ console.log ์‹œํ‚ค๋ฉด [undefined, f ] -> undefined์™€ ํ•จ์ˆ˜๊ฐ€ ์ ํžŒ ๋ฐฐ์—ด์ด ๋‚˜ํƒ€๋‚œ๋‹ค. undefined๋Š” data์ด๊ณ  f๋Š” data๋ฅผ ๋ฐ”๊ฟ€ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํ•จ์ˆ˜์ด๋‹ค. React.useState() ํ•จ์ˆ˜๋Š” ์ดˆ๊ธฐ๊ฐ’์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰, undefined -> ์ดˆ๊ธฐ๊ฐ’ , f -> ๊ทธ ๊ฐ’์„ ๋ฐ”๊พธ๋Š” ํ•จ์ˆ˜์ด๋‹ค. React.useState() ๋ฐฐ์—ด์—์„œ ๋ณดํ†ต ๋ฐ์ดํ„ฐ์—๋Š” counter์ฒ˜๋Ÿผ ์›ํ•˜๋Š”๋Œ€๋กœ ๋ถ™์ด๊ณ  f๋Š” set ๋’ค์— ๋ฐ์ดํ„ฐ ์ด..