๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐ŸŒŒ | WEB DEV/React22

[React] TypeError: destroy is not a function ์›์ธ๊ณผ ํ•ด๊ฒฐ๋ฒ• ์›์ธ์šฐ์„  ํ•ด๋‹น ์—๋Ÿฌ๋Š” useEffect์™€ ๊ด€๋ จ์ด ์žˆ๋‹ค. ์ž์„ธํ•˜๊ฒŒ ์›์ธ์„ ํŒŒ์•…ํ•˜๊ธฐ ์ „์—์•„๋งˆ ์ด ๊ธ€์„ ๋ณด๊ฒŒ๋œ ๋ถ„๋“ค์ด ํ•œ ์‹ค์ˆ˜๋Š” ์•„๋ž˜์˜ 2๊ฐ€์ง€์ผ ํ™•๋ฅ ์ด ๋†’๋‹ค!1. useEffect์—์„œ ํ•จ์ˆ˜๊ฐ€ ์•„๋‹Œ ๋‹ค๋ฅธ ๊ฒƒ์„ ๋ฐ˜ํ™˜2. useEffect(async()=>{},[]) 2๊ฐ€์ง€ ์‹ค์ˆ˜๋Š” ๋ชจ๋‘ useEffect์˜ ์ž˜๋ชป๋œ ์‚ฌ์šฉ์ด๋‹ค.  ํ•ด๊ฒฐ๋ฒ•๊ณผ ์ž์„ธํ•œ ์ด์œ - useEffect์—์„œ ํ•จ์ˆ˜๊ฐ€ ์•„๋‹Œ ๋‹ค๋ฅธ ๊ฒƒ์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฒฝ์šฐ beforeuseEffect(() => myFunction());useEffect(() => { return myFunction() }); afteruseEffect(() => { myFunction() });  ์ด์œ useEffect(() => { ์ดํŽ™ํŠธ ํ•จ์ˆ˜ return { ํด๋ฆฐ์—… ํ•จ์ˆ˜ };}, [์˜.. 2024. 12. 16.
[React] 16. ์ปดํฌ๋„ŒํŠธ ์ „ํ™˜ํšจ๊ณผ ๋ถ€์—ฌํ•ด์ฃผ๊ธฐ ์ด์ „ ๊ธ€ โ–ผ ๋”๋ณด๊ธฐ 0. 2023.05.05 - [๐ŸŒŒ | WEB DEV/React] - [React] 0. React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  & ์ดˆ๊ธฐ ์„ธํŒ… 1. 2023.05.07 - [๐ŸŒŒ | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [๐ŸŒŒ | WEB DEV/React] - [React] 2. state (๋ณ€์ˆ˜, array, object) 2-1. 2023.05.27 - [๐ŸŒŒ | WEB DEV/React] - [React] 2-1. array state ์ •๋ ฌํ•˜๊ธฐ ( .sort()ํ™œ์šฉ) 3. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - [React] 3. ์ปดํฌ๋„ŒํŠธ (Component) 4. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - .. 2024. 1. 13.
[React] 15. React ๋ฉ”๋‰ดํƒญ ๋งŒ๋“ค๊ธฐ (ํด๋ฆญ ์ด๋ฒคํŠธ์— ๋”ฐ๋ฅธ ๋‚ด์šฉ ๋ณ€๊ฒฝ) ์ด์ „ ๊ธ€ โ–ผ ๋”๋ณด๊ธฐ 0. 2023.05.05 - [๐ŸŒŒ | WEB DEV/React] - [React] 0. React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  & ์ดˆ๊ธฐ ์„ธํŒ… 1. 2023.05.07 - [๐ŸŒŒ | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [๐ŸŒŒ | WEB DEV/React] - [React] 2. state (๋ณ€์ˆ˜, array, object) 2-1. 2023.05.27 - [๐ŸŒŒ | WEB DEV/React] - [React] 2-1. array state ์ •๋ ฌํ•˜๊ธฐ ( .sort()ํ™œ์šฉ) 3. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - [React] 3. ์ปดํฌ๋„ŒํŠธ (Component) 4. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - .. 2024. 1. 13.
[React] 14. React์™€ ์„œ๋ฒ„ ์—ฐ๋™ํ•˜๊ธฐ (ajax๋ฅผ ์ด์šฉํ•ด! (get, post) ) ์ด์ „ ๊ธ€ โ–ผ ๋”๋ณด๊ธฐ 0. 2023.05.05 - [๐ŸŒŒ | WEB DEV/React] - [React] 0. React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  & ์ดˆ๊ธฐ ์„ธํŒ… 1. 2023.05.07 - [๐ŸŒŒ | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [๐ŸŒŒ | WEB DEV/React] - [React] 2. state (๋ณ€์ˆ˜, array, object) 2-1. 2023.05.27 - [๐ŸŒŒ | WEB DEV/React] - [React] 2-1. array state ์ •๋ ฌํ•˜๊ธฐ ( .sort()ํ™œ์šฉ) 3. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - [React] 3. ์ปดํฌ๋„ŒํŠธ (Component) 4. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - .. 2024. 1. 12.
[React/JS] setTimeout, setInterval ์€ ์ „ํ˜€ "์‹œ๊ณ„" ํ•˜์ง€ ์•Š์•„ (setTimeout, setInterval ์˜ค๋ฅ˜) ํ”„๋กœ์ ํŠธ์— ์‚ฝ์ž…ํ•  ์Šคํ†ฑ์›Œ์น˜ ๋งŒ๋“ค์–ด ๋†“์•˜๋‹ค. 6์ดˆ๋ฅผ ์„ธ์–ด๋ณด๋Š”๋ฐ ์ด์ƒํ•˜๊ฒŒ ์ฒด๊ฐ ์ƒ 8์ดˆ๋Š” ๋˜๋Š” ๊ฒƒ ๊ฐ™์•˜๋‹ค. ์•„ ์ด๊ฑฐ ์ด์ƒํ•œ๋ฐ?? 1. setInetval์„ ํ™œ์šฉํ•œ ํƒ€์ด๋จธ 1) ์ž‘์„ฑ ์ฝ”๋“œ ๋‚ด๊ฐ€ ์ž‘์„ฑํ•œ ์ฝ”๋“œ๋Š” setInterval์„ ์ด์šฉํ•˜์—ฌ ์ฃผ๊ธฐ์ ์œผ๋กœ ์‹œ๊ฐ„state๋ฅผ ์ฆ๊ฐ€์‹œํ‚ค๋Š” ๋ฐฉ์‹์ด๋‹ค. const [run, setRun] = useState(); //์Šคํ†ฑ์›Œ์น˜start์ƒํƒœ const [time, setTime] = useState(0); //์‹œ๊ฐ„state const intervalRef = useRef(); //์‹œ์ž‘์ƒํƒœ ๊ฐ์ง€ useEffect(()=>{ if(props.start){ setRun(true); } else{ clearInterval(intervalRef.current) setRun(false); .. 2024. 1. 6.
[React] 13. ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ์˜ Lifecycle์™€ useEffect ์ด์ „ ๊ธ€ โ–ผ ๋”๋ณด๊ธฐ 0. 2023.05.05 - [๐ŸŒŒ | WEB DEV/React] - [React] 0. React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  & ์ดˆ๊ธฐ ์„ธํŒ… 1. 2023.05.07 - [๐ŸŒŒ | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [๐ŸŒŒ | WEB DEV/React] - [React] 2. state (๋ณ€์ˆ˜, array, object) 2-1. 2023.05.27 - [๐ŸŒŒ | WEB DEV/React] - [React] 2-1. array state ์ •๋ ฌํ•˜๊ธฐ ( .sort()ํ™œ์šฉ) 3. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - [React] 3. ์ปดํฌ๋„ŒํŠธ (Component) 4. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - .. 2024. 1. 2.
[React] 13. ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ์˜ Lifecycle๊ณผ useEffect ์ด์ „ ๊ธ€ โ–ผ ๋”๋ณด๊ธฐ 0. 2023.05.05 - [๐ŸŒŒ | WEB DEV/React] - [React] 0. React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  & ์ดˆ๊ธฐ ์„ธํŒ… 1. 2023.05.07 - [๐ŸŒŒ | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [๐ŸŒŒ | WEB DEV/React] - [React] 2. state (๋ณ€์ˆ˜, array, object) 2-1. 2023.05.27 - [๐ŸŒŒ | WEB DEV/React] - [React] 2-1. array state ์ •๋ ฌํ•˜๊ธฐ ( .sort()ํ™œ์šฉ) 3. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - [React] 3. ์ปดํฌ๋„ŒํŠธ (Component) 4. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - .. 2024. 1. 2.
[React] 12. Styled-components (+ ํ•œ ์ปดํฌ๋„ŒํŠธ์— cssํŒŒ์ผ ์ ์šฉ๋ฒ•) ์ด์ „ ๊ธ€ โ–ผ ๋”๋ณด๊ธฐ 0. 2023.05.05 - [๐ŸŒŒ | WEB DEV/React] - [React] 0. React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  & ์ดˆ๊ธฐ ์„ธํŒ… 1. 2023.05.07 - [๐ŸŒŒ | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [๐ŸŒŒ | WEB DEV/React] - [React] 2. state (๋ณ€์ˆ˜, array, object) 2-1. 2023.05.27 - [๐ŸŒŒ | WEB DEV/React] - [React] 2-1. array state ์ •๋ ฌํ•˜๊ธฐ ( .sort()ํ™œ์šฉ) 3. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - [React] 3. ์ปดํฌ๋„ŒํŠธ (Component) 4. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - .. 2023. 10. 4.
[React] 11. ๋ผ์šฐํŒ…-3 ์–‘์‚ฐํ˜• ๋ผ์šฐํŒ… ์ด์ „ ๊ธ€ โ–ผ ๋”๋ณด๊ธฐ 0. 2023.05.05 - [๐ŸŒŒ | WEB DEV/React] - [React] 0. React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  & ์ดˆ๊ธฐ ์„ธํŒ… 1. 2023.05.07 - [๐ŸŒŒ | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [๐ŸŒŒ | WEB DEV/React] - [React] 2. state (๋ณ€์ˆ˜, array, object) 2-1. 2023.05.27 - [๐ŸŒŒ | WEB DEV/React] - [React] 2-1. array state ์ •๋ ฌํ•˜๊ธฐ ( .sort()ํ™œ์šฉ) 3. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - [React] 3. ์ปดํฌ๋„ŒํŠธ (Component) 4. 2023.05.28 - [๐ŸŒŒ | WEB DEV/React] - .. 2023. 10. 3.

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”