라우팅 라우팅(Routing)이란 웹 애플리케이션에서 사용자가 URL을 통해 페이지에 접근할 때 해당 URL에 따라 서로 다른 컴포넌트를 보여주는 것을 의미한다. 일반적으로, 브라우저에서 URL을 입력하거나 링크를 클릭하면 URL의 경로(path)와 쿼리(query) 부분을 분석하여 해당하는 컴포넌트를 렌더링한다. 이 과정을 라우팅이라고 한다. 라우팅은 SPA(Single Page Application)를 구현하는 데 필수적이며, SPA는 초기 로딩 시 서버에서 모든 컨텐츠를 불러오는 것이 아니라 필요한 데이터만 가져와 화면을 구성하기 때문에, URL에 따라 다른 화면을 보여주는 라우팅이 필요하다. 또한, 브라우저의 뒤로 가기/앞으로 가기 버튼과 같은 브라우저 기능과의 호환성을 유지하기 위해서도 라우팅이..
리액트에서 불변성을 유지하는 것은 상태를 효율적으로 업데이트하고 컴포넌트의 성능을 최적화하기 위해 중요하다. 불변성을 유지하면 상태를 직접 수정하지 않고 복제본을 만들어 변경하기 때문에, 이전 버전과 새 버전의 상태를 비교해 변경된 부분만 업데이트할 수 있다. readonly 타입스크립트에서는 불변성을 유지하는 가장 일반적인 방법으로 'readonly' 키워드를 사용하는 방법이 있다. 예를 들어, 다음과 같이 Person 타입의 객체를 만들어 불변성을 유지할 수 있다. type Person = { readonly name: string; readonly age: number; } 이렇게 하면 Person 객체의 name과 age 프로퍼티는 읽기 전용(readonly)으로 만들어지기 때문에, 객체의 상태를..
지난 글에서 만들었던 일정 관리 웹 애플리케이션을 통해 성능 최적화를 도모해보고자 한다. 많은 데이터 렌더링 일정 관리 애플리케이션 코드에서 랙을 경험할 수 있도록 많은 데이터를 렌더링해보자. import "./App.css"; import TodoTemplate from "./TodoTemplate"; import TodoInsert from "./TodoInsert"; import TodoList from "./TodoList"; import { useCallback, useRef, useState } from "react"; function createBulkTodos() { const array = []; for (let i = 1; i { const todo = { id: nextId.curre..
프로젝트 준비 먼저, 필요한 라이브러리 및 프로젝트 생성부터 시작해본다. npx create-react-app todo-app --template typescript cd todo-app npm install classnames react-icons sass classnames라이브러리는 조건부 스타일링을 조금 더 편리하게 할 수 있도록 만들어주고, react-icons는 리액트에서 다양한 아이콘을 사용할 수 있는 라이브러리이다. 아이콘의 크기나 색상은 props 혹은 CSS 스타일로 변경해서 사용할 수 있다. 그리고, 여백의 공간을 회색으로 변경해주기 위해 index.css를 약간 수정해준다. /* index.css */ body { margin: 0; padding: 0; background: #e0..
리액트에서 CSS를 사용할 때에는 다양한 방식을 사용할 수 있다. 그 중 알아볼 몇 가지에 대해 나열해보자면 다음과 같다. 일반CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식 Sass : 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용해 CSS 코드를 더욱 쉽게 작성할 수 있도록 해준다. CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션 styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다. 일반 CSS 먼저, 리액트로 처음 프로젝트를 생성하게 되면, 다음과 같은 화..
리액트 Hooks는 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공해 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. useState useState는 함수 컴포넌트에서 상태를 관리할 수 있게 해주는 Hook이다. useState를 사용하면 함수 컴포넌트 내에서 상태를 선언하고, 이를 갱신할 수 있다. useState 기능을 사용해 숫자 카운터를 구현해보자. import React, { useState } from "react"; function Counter() { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다. setVa..
이전 게시글 리액트 라이프사이클 이해하기에 이어서.. 리액트 라이프사이클 이해하기 [react/life cycle/typescript] 리액트는 UI 라이브러리로써, 컴포넌트를 기반으로 한 개발 방식을 채용한다. 이런 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링 되기 전 woongtech.tistory.com 라이프사이클 메서드들을 여러개 사용해서 컴포넌트를 만들어볼 것이다. 컴포넌트 생성 LifeCycleSample 이라는 컴포넌트를 만들 것이다. // src/LifeCycleSample.tsx import React, { useState, useEffect, useRef } from "react"; type LifeCycleSampleProps = ..
리액트는 UI 라이브러리로써, 컴포넌트를 기반으로 한 개발 방식을 채용한다. 이런 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비 과정에서 시작해 페이지에서 사라질 때 끝난다. 리액트 라이프사이클은 컴포넌트가 생성되고, 업데이트되며, 소멸될 때의 상태를 설명하는 메서드이다. 이 메서드들은 컴포넌트가 라이프사이클을 따라서 동작할 수 있도록 도와주는 역할을 수행한다. 라이프사이클 메서드 이해 라이프사이클 메서드의 종류는 크게 3가지 종류로 나눌 수 있다. 마운트 마운트는 컴포넌트가 페이지에 새로 추가될 때 발생하는 단계이다. 이 단계에서는 다음과 같은 메서드가 호출된다. constructor : 컴포넌트가 생성될 때 호출 getDerivedSt..
