๊ฐœ๋ฐœ๋ชจ๋“œ์—์„œ useEffect๊ฐ€ 2๋ฒˆ ์‹คํ–‰๋˜๋Š” ๊ฒฝ์šฐ

2023. 8. 30. 15:54ยท react

์—ฌ๋Ÿฌ๋ถ„๋“ค ๋ฆฌ์•กํŠธ์—์„œ useEffect๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ฝ”๋”ฉ์„ ํ•˜๋Š”๋ฐ useEffect๊ฐ€ 2๋ฒˆ ์‹คํ–‰๋˜์–ด ๋‚œ๊ฐ ํ•˜์…จ๋˜ ์ ์ด ์žˆ์œผ์‹ ๊ฐ€์š”?

 

 

์ € ๋˜ํ•œ useEffect์—์„œ ๋ฐ์ดํ„ฐ๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ์ฒ˜๋ฆฌ๋˜์—ˆ๋Š”์ง€ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด ์ฝ˜์†” ์ถœ๋ ฅ์„ ํ•ด๋ณด๋ฉด 2๋ฒˆ์ด ์ถœ๋ ฅ๋˜๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

 

์ด๊ฒƒ์˜ ์ด์œ ๋กœ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

 

1.React StrictMode - CRA์—์„œ React Strict Mode ์—†๊ธฐ

cra๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ–ˆ๋‹ค๋ฉด strict mode๊ฐ€ index.js์— ์ ์šฉ๋˜์–ด ์žˆ์„ ํ…๋ฐ ์ด๊ฒƒ์„ ์ œ๊ฑฐํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

 

2. Next.js์—์„œ React Strict Mode ์—†์• ๊ธฐ

next.config.js์—์„œ reactStrictMode๋ฅผ false๋กœ ๋ฐ”๊ฟ”์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

 

strict ๋ชจ๋“œ๋Š” ์•ˆ์ „ํ•˜์ง€ ์•Š์€ ์ˆ˜๋ช… ์ฃผ๊ธฐ, ๋ ˆ๊ฑฐ์‹œ API ์‚ฌ์šฉ ๋ฐ ๊ธฐํƒ€ ์—ฌ๋Ÿฌ ๊ธฐ๋Šฅ์„ ์‹๋ณ„ํ•˜๋Š” ๋ฐ ๋„์›€์„ ์ค€๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

 

-์ฐธ๊ณ 

https://funveloper.tistory.com/110

 

react ์—์„œ useEffect ๊ฐ€ 2๋ฒˆ ํ˜ธ์ถœ๋˜๋Š” ํ˜„์ƒ (๋‘ ๋ฒˆ ๋ Œ๋”๋ง ๋˜๋Š” ํ˜„์ƒ)

