안녕하세요. 루루개발자입니다. 이번에는 리액트에서 기본으로 제공해주는 훅 함수 중 하나인 "useEffect" 에 대해 알아보고자 합니다. 아래 예시 코드들은 리액트의 프레임워크인 Next.js 를 기준으로 작성되었으므로 이 점 참고해주세요. useEffect 란? 리액트(react) 공식 문서에 의하면, useEffect 는 외부 시스템과 컴포넌트를 동기화 할 수 있게 해주는 리액트 훅(hook) 이라고 정의 되어 있습니다. 여기서 말하는 외부 시스템이란, 리액트에 의해 제어 되지 않는 것들을 말합니다. 리액트에 의해 제어 되지 않는 예시는 다음과 같습니다. API 통신 ref 를 이용한 dom 제어 window 전역 객체에 이벤트 리스너 할당 또는 해제 이 밖에도 여러가지가 있겠지만, 대체로 이런 상..

안녕하세요. 루루개발자 입니다. 이번 시간에는 리액트에서 자식 컴포넌트에 전달하는 props 값들의 변화 감지에 대해 테스트를 진행해보려고 합니다. 먼저 부모컴포넌트는 아래와 같이 작성하였습니다. -- index.tsx import { useCallback, useRef, useState } from "react"; import { TestChildComponent } from "../../../src/components-in/test/test-child-component/test-child-component"; const Index = () => { const [name1, setName1] = useState('홍길동'); const name2 = useRef('아이유'); const renderLo..

안녕하세요. 루루개발자 입니다. 요즘은 next.js & react 를 공부해보고 있습니다. 그 중에서도 useEffect 의 호출되는 시점을 직접 테스트해보고자 다음과 같이 코드를 작성하였습니다. import { useEffect } from "react"; const Index = () => { useEffect(() => { console.log('useEffect 호출됨.'); return () => { console.log('useEffect unmount 호출됨.'); }; }, []); return ( ); }; next dev 그리고 next 를 dev 모드로 구동후에 브라우저에서 접근해보면 개발자 도구의 콘솔창에 다음과 같이 표시됩니다. useEffect 는 렌더링 이후에 호출되는 것으로..