영벨롭 개발 일지

[ useEffect ] import React, { useEffect } from "react"; useEffect(function, deps); useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook입니다. 첫 번째 인수로 수행하고자 하는 작업을 나타내는 함수를 전달하고, 두 번째 인수로는 검사하고자 하는 dependency 배열을 전달합니다. [ deps X - 렌더링 될 때마다 실행 ] useEffect(() => { console.log("렌더링 될 때마다 한 번만 실행"); }); 만약 deps 인수를 전달하지 않는다면, useEffect 는 해당 컴포넌트가 렌더링 될 때마다 작업을 수행합니다. 다음 코드는 deps 를 전달하지 않았기 때문에, + ..

[ useRef ] import { useRef } from "react"; const refContainer = useRef(initialValue); useRef는 매번 렌더링을 할 때 동일한 ref 객체를 제공합니다. 즉, 리렌더링 하지 않고 가상 DOM에서 컴포넌트의 속성을 조회&조작하고 그 결과물만 실제 DOM으로 전달합니다. useRef는 current 속성을 가지고 있는 ref 객체를 반환하는데, 인자로 넘어온 initialValue를 current 속성에 할당합니다. 이 current 속성은 값을 변경해도 상태를 변경할 때 처럼 리액트 컴포넌트가 리렌더링되지 않고, 컴포넌트가 리렌더링될 때에도 current 속성 값은 유실되지 않습니다. [ 예제1 - 입력창에 자동 focus ] 다음 예제..

[ 메모이제이션 Memoization ] 메모이제이션(Memoization)이란 처음 진행된 연산은 메모리에 기록해 두고, 이미 진행했던 동일한 연산이라면 기록한 값을 가져와 중복 계산을 제거하여 빠른 처리를 가능하게 하는 기술입니다. 리액트의 useCallback, useMemo, React.memo는 모두 메모이제이션을 기반으로 동작합니다. [ useMemo - 값 재사용] import { useMemo } from "react"; const memoizationValue = useMemo(function, deps); useMemo는 값(객체)를 메모이제이션 해줍니다. useMemo는 두 번째 인수로 들어간 deps가 변한다면, 첫 번째 인수로 들어간 함수를 실행하고, 그 함수의 반환 값을 반환합니..

[ Real DOM ] Virtual DOM을 살펴보기 앞서, 원래 브라우저는 어떻게 우리에게 DOM 구조로 보여줬을까요? ★ 실제 브라우저의 렌더링 과정 1. 먼저 브라우저는 서버에게 외부 리소스(html, css, js, img, ...)를 요청하여 그 응답값을 받습니다. 2. 브라우저의 렌더링 엔진은 html과 css를 파싱하여 DOM 트리와 CSSOM 트리를 생성합니다. 3. 브라우저의 렌더링 엔진은 DOM과 CSSOM을 결합하여 Render tree를 생성합니다. 4. 브라우저의 자바스크립트 엔진은 js를 파싱하여 실행합니다. 이때 자바스크립트가 DOM API를 통해 DOM과 CSSOM을 변경할 수 있는데 변경된 트리를 기반으로 Render tree를 재생성합니다. 5. Render tree를 ..

[ 파싱 & 렌더링 ] 브라우저의 렌더링 과정을 살펴보기 앞서 파싱과 렌더링이 무엇인지 살펴보겠습니다. ★ 파싱 parsing 파싱은 구문분석이라고도 할 수 있습니다. 프로그래밍 언어로 작성된 텍스트 문서를 읽어 들여 실행하기 위해, 이 텍스트 문서의 문자열을 토큰으로 분해하고 토큰에 문법적 의미와 구조를 반영하여 파스 트리를 생성하는 과정을 파싱이라고 합니다. 여기서 토큰(token)은 문법적 의미를 갖는 코드의 최소 단위입니다. ★ 렌더링 rendering 렌더링은 HTML, CSS, JavaScript 로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것입니다. [ 브라우저의 렌더링 과정 ] 1. 요청과 응답 렌더링에 필요한 리소스(html, css, js, img, 폰트 파일 등)는 모두 ..

https://iridescent-zeal.tistory.com/212?category=1279256 [React]리액트 라우터 React-Router [ MPA와 SPA ] ★ MPA MPA는 Multiple Page Application으로 여러 개의 페이지로 구성된 웹 어플리케이션을 의미하며 SSR(Server Side Rendering)방식으로 렌더링합니다. MPA는 서버에 새로운 페이지를 요청할.. iridescent-zeal.tistory.com [ 리액트 라우터 설치 ] Link와 useNavigate()를 사용하기 위해선 우선, 리액트 라우터를 설치해야 합니다. // for yarn $ yarn add react-router-dom@6 // for npm $ npm install react..