본문 바로가기
SMALL

분류 전체보기527

React) 리액트 라우터로 SPA 개발하기 - 라우팅이란, SPA/MPA의 차이, Route 컴포넌트, Link 컴포넌트 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리액트 라우터로 SPA 개발하기 라우팅이란? - 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것 예를 들어, 블로그 애플리케이션을 만든다고 가정하였을 때 아래와 같은 페이지들이 필요할 것입니다. 글쓰기 페이지 포스트 목록 페이지 포스트 상세보기 이처럼 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트를 분리하며 프로젝트를 관리하기 위해 라우팅 시스템이 필요합니다. 리액트의 라우트 시스템을 구축하기 위해선 아래 두 가지 중 선택할 수 있습니다. 리액트 라우터 : 리액트 라우팅 관련 라이브러리 중 가장 오래됐고, 많이 사용함. 컴포넌트 기반으로 라우팅 시스템.. 2022. 11. 22.
React) immer - 사용법 및 useState 함수형 업데이트와 immer 함께 쓰기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. immer - 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용해 불변성을 유지하며 업데이트해주는 라이브러리 리액트는 상태를 업데이트할 때 반드시 불변성을 유지해야합니다. 하지만, 아래와 같이 객체의 구조가 깊어진다면 업데이트하는 것은 굉장히 번거로울 것입니다. immer 사용하지 않을 때 예시 const object = { somewhere: { deep: { inside: 3, array: [1, 2, 3, 4] }, bar: 2 }, foo: 1 }; // somewhere.deep.inside 값을 4로 바꾸기 let nextObject = { ...object, somewhe.. 2022. 11. 21.
React) 컴포넌트 성능 최적화 - react-virtualized (렌더링 최적화) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 컴포넌트 성능 최적화 react-virtualized를 사용한 렌더링 최적화 기존에 만든 일정 관리 웹 애플리케이션에 초기 데이터가 2,500개 등록되어 있습니다. 하지만, 실제 화면에 나오는 일정은 단 9개뿐이고 나머지는 스크롤을 해야만 볼 수 있습니다. 현재 컴포넌트가 처음 렌더링될 때 2,500개 컴포넌트 중 2,491개 컴포넌트는 스크롤하기 전에 보이지 않음에도 불구하고 렌더링이 이루어집니다. 즉, 시스템 자원 낭비라고 볼 수 있습니다. react-virtualized를 사용하면 스크롤되기 전에 보이지 않는 컴포넌트는 렌더링하지 않고 크기만 차지하게끔 해주고, 스크롤되면 해당 .. 2022. 11. 21.
React) 컴포넌트 성능 최적화 - React.memo, useState의 함수형 업데이트, useReducer, 불변성의 중요성(얕은 복사) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 컴포넌트 성능 최적화 React.memo를 사용하여 컴포넌트 성능 최적화 컴포넌트의 리렌더링을 방지하기 위해선 shouldComponentUpdate 라이프사이클을 사용하면 되지만, 함수 컴포넌트에선 라이프사이클을 이용할 수 없습니다. 대신! React.memo 함수를 사용합니다. React.memo - 컴포넌트의 props가 바뀌지 않았다면, 리렌더링 하지 않도록 함 - 함수 컴포넌트의 리렌더링 성능 최적화 TodoListItem.js import React from 'react'; import cn from 'classnames' import { MdCheckBox, MdRemov.. 2022. 11. 20.
React) 컴포넌트 성능 최적화 - React DevTools, 느려지는 원인 분석 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 컴포넌트 성능 최적화 이전에 만들어본 일정 관리 웹 애플리케이션을 기반으로 컴포넌트의 성능을 최적화해보겠습니다. 현재로는 데이터가 적기 때문에 느려지는 것을 체감할 수 없어서 많은 데이터를 렌더링해보겠습니다. 많은 데이터 렌더링하기 App.js import { useState, useRef, useCallback } from 'react'; import TodoInsert from "./components/TodoInsert"; import TodoList from "./components/TodoList"; import TodoTemplate from "./components/Tod.. 2022. 11. 20.
React) 일정 관리 웹 애플리케이션 만들기 - 2 (항목 지우기, 수정하기 기능 구현) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. * 이전 포스팅 참고 https://chanychu.tistory.com/451 React) 일정 관리 웹 애플리케이션 만들기 - 2 (todoList 렌더링, 항목 추가 기능 구현하기) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. * 프로젝트 준비 및 UI 구성은 아래 포스트 참고 https://chanychu.tistory.com/ chanychu.tistory.com 지우기 기능 구현하기 배열 내장 함수 filter 배열의 불변성을 지키면서 배열 원소를 제거해야하는 경우, filter 함수를 사용하면 간.. 2022. 11. 20.
LIST

티스토리툴바