[React] useEffect()์— ๋Œ€ํ•ด์„œ
ยท
Frontend/React
useEffect()๋Š” ์ฝ”๋“œ์˜ ์‹คํ–‰ ์‹œ์ ์„ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ํ•จ์ˆ˜์ด๋‹ค. useEffect()๋Š” ๋‘ ๊ฐœ์˜ argument๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”๋ฐ, ์ฒซ ๋ฒˆ์งธ argument๋Š” ์šฐ๋ฆฌ๊ฐ€ ์‹คํ–‰ํ•˜๊ณ  ์‹ถ์€ ์ฝ”๋“œ๊ฐ€, ๋‘ ๋ฒˆ์งธ argument์—๋Š” [] ๋ฐฐ์—ด(dependency)์ด ์žˆ๋‹ค. ๋‘ ๋ฒˆ์งธ argument์— ๋ฌด์—‡์ด ๋“ค์–ด๊ฐ€๋А๋ƒ์— ๋”ฐ๋ผ ์‹คํ–‰ ๊ฒฐ๊ณผ๊ฐ€ ๋‹ฌ๋ผ์ง€๋Š”๋ฐ, 1. ๋นˆ ๋ฐฐ์—ด์„ ๋„ฃ๋Š” ๊ฒฝ์šฐ -> ์ตœ์ดˆ 1ํšŒ ๋žœ๋”๋ง ๋  ๋•Œ๋งŒ ์‹คํ–‰ํ•œ๋‹ค. 2. [a] -> a๊ฐ€ ๋ณ€๊ฒฝ๋  ๊ฒฝ์šฐ๋งŒ ๋žœ๋”๋งํ•œ๋‹ค. 3. [a, b] -> a๋‚˜ b์ค‘ ํ•˜๋‚˜๊ฐ€ ๊ฐ’์ด ๋ณ€๊ฒฝ ๋  ๋•Œ ๋žœ๋”๋งํ•œ๋‹ค. useEffect()๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ถˆํ•„์š”ํ•œ ๋ Œ๋”๋ง๊ณผ ์ž‘์—…์„ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ๋‹ค. ์˜ˆ์‹œ ์ฝ”๋“œ const onChange = (event) => setKeyword(event.target.v..