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

안녕하세요. 루루개발자 입니다. 요즘 한창 리액트 렌더링 시점과 훅 호출 순서 등에 대한 테스트를 진행해보고 있는데, 테스트 과정 및 결과를 공유드리고자 합니다. 먼저 다음과 같은 파일 및 코드가 있다고 가정해봅시다. -- index.tsx import { useCallback, useEffect, useState } from "react"; import { AppTestBox } from "../../../src/components/boxes/app-test-box/app-test-box"; import { useTest } from "../../../src/hooks/use-test-hook/use-test.hook"; const Index = () => { const [count, setCount]..

안녕하세요. 루루개발자 입니다. 이번 글에서는 react 의 hook에 대해 한번 알아보도록 하겠습니다. 리액트 훅 (react hook) 이란? [ 정리해보기 ] 리액트의 훅은 16.8 버전부터 새로 추가된 기능이라고 합니다. Hook은 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수라고 합니다. Hook은 class 안에서는 동작하지 않으며, 대신 class 없이 React를 사용할 수 있게 해주는 것이라고 합니다. [ 생각해보기 ] 즉, 기존 클래스의 생명주기 메서드를 함수형 방식에서 함수로 사용할 수 있도록 한 것이 훅인 것 같습니다. 상태 값을 초기화 하거나, 변경이 발생했을 때 등의 상황에서 리액..