인프런 커뮤니티 질문&답변
작성한 질문수
useEffect에 관한 질문입니다!
작성
·
130
1
해당 강의에서 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} 상품</h1>;
}
export default ProductPage;
이렇게 코딩을 하면 console에 result가 두 번 찍히는데
useEffect를 쓰지 않으면 왜 .then이 두 번 불리는지 잘
이해가 가지 않아서 질문 드립니다!
답변 1
0
그랩
지식공유자
일반적으로 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
이해됐습니다!
너무 친절하게 답변 달아주셔서 감사합니다.
링크도 감사드려요!!!
좋은 하루 되세요ㅎㅎ