영벨롭 개발 일지

[ Fetch API ] const url = '요청 보낼 서버 url'; const option = { method: '메소드', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json; charset=utf-8' }, body: JSON.stringify({ //데이터 }), } fetch(url, option) .then((response) => { ... }) Fetch API 는 자바스크립트에서 API를 연동하기 위해 사용됩니다. fetch() 함수는 HTTP response 객체를 래핑한 promise 객체를 반환하여, 프로미스의 후속 처리 메서드인 then을 사용하여 resolve한 객체를 전달받을 수 있습니다. ..

[ 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를 ..

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..