공부/react (13) 썸네일형 리스트형 useSyncExternalStore 훅 알아보기 useSyncExternalStore 📖`useSyncExternalStore`는 외부 상태 store를 React 컴포넌트와 동기화해 concurrent reading(동시 읽기)를 지원할 수 있도록 하는 React Hook입니다. ❗쉽게 설명하면react가 아닌 외부 저장소 (ex. 바닐라 자바스크립트) 값을 읽어드려 외부 저장소 값의 변화를 추적하고, 동시성 상태 변화에 대응할 수 있습니다. 기본 사용법useSyncExternalStore은 세 가지 인자를 받아서 사용합니다.import { useSyncExternalStore } from 'react';import { todosStore } from './todoStore.js';function TodosApp() { const todos = .. 라이브러리 없이 라우터(Router) 만들기 오늘은 `react-router-dom` 라이브러리 없이 라우터를 만들어보면서 라우팅 시스템에 대해 공부해보려고 합니다. 라우팅 시스템 📖라이브러리 없이 라우팅 시스템을 개발하기 위한 2가지 방법이 있습니다. 첫 번째 Fragment 해시(해시 라우터)를 이용하는 방법과두 번째 history API(브라우저 라우터)를 이용하는 방법이 있습니다. history API는 `pushState``popState`메서드가 지원되면서 Fragment 해시를 쓰지 않고도 라우팅 시스템을 개발할 수 있지만 모든 브라우저에서 지원되는 라우터를 개발하기 위해선 아직까지 Fragment 해시 라우터를 사용해야 합니다. 이 포스팅에선 Fragment 해시를 이용해 라우터 구현 방법에 대해 소개하겠습니다. Fragment 해.. React는 Hooks를 배열로 관리하는 이유 React는 Hooks를 배열(`Linked List`)로 관리하고 있습니다. 이는 Hooks를 관리하고 있는 배열에 index로 접근할 수 있다는 뜻이며, 호출 순서에 의존하고 있다는 뜻입니다. Hooks의 내부 관리 방식 📖Hooks는 `컴포넌트의 최상위 레벨` 또는 커스텀 훅에서만 호출할 수 있습니다. 조건문, 반복문 또는 기타 중첩된 함수 내부에서는 훅을 호출할 수 없습니다. 각각 `useState`의 인자로 초기값을 받아 배열 구조분해 할당으로 state 변수와 state 설정자(setter) 함수를 받고 있습니다.function App() { const [value1, setValue1] = useState(''); const [value2, setValue2] = useState(0);.. React 숙련 4 (react-router-dom) react router dom 📖리액트 프로젝트에서 라우팅을 가능하게 하는 라이브러리입니다. 설치 방법yarn add react-router-dom 사용 방법`About``Works``Home``Contact` 4개의 컴포넌트를 만듭니다. 가장 중요하다고 할 수 있는 부분인데요, 브라우저에서 URL을 입력하고 이동했을 때 원하는 페이지 컴포넌트로 이동하게 만드는 부분입니다.import React from "react";import { BrowserRouter, Route, Routes } from "react-router-dom";import Home from "../pages/Home";import About from "../pages/About";import Contact from "../pages.. React 숙련 3 (Memoization) Memoization 📖리렌더링 발생 조건컴포넌트에서 state가 바뀌었을 때컴포넌트가 내려받은 props가 변경되었을 때부모 컴포넌트가 리렌더링 된 경우 자식 컴포넌트 모두최적화리액트에서 리렌더링이 자주 발생한다면 비용적인 측면에서 좋지 않기 때문에 최적화 작업이 필요합니다. 그래서 대표적인 방법으로 아래 3가지 방법이 있습니다. `React.memo` : 컴포넌트를 캐싱`useMemo` : 값을 캐싱`useCallback` : 함수를 캐싱 React.memo📖 1번 컴포넌트가 리렌더링 될 때 2~7번이 모두 리렌더링 됩니다.4번 컴포넌트가 리렌더링 될 때 6~7번이 모두 리렌더링 됩니다. 이 처럼 자식 컴포넌트에서 바뀐 게 없는데 리렌더링 되는 문제를 `React.memo`로 해결할 수 있습니다... React 숙련 2 (react hooks) useState 📖가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가집니다. 사용 방법구조분해할당으로 상태값 `state`와 상태를 변경하는 함수 `setState`를 사용할 수 있습니다.const [state, setState] = useState(initialState); 함수형 업데이트기존 업데이트 방식과 `함수형 업데이트 방식`이 있습니다.// 기존에 우리가 사용하던 방식setState(number + 1);// 함수형 업데이트 setState(() => {}); 함수형 업데이트 방식을 이용하면 setState `() 안에`함수를 넣을 수 있고 인자로 현재의 state를 가져올 수 있습니다. 두 방식의 차이점const [state, setState] = useState(0);onC.. React 숙련 1 (styled-components) CSS-in-JS란? 📖`CSS-in-JS` 방식이란 단어 그대로 자바스크립트 코드로 css 코드를 작성해 컴포넌트를 꾸미는 방식입니다. ❓왜 사용하고 장점은 뭘까요컴포넌트를 꾸미기 위해 css 파일을 만들어 import 하고 `HTML tag`마다 `className`를 넣고 css 코드를 작성하는 것을 반복하는데 조금 불편합니다. 그래서 css-in-js를 사용하면 style을 적용할 때 조건문, 변수 등 다양한 로직을 이용할 수 있습니다. Styled-components 📖리액트에서 `CSS-in-JS` 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지입니다. 사용 방법vscode 터미널에서 아래 명령어를 입력해 패키지를 설치합니다.yarn add styled-components 사용하기imp.. React 입문 6 (DOM, VirtualDOM) DOM이란? 📖DOM (Document Obejct Model)이란 웹 문서의 구조화된 표현인데요 엘리먼트를 tree 형태로 표현한 것이 DOM입니다. 트리의 요소 하나하나를 `노드`라고 합니다. 각 `노드`는 해당 노드에 접근과 제어(DOM 조작)를 할 수 있는 API를 제공합니다.// id가 demo인 녀석을 찾아, 'Hello World!'를 대입해줘.document.getElementById("demo").innerHTML = "Hello World!";// p 태그들을 모두 가져와서 element 변수에 저장해줘const element = document.getElementsByTagName("p");// 클래스 이름이 intro인 모든 요소를 가져와서 x 변수에 저장해줘const x = do.. 이전 1 2 다음
