반응형
[React, Next.js] 렌더링 후 코드 실행을 위한 React Hook, useEffect라는 Hook을 사용해서 컴포넌트가 마운트 됐을 때 (처음 나타났을 때) 제어 코드
React 구성 요소가 렌더링된 후 일부 코드를 실행해야 할때 사용하는 코드이고 useEffect Hook은 다음과 같이 사용된다.
function HookComponent() {
useEffect(() => {
// 렌더링 이후 실행할 코드
});
return (
<div>컴포넌트 HTML 구성부</div>
);
}
위 코드는 렌더링 후(컴포넌트가 마운트 됐을 때, 처음 나타났을 때) L3 주석부분의 코드가 실행된다.
useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣는다.
만약에 deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect 에 등록한 함수가 호출된다.
function HookComponent() {
useEffect(() => {
// 렌더링 이후 실행할 코드
}, []);
return (
<div>컴포넌트 HTML 구성부</div>
);
}
처음 나타났을 때만 L3 주석부분의 코드를 실행하고 싶다면 위 코드와 같이 deps 배열안에 아무것도 넣지 않으면 된다.
반응형
'개발 프레임워크 > Next.js' 카테고리의 다른 글
[React, Next.js] useEffect를 사용해서 값이 변경될 때 코드실행 (0) | 2023.03.17 |
---|---|
[React, Next.js] useEffect를 사용해서 컴포넌트가 사라질 때 코드실행 (0) | 2023.03.17 |
[Next.js] Error: There was an error while hydrating this Suspense boundary. Switched to client rendering (0) | 2023.03.06 |
[Next.js] 개발환경 구축 및 Next.js 13으로 업데이트 (0) | 2023.03.04 |
[React, Next.js] 모달(Modal) 구현_2 (recoil을 통한 제어) (0) | 2023.02.22 |
댓글