- [ react & next.js ]리액트 렌더링 시점 및 훅 호출 순서 확인해보기2022-05-16 08:00:15안녕하세요. 루루개발자 입니다. 요즘 한창 리액트 렌더링 시점과 훅 호출 순서 등에 대한 테스트를 진행해보고 있는데, 테스트 과정 및 결과를 공유드리고자 합니다. 먼저 다음과 같은 파일 및 코드가 있다고 가정해봅시다. -- 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 & next.js ]react 에서 useEffect 가 2번 호출되는 현상 (두 번 렌더링 되는 현상)2022-05-15 10:21:28안녕하세요. 루루개발자 입니다. 요즘은 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 는 렌더링 이후에 호출되는 것으로..
- [ react & next.js ]리액트에 style 적용하는 방법 2가지2022-05-08 20:28:20안녕하세요. 루루개발자 입니다. 이번 시간에는 리액트에서 style 을 적용하는 방법 2가지에 대해 알아보겠습니다. CSS Module [ 정리해보기 ] 리액트에 css 를 적용하는 방법 중 하나가 CSS Module 방식이라고 합니다. "파일명.module.css" 으로 이름을 짓고, 해당 파일을 다음과 같이 컴포넌트 파일 상단에 import 해주는 방식입니다. 예제 코드는 아래와 같습니다. ul.list { margin: 0; padding: 0; } ul.list > li.item { margin: 0; padding: 0; list-style-type: none; background-color: rgb(0, 255, 140); } ul.list2 { margin: 0; padding: 0; bor..
- [ react & next.js ]리액트 훅(react hook)에 대해2022-05-07 11:01:06안녕하세요. 루루개발자 입니다. 이번 글에서는 react 의 hook에 대해 한번 알아보도록 하겠습니다. 리액트 훅 (react hook) 이란? [ 정리해보기 ] 리액트의 훅은 16.8 버전부터 새로 추가된 기능이라고 합니다. Hook은 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수라고 합니다. Hook은 class 안에서는 동작하지 않으며, 대신 class 없이 React를 사용할 수 있게 해주는 것이라고 합니다. [ 생각해보기 ] 즉, 기존 클래스의 생명주기 메서드를 함수형 방식에서 함수로 사용할 수 있도록 한 것이 훅인 것 같습니다. 상태 값을 초기화 하거나, 변경이 발생했을 때 등의 상황에서 리액..