반응형 useEffect4 [React, Next.js] useEffect 정리 (마운트, 언마운트, 값 변경) useEffect Hook 정리 1. useEffect를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣는다. 2. deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect 에 등록한 함수가 호출된다. 3. useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup함수라고 부른다. * cleanup함수는 useEffect 에 대한 뒷정리를 해주는 개념으로 렌더링이 될 때, 이전에 남은 함수가 실행되어 메모리 누수가 일어나는 일을 막을 수 있다. 마운트 시에 하는 작업들 - props 로 받은 값을 컴포넌트의 로컬 상태로 설정 - 외부 API 요청 (REST API 등) - 라이브러리 사용 (D3, Video.js 등.. 2023. 3. 18. [React, Next.js] useEffect를 사용해서 값이 변경될 때 코드실행 [React, Next.js] useEffect라는 Hook을 사용해서 값이 변경될 때 제어코드 React 값이 변경될 때, 일부 코드를 실행해야 할때 사용하는 코드 function HookComponent(data) { useEffect(() => { // 렌더링 이후 실행할 코드 console.log('data 값이 설정'); return () => { // 컴포넌트가 사라질 때 실행되는 코드 console.log('data 값이 설정 전'); } }, [data]); return ( 컴포넌트 HTML 구성부 ); } 위 코드는 1. 처음에 페이지가 렌더링 됐을 때 L4의 콘솔이 찍힌다. 2. props로 받은 data값이 변경될 때 L4의 콘솔이 찍힌다. 3. data값이 변경되기 직전에 L7의 콘.. 2023. 3. 17. [React, Next.js] useEffect를 사용해서 컴포넌트가 사라질 때 코드실행 [React, Next.js] useEffect라는 Hook을 사용해서 컴포넌트가 사라질 때 제어코드 React 구성 요소가 사라질 때, 일부 코드를 실행해야 할때 사용하는 코드 function HookComponent() { useEffect(() => { return () => { // 컴포넌트가 사라질 때 실행되는 코드 } }, []); return ( 컴포넌트 HTML 구성부 ); } 위 코드는 컴포넌트가 사라질 때(컴포넌트가 언마운트 될 때) L4주석부분의 코드가 실행된다. 2023. 3. 17. [React, Next.js] useEffect라는 Hook을 사용해서 렌더링 후 코드실행 [React, Next.js] 렌더링 후 코드 실행을 위한 React Hook, useEffect라는 Hook을 사용해서 컴포넌트가 마운트 됐을 때 (처음 나타났을 때) 제어 코드 React 구성 요소가 렌더링된 후 일부 코드를 실행해야 할때 사용하는 코드이고 useEffect Hook은 다음과 같이 사용된다. function HookComponent() { useEffect(() => { // 렌더링 이후 실행할 코드 }); return ( 컴포넌트 HTML 구성부 ); } 위 코드는 렌더링 후(컴포넌트가 마운트 됐을 때, 처음 나타났을 때) L3 주석부분의 코드가 실행된다. useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣는다.. 2023. 3. 17. 이전 1 다음 반응형