자기계발 (19) 썸네일형 리스트형 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.. 19장 모던 자바스크립트 DeepDive 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이며객체는 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조라고 할 수 있다.이때 객체의 상태 데이터를 프로퍼티, 동작을 메서드라 부른다.19.2 상속과 프로토타입자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다. function Circle(radius) { this.radius = radius; this.getArea = function () { return Math.PI * this.radius ** 2; };}const circle1 = new Circle(1);const circle2 = new Circle(2);console.log(circle1.getArea === circle2.g.. React 외부 구현 상태관리와 전역 상태관리의 장점 • React 내부에서 상태를 관리하는 방법React에서 상태 관리는 컴포넌트 내에서 데이터(상태)를 관리하고 업데이트하는 방법입니다. 상태는 컴포넌트가 렌더링하고 유지하는 데이터를 의미하며, 이를 통해 UI가 사용자 상호작용에 따라 동적으로 변경됩니다. 상태 관리를 위해 가장 많이 사용하는 훅(Hook)은 useState와 useReducer, Redux 입니다. • Context API란?Context API는 React에서 전역적으로 데이터를 전달하기 위한 방법입니다. 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하는 대신, Context API를 사용하면 중간 단계의 컴포넌트들을 거치지 않고 필요한 컴포넌트에 데이터를 직접 제공할 수 있습니다.• React 외부에서 상태를 관리하는.. 이전 1 2 3 다음