์•ˆ๋…•ํ•˜์„ธ์š”. ๋ฃจ๋ฃจ๊ฐœ๋ฐœ์ž ์ž…๋‹ˆ๋‹ค. ์š”์ฆ˜์€ next.js & react ๋ฅผ ๊ณต๋ถ€ํ•ด๋ณด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ์ค‘์—์„œ๋„ useEffect ์˜ ํ˜ธ์ถœ๋˜๋Š” ์‹œ์ ์„ ์ง์ ‘ ํ…Œ์ŠคํŠธํ•ด๋ณด๊ณ ์ž ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค. import { useEffect

funveloper.tistory.com

 

'react' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[React] useReducer๋ž€? (๊ฐœ๋…๊ณผ use case ์‚ดํŽด๋ณด๊ธฐ)  (2) 2023.10.26
[react] useReducer ํ›…์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž Feat. ์œ ๋ฐ๋ฏธ ๋ฆฌ์•กํŠธ ๊ฐ•์˜  (0) 2023.10.11
[React] ๋ฆฌ์•กํŠธ์—์„œ TypeScript๋ฅผ ์“ธ ๋•Œ ํ•„์š”ํ•œ ๊ฒƒ (feat. useState)  (0) 2023.08.03
[React] react-query ์˜ useQuery ์•Œ์•„๋ณด๊ธฐ  (0) 2023.08.01
[React] Styled-components ์‚ฌ์šฉ๋ฒ•๊ณผ ์œ ์šฉํ•œ ๊ธฐ๋Šฅ๋“ค  (0) 2023.07.28
'react' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • [React] useReducer๋ž€? (๊ฐœ๋…๊ณผ use case ์‚ดํŽด๋ณด๊ธฐ)
  • [react] useReducer ํ›…์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž Feat. ์œ ๋ฐ๋ฏธ ๋ฆฌ์•กํŠธ ๊ฐ•์˜
  • [React] ๋ฆฌ์•กํŠธ์—์„œ TypeScript๋ฅผ ์“ธ ๋•Œ ํ•„์š”ํ•œ ๊ฒƒ (feat. useState)
  • [React] react-query ์˜ useQuery ์•Œ์•„๋ณด๊ธฐ
๊น€ํƒœ์ง„
๊น€ํƒœ์ง„
์„ฑ์žฅํ•˜๊ธฐ ์œ„ํ•œ ๊ธ€์„ ์ž‘์„ฑํ•˜๋ ค๊ณ  ๋…ธ๋ ฅ์ค‘ ์ž…๋‹ˆ๋‹ค
๊น€ํƒœ์ง„
My Dev History๐Ÿ’ป
๊น€ํƒœ์ง„
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (131)
    • ํŒŒ์ด์ฌ (8)
    • ์•Œ๊ณ ๋ฆฌ์ฆ˜ (24)
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ (13)
      • ํ”„๋กœ์ ํŠธ (6)
      • ์ด๋ก  (6)
    • html&css (3)
    • css (6)
    • TIL (6)
    • react (15)
    • ํšŒ๊ณ  (5)
      • ์ฃผ๊ฐ„ํšŒ๊ณ  (2)
    • ๊ฐ•์˜ ์ •๋ฆฌ (3)
      • ์ฝ”๋“œ์ž‡ ๋ฆฌ์•กํŠธ ๊ฐ•์˜ ๋ชจ์Œ (3)
    • ์˜ค๋ฅ˜๋กœ๊ทธ (4)
    • ํ”„๋กœ์ ํŠธ (15)
    • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ (2)
    • Computer Science (4)
      • ๋จธ์‹ ๋Ÿฌ๋‹ (3)
      • ์ปดํ“จํ„ฐ๋„คํŠธ์›Œํฌ (1)
    • ์˜คํ”ˆ์†Œ์Šค (3)
    • ์›น (1)
    • ์ฝ”๋“œ๊ฐœ์„  (1)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ
  • ํƒœ๊ทธ
  • ๋ฐฉ๋ช…๋ก

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • javascript
  • ๊ฐœ๋ฐœ์ž
  • Flappy game
  • ๋ฆฌ์•กํŠธ
  • ์ƒ์†
  • ๊ณต์‹๋ฌธ์„œ
  • initial value
  • react
  • css property
  • ํ”„๋ก ํŠธ์—”๋“œ
  • ์˜คํ”ˆ์†Œ์Šค ๊ธฐ์—ฌ
  • white-space
  • Object
  • redux
  • CSS
  • prototype
  • Recoil
  • ์˜คํ”ˆ์†Œ์Šค
  • ๊ฒŒ์ž„
  • game
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
  • canvas api
  • react icons

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

hELLO ยท Designed By ์ •์ƒ์šฐ.v4.2.2
๊น€ํƒœ์ง„
๊ฐœ๋ฐœ๋ชจ๋“œ์—์„œ useEffect๊ฐ€ 2๋ฒˆ ์‹คํ–‰๋˜๋Š” ๊ฒฝ์šฐ
์ƒ๋‹จ์œผ๋กœ

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

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.