거니의 velog

4. React.memo를 사용하여 컴포넌트 성능 최적화 * 컴포넌트의 리렌더링을 방지할 때는 이전에 배운 shouldComponentUpdate 라는 라이프사이클을 사용하면 된다. 그런데 함수형 컴포넌트에서는 라이프사이클 메서드를 사용할 수 없다. 그 대신 React.memo라는 함수를 사용한다. 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정하여 함수형 컴포넌트의 리렌더링 성능을 최적화해 줄 수 있다. * React.memo의 사용법은 매우 간단하다. 컴포넌트를 만들고 나서 감싸 주기만 하면 된다. TodoListItem 컴포넌트에 다음과 같이 React.memo를 적용해 보자. import React from 'react'; import { MdCheckBoxOutlineBlank..

* 이전에는 학습한 지식을 활용하여 멋진 일정 관리 애플리케이션을 만들어 보았다. 현재까지는 이 애플리케이션을 사용할 때 불편하지 않았다. 추가되어 있는 데이터가 매우 적기 때문이다. 그러나 데이터가 무수히 많아지면, 애플리케이션이 느려지는 것을 체감할 수 있을 정도로 지연이 발생한다. * 이번 실습은 다음과 같은 흐름으로 진행한다. 1. 많은 데이터 렌더링하기 * 우선 실제로 랙(lag)을 경험할 수 있도록 많은 데이터를 렌더링해 보자. 물론 데이터를 하나하나 직접 입력하지 않고 코드를 사용하여 쉽게 추가할 수 있다. * App 컴포넌트를 다음과 같이 수정해 보자. import React, { useCallback, useRef, useState } from 'react'; import TodoTemp..

(3) 지우기 기능 구현하기 * 이번에는 지우기 기능을 구현해 보겠다. 리액트 컴포넌트에서 배열의 불변성을 지키면서 배열 원소를 제거해야 할 경우, 배열 내장 함수인 filter를 사용하면 매우 간편하다. [1] 배열 내장 함수 filter * filter 함수는 기존의 배열은 그대로 둔 상태에서 특정 조건을 만족하는 원소들만 따로 추출하여 새로운 배열을 만들어 준다. * 다음 코드 예제를 한번 확인해 보자. const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const biggerThanFive = array.filter(number => number > 5); console.log(biggerThanFive); // 결과 : [6, 7, 8, 9, 10] * filte..

3. 기능 구현하기 * 이제 일정 관리 애플리케이션이 실제로 동작할 수 있도록 기능을 구현해 보자. (1) App에서 todos 상태 사용하기 * 나중에 추가할 일정 항목에 대한 상태들은 모두 App 컴포넌트에서 관리한다. App에서 useState를 사용하여 todos라는 상태를 정의하고, todos를 TodoList의 props로 전달해 보자. import React, { useState } from 'react'; import TodoTemplate from './components/TodoTemplate'; import TodoInsert from './components/TodoInsert'; import TodoList from './components/TodoList'; const App =..

2. UI 구성하기 * 앞으로 만들 컴포넌트를 하나하나 용도별로 소개하겠다! 1. TodoTemplate : 화면을 가운데에 정렬시켜 주며, 앱 타이틀(일정 관리)을 보여 준다. children으로 내부 JSX를 props로 받아 와서 렌더링해 준다. 2. TodoInsert : 새로운 항목을 입력하고 추가할 수 있는 컴포넌트이다. state를 통해 인풋의 상태를 관리한다. 3. TodoListItem : 각 할 일 항목에 대한 정보를 보여 주는 컴포넌트이다. todo 객체를 props로 받아 와서 상태에 따라 다른 스타일의 UI를 보여 준다. 4. TodoList : todos 배열을 props로 받아 온 후, 이를 배열 내장 함수 map을 사용해서 여러 개의 TodoListItem 컴포넌트로 변환하여..

* 지금까지 리액트의 기본기부터 시작해서 컴포넌트를 스타일링하는 방법까지 배워 보았다. 이 장에서는 지금까지 배운 지식을 활용하여 프론트엔드를 공부할 때 많이 구현하는 일정 관리 애플리케이션을 만들어 볼 것이다. * 이번 실습은 다음 흐름으로 진행한다. 1. 프로젝트 준비하기 (1) 프로젝트 생성 및 필요한 라이브러리 설치 * create-react-app을 사용하여 프로젝트를 생성해 보자. $ yarn create react-app todo-app * 프로젝트가 생성되면 todo-app 디렉터리로 들어가서 yarn을 사용하여 필요한 라이브러리를 설치하자. $ cd todo-app $ yarn add node-sass classnames react-icons * 이 프로젝트에서 Sass를 사용할 예정이므..

4. styled-components * 컴포넌트 스타일링의 또 다른 패러다임은 자바스크립트 파일 안에 스타일을 선언하는 방식이다. 이 방식을 'CSS-in-JS'라고 부르는데, 이와 관련된 라이브러리는 정말 많다. 라이브러리의 종류는 다음 주소에서 확인할 수 있다. https://github.com/MicheleBertoli/css-in-js GitHub - MicheleBertoli/css-in-js: React: CSS in JS techniques comparison React: CSS in JS techniques comparison. Contribute to MicheleBertoli/css-in-js development by creating an account on GitHub. githu..

3. CSS Module * CSS Module은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값, 즉 [파일 이름]_[클래스 이름]_[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술이다. CSS Module을 사용하기 위해 구버전(v1)의 create-react-app에서는 웹 팩에서 css-loader 설정을 별도로 해 주어야 했지만, v2 버전 이상부터는 따로 설정할 필요 없이 .module.css 확장자로 파일을 저장하기만 하면 CSS Module이 적용된다. * CSSModule.module.css라는 파일을 src 디렉터리에 생성하여 다음과 같이 한 번 작성해 보자. /* 자동으로 고유해질 것이므로 흔히 사용되는 단어를 클래스 이름으로 마..

* 리액트에서 컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있다. 여러 방식 중에서 딱히 정해진 방식이란 없다. 회사마다 요구하는 스펙이 다르고, 개발자마다 각자 취향에 따라 선택하기 때문이다. 이 장에서는 어떠한 방식이 있는지 알아보고, 자주 사용하는 방식을 하나하나 사용해 보도록 하겠다. * 이 장에서 알아볼 스타일링 방식은 다음과 같다. - 일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식이다. - Sass : 자주 사용되는 CSS 전처리기(pre-proccessor)중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있게 해 준다. - CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유..

4. useMemo * useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 먼저 리스트에 숫자를 추가하면 추가된 숫자들의 평균을 보여 주는 함수형 컴포넌트를 작성해 보자. * src 디렉터리에 Average.js 파일을 생성하고 다음의 코드를 작성해 보자. import React, { useState } from "react"; const getAverage = (numbers) => { console.log("평균값 계산 중..."); if (numbers.length === 0) return 0; const sum = numbers.reduce((a, b) => a + b); return sum / numbers.length; }; const Average = () ..