본문 바로가기

JavaScript136

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.
React) 일정 관리 웹 애플리케이션 만들기 - 2 (todoList 렌더링, 항목 추가 기능 구현하기) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. * 프로젝트 준비 및 UI 구성은 아래 포스트 참고 https://chanychu.tistory.com/450 React) 일정 관리 웹 애플리케이션 만들기 - 1 (프로젝트 준비 및 UI 구성) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 프로젝트 준비하기 프로젝트 생성 및 필요한 라이브러리 설치 $ yarn cr chanychu.tistory.com 기능 구현하기 App에서 todos 상태 사용하기 추후 추가할 일정 항목에 대한 상태들은 모두 App 컴포넌트에서 관리합니다. 따라서 App에서 useStat.. 2022. 11. 19.
React) 일정 관리 웹 애플리케이션 만들기 - 1 (프로젝트 준비 및 UI 구성) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 프로젝트 준비하기 프로젝트 생성 및 필요한 라이브러리 설치 $ yarn create react-app todo-app create-react-app을 이용해 프로젝트를 생성해주었습니다. $ cd todo-app $ yarn add sass classnames react-icons 해당 디럭토리로 이동하여 필요한 라이브러리를 설치해줍니다. ※ react-icons 리액트에서 다양하고 예쁜 아이콘을 사용할 수 있는 라이브러리 (SVG 형태로 이루어진 아이콘을 컴포넌트처럼 쉽게 사용) Prettier 설정 코드 스타일을 깔끔하게 정리하기 위해 Prettier를 설정해줍니다. .prettie.. 2022. 11. 19.
React) 컴포넌트 스타일링④ - styled-components 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 컴포넌트 스타일링 styled-components - 자바스크립트 파일 안에 스타일을 선언하는 방식 (CSS-in-JS) 사용을 위해 설치해보겠습니다. $ yarn add styled-components StyledComponent.js import styled, { css } from 'styled-components' const Box = styled.div` /* props로 넣어준 값을 직접 전달 가능 */ background: ${props => props.color || 'blue'}; padding: 1rem; display: flex; `; const Button = s.. 2022. 11. 19.

티스토리툴바