분류 전체보기 (55) 썸네일형 리스트형 React Developer Tools를 활용한 React 애플리케이션 성능 최적화 • debounce의 개념과 사용법 •throttle의 개념과 사용법 • debounce와 throttle의 차이점 import React, { useState } from 'react';import './App.css';function App() { const [query, setQuery] = useState(''); const handleChange = (event) => { setQuery(event.target.value); console.log('검색 쿼리:', event.target.value); }; return ( debounce와 throttle을 이용한 검색 Debounce.. 번들링과 코드스플리팅 •번들링이란? •코드스플리팅이란? •React.lazy와 Suspense를 이용한 코드 스플리팅 import React from 'react';import './App.css';import TestComponent from './TestComponent';/*- **기본 요구 사항**: 1. **동적 로딩 적용**: 1. 주어진 기본 코드를 `React.lazy`와 `React.Suspense`를 활용하여 컴포넌트를 비동기적으로 로드하도록 변경합니다. 2. `TestComponent`를 `React.lazy`를 사용하여 동적으로 로드합니다. 3. `App` 컴포넌트에서 `TestComponent`를 로드할 때 `React.Suspense`로 감싸고, 로딩 상태를.. React Developer Tools를 활용한 React 애플리케이션 성능 최적화 React의 성능을 최적화하는 것은 사용자 경험을 개선하고, 더 나은 코드 품질을 유지하는 데 매우 중요합니다.React Developer Tools는 이러한 최적화를 쉽게 할 수 있게 도와주는 필수적인 도구입니다.이 글에서는 React Developer Tools를 설치하고 설정하는 방법과Profiler 탭을 활용하여 애플리케이션의 성능을 분석하는 방법을 알아보겠습니다. 1. React Developer Tools 설치 및 기본 설정React Developer Tools는 Google Chrome과 Firefox 브라우저에서 사용할 수 있는 확장 프로그램으로,React 애플리케이션을 모니터링, 디버깅하고 최적화하는 데 필수적입니다. Chrome 웹 스토어에 접속하여 "React Developer Too.. 리액트 성능 최적화의 기초: useMemo, useCallback, memo 1. React 클래스형 컴포넌트 생명주기 메서드클래스형 컴포넌트는 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 생명주기 메서드를 사용하여 컴포넌트의 특정 시점에 원하는 작업을 수행할 수 있습니다. componentDidMount 실행 시점: 컴포넌트가 처음으로 DOM에 삽입된 직후용도: 초기 데이터 로드, 이벤트 리스너 등록, DOM 조작 등 초기화 작업componentDidMount() { console.log('컴포넌트가 마운트되었습니다.');} componentDidUpdate 실행 시점: 컴포넌트가 업데이트된 직후용도: 이전과 현재의 상태나 props를 비교하여 추가 작업을 수행할 때 사용componentDidUpdate.. Redux Toolkit으로 전역상태 관리하기 • Redux Toolkit이란 무엇인가요 ?• Redux와 차이점은 무엇인가요? • createSlice(), configureStore() 의 역할 (간단한 사용 예시코드도 함께 작성해 주세요.) • Redux Toolkit에서 Thunk 사용법 → createAsyncThunk()란? Redux로 전역상태 관리하기 • Redux란 무엇인가요 ?• Redux의 데이터 흐름에 대해 설명하기 (flux 패턴) • Action, Dispatch, Reducer, Store의 역할 (간단한 사용 예시코드도 함께 작성해 주세요.) • useDispatch() 와 useSelector()의 역할 • Redux-Thunk란 무엇인가요? Context API Context API란?Context API는 React version 16부터 사용 가능한 리액트의 내장 API이다.앱에서 컴포넌트에게 props를 사용하지 않고 필요한 데이터(state)를 쉽게 공유할 수 있게 해준다. 따라서 앱의 모든 컴포넌트에서 사용할 수 있는 데이터(state)를 전달할 때 유용하다. 언제 Context API를 사용하나요?리액트에서는 부모 컴포넌트에서 자식 컴포넌트에게 props를 통해 데이터를 전달한다. 하지만 중간에 여러 컴포넌트를 거쳐야 하거나 앱의 여러 컴포넌트에서 동일한 데이터를 필요로 하는 경우에는 props로만 해결하기에는 불편하다. 계속 props로 넘겨줘야 하는 prop drilling을 해야만 하기 때문이다. (cf. Props drilling: 중첩된 여러.. React ESLint로 편리하게 코딩하기 React 프로젝트에서 ESLint를 활용하여 코드를 자동으로 포맷팅하고 가독성 있게 만들려면, ESLint와 함께 Prettier를 사용하는 것이 좋습니다. 이 두 도구를 결합하면 코드 저장 시 자동으로 포맷팅되어 일관된 코딩 스타일을 유지할 수 있습니다. 아래는 설정하는 방법입니다.사용하고자 하는 프로젝트에 아래 명령어로 eslint 설치npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier프로젝트 루트에 .eslintrc.json 파일을 만들고 다음 설정을 추가합니다.{ "env": { "browser": true, "es2021": true, "node": true }, "exte.. 이전 1 2 3 4 ··· 7 다음
