[ React + Material UI ] Issue : findDOMNode is deprecated in StrictMode error

Da-hyeΒ·2021λ…„ 4μ›” 24일
0

Material-UI

λͺ©λ‘ 보기
2/3
post-thumbnail

πŸ’¬ λͺ©μ 

Material UIλ₯Ό μ‚¬μš©ν•˜λ©΄μ„œ μž‘μ€ μ—λŸ¬λ“€μ΄ κ³³κ³³μ—μ„œ 발견 λ˜μ—ˆλŠ”λ°, Select μ»΄ν¬λ„ŒνŠΈ 이용 쀑 처음 λ°œμƒν–ˆλ˜ μ—λŸ¬μ— λŒ€ν•΄ μ–˜κΈ°ν•΄λ³΄κ³ μž ν•œλ‹€.

findDOMNode is deprecated in StrictMode error

πŸš€ ν•΄κ²° 방법

Function Component둜 ν”„λ‘œμ νŠΈλ₯Ό μ§„ν–‰ν•˜μ˜€κ³  이에 λŒ€ν•œ ν•΄κ²° 방법뢀터 λ¨Όμ € μ„€λͺ…ν•˜μžλ©΄,

πŸ“Œ importν•œ ThemeProviderλ₯Ό wrapper tag둜 감싸쀀닀.
πŸ“Œ unstable_createMuiStrictModeThemeλ₯Ό μ‹€ν–‰ν•΄ κ°€μ Έμ˜€λŠ” 리턴 값을 ThemeProvider의 속성 κ°’ theme에 λ„£μ–΄μ€€λ‹€.

Class Componentμ—μ„œλŠ” MaterialUIμ—μ„œ μž‘μ„±ν•œ 글을 톡해 확인할 수 μžˆλ‹€.

https://ko.reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage


❔ λ°œμƒ 이유

였λ₯˜λŠ” ν•΄κ²° λ˜μ—ˆμœΌλ‹ˆ 이제 이유λ₯Ό μ•Œμ•„λ³΄μž.
ν”„λ‘œμ νŠΈ 생성 μ‹œ CRA(create-react-app)을 μ΄μš©ν•˜λ©΄, index.jsλŠ” λ‹€μŒκ³Ό 같이 μƒμ„±λœλ‹€.

μœ„ μ½”λ“œμ—μ„œ μ€‘μš” μ‹œ 봐야할 것은 React.StrictMode νƒœκ·Έμ΄λ‹€.

πŸ”Ž StrictMode λž€?

μ»΄ν¬λ„ŒνŠΈλ“€μ„ λŒ€μƒμœΌλ‘œ 잠재적인 λ¬Έμ œλ“€μ„ μ•Œμ•„λ‚΄κΈ° μœ„ν•œ 검사 도ꡬ이닀. StrictMode νƒœκ·Έλ‘œ 감싸진 μ»΄ν¬λ„ŒνŠΈλ“€μ„ κ²€μ‚¬ν•˜κ²Œ 되며, React 곡식 λ¬Έμ„œμ— λ”°λ₯Έ 검사 κΈ°λŠ₯은 λ‹€μŒκ³Ό κ°™λ‹€.

κΈ°λŠ₯

  • μ•ˆμ „ν•˜μ§€ μ•Šμ€ 생λͺ…μ£ΌκΈ°λ₯Ό μ‚¬μš©ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈ 발견
  • λ ˆκ±°μ‹œ λ¬Έμžμ—΄ ref μ‚¬μš©μ— λŒ€ν•œ κ²½κ³ 
  • ꢌμž₯λ˜μ§€ μ•ŠλŠ” findDOMNode μ‚¬μš©μ— λŒ€ν•œ κ²½κ³ 
  • μ˜ˆμƒμΉ˜ λͺ»ν•œ λΆ€μž‘μš© 검사
  • λ ˆκ±°μ‹œ context API 검사
    ( + 이외에도 ν–₯ν›„ 더 λ§Žμ€ κΈ°λŠ₯이 좔가될 μ˜ˆμ •μ΄λΌκ³  ν•œλ‹€.)

결둠적으둜, ꢌμž₯λ˜μ§€ μ•ŠλŠ” DOMNodeλ₯Ό μ‚¬μš©ν•΄μ„œ λ°œμƒν•œ μ—λŸ¬μ΄λ‹€.

profile
🌱 차근차근, 였래 즐겁게!

0개의 λŒ“κΈ€