useEffect에 관한 질문입니다!

Question

해당 강의에서 product 파일의 index.js에 useEffect를 쓰는데요 useEffect를 쓰지 않고 import { useParams } from " react-router-dom "; import axios from " axios "; import { useEffect } from " react "; function ProductPage () { const { id } = useParams () ; axios . get ( ` https://0433858f-3e14-4d79-b271-b955ae5e953a.mock.pstmn.io/products/ ${ id } ` ) . then ( function ( result ) { console . log ( result ) ; } ) . catch ( function ( error ) { console . error ( error ) ; } ) ; console . log ( " id는 " , id ) ; return < h1 > 상품 상세 페이지 { id } 상품 ; } export default ProductPage ; 이렇게 코딩을 하면 console에 result가 두 번 찍히는데 useEffect를 쓰지 않으면 왜 .then이 두 번 불리는지 잘 이해가 가지 않아서 질문 드립니다!

그랩 · Answer

일반적으로 react 컴포넌트가 초기에 한번 렌더링된 후 props나 state가 변화하면 추가로 렌더링을 하게 됩니다. 여기서 렌더링은 해당 함수안에 있는 코드들이 다시 실행되고 이에 return이 업데이트된다고 보시면 됩니다! 처음에 컴포넌트 렌더링이 된 후 -> useParams()를 통해 id를 받아오면서 id라는 상태값이 업데이트되고 이에 다시 렌더링이됩니다. 그래서 useEffect(동작함수,[])를 통해 처음 렌더링이 될때만 호출되게 하는 방식을 사용한거죠! 만약 특정 state가 변경될 때만 동작을 시키고 싶다? 하면 useEffect의 두번째 인자인 배열 안에 해당 state를 넣어주시면 됩니다! 사실 본 강의에서는 react를 깊게 다루지 않아 컴포넌트에 대한 생애주기(라이프 사이클)을 다루지 않았습니다. 더 궁금하시면 아래 글을 봐보시면 좋을 것 같아요 :) https://krpeppermint100.medium.com/js-useeffect%EB%A5%BC-%ED%86%B5%ED%95%9C-react-hooks%EC%9D%98-lifecycle-%EA%B4%80%EB%A6%AC-3a65844bcaf8