디노문경

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 18장 리덕스 미들웨어를 통한 비동기 작업 관리 18장 리덕스 미들웨어를 통한 비동기 작업 관리 리액트 웹 애플리케이션에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 합니다. 예를 들어 요청이 시작되었을 때는 로딩 중임을, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 합니다. 요청이 성공하면 서버에서 받아온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 합니다. 리액트 프로젝트에서 리덕스를 사용하고 있고 이러한 비동기 작업을 관리해야 한다면, '미들웨어'를 사용하여 매우 효율적이고 편하게 상태 관리를 할 수 있습니다. 리덕스 미들웨어: C..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 17장 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 17장 리덕스를 사용하여 상태 관리하기 앞의 16장에서는 리덕스를 사용할 때 스토어의 내장 함수인 store.dispatch와 store.subscribe 함수를 사용했지만 리액트 애플리케이션에서 리덕스를 사용할 때는 store 인스턴스를 직접 사용하기보다는 주로 react-redux라는 라이브러리에서 제공하는 유틸 함수(connect)와 컴포넌트(Provider)를 사용하여 리덕스 관련 작업을 처리합니다. 흐름 1. 프로젝트 준비 (생략) 2. 프레젠테이셔널 컴포넌트 작성 3. 리덕스 관련 코드 작성 4. 컨테이너 컴포넌트 작성 5. 더 편하게 사용하는 방법..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 15장 Context API 16장 리덕스 라이브러리 이해하기 15장 Context API Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능입니다. 흐름 Context API를 사용한 전역 상태 관리 흐름 이해하기 (생략) 기본적인 사용법 익히기 동적 Context 사용하기 Consumer 대신 Hook 또는 static contextType 사용하기 15.2 Context API 사용법 익히기 15.2.1 새 Context 만들기 // contexts/color.js import { createContext } from 'react'; const ColorContext = c..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 14장 외부 API를 연동하여 뉴스 뷰어 만들기 14장 외부 API를 연동하여 뉴스 뷰어 만들기 흐름 비동기 작업의 이해 (생략) axios로 API 호출해서 데이터 받아오기 newsapi API 키 발급받기 뉴스 뷰어 UI 만들기 데이터 연동하기 카테고리 기능 구현하기 리액트 라우터 적용하기 14.2 axios로 API 호출해서 데이터 받아 오기 axios는 현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트입니다. 이 라이브러리의 특징은 HTTP 요청을 Promise 기반으로 처리한다는 점입니다. async, await을 사용하지 않았을 때 import React, { useState } from 're..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 13장 리액트 라우터로 SPA 개발하기 13장 리액트 라우터로 SPA 개발하기 13.1 SPA란? 단일 페이지 애플리케이션(Single Page Application, SPA)는 모던 웹의 패러다임이다. SPA는 기본적으로 단일 페이지로 구성되며 기존의 서버 사이드 렌더링과 비교할 때, 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다는 장점이 있다. link tag를 사용하는 전통적인 웹 방식은 새로운 페이지 요청 시마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링하는 방식을 사용하므로 새로고침이 발생되어 사용성이 좋지 않다. 그리고 변경이 필요없는 부분를 포함하여 전체 페이지를 갱신하므로..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 11장 컴포넌트 성능 최적화 12장 immer를 사용하여 더 쉽게 불변성 유지하기 11장 컴포넌트 성능 최적화 10장에서 멋진 일정 관리 애플리케이션을 만들어보았습니다. 현재까지는 사용할 때 불편하지 않지만 데이터가 무수히 많아지면 애플리케이션이 느려지는 것을 체감할 수 있습니다 흐름 많은 데이터 렌더링하기 크롬 개발자 도구를 통한 성능 모니터링 React.memo를 통한 컴포넌트 리렌더링 성능 최적화 onToggle과 onRemove가 새로워지는 현상 방지하기 react-virtualized를 사용한 렌더링 최적화 11.1 많은 데이터 렌더링하기 import React, { useCallback, useRef, us..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 9장 컴포넌트 스타일링 10장 일정관리 웹 애플리케이션 만들기 9장 컴포넌트 스타일링 리액트에서 컴포넌트를 스타일링할 때는 다양한 방법을 사용할 수 있다. 이 장에서 알아볼 스타일링 방식들 일반 CSS Sass CSS Module styled-components 가장 흔한 방식, 일반 CSS 중요한 것은 CSS 클래스를 중복되지 않게 만드는 것. 중복되는 것을 방지하기 위해서 규칙을 사용하거나 CSS Selector를 활용하면 됨. 규칙 사용: 컴포넌트 이름-클래스 형태로 짓거나 BEM 네이밍 등등.. CSS Selector: ex) .App .logo Sass 사용하기 Sass(Syntactically Awesome..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 7장 컴포넌트 라이프사이클 메서드 8장 Hooks 7장 컴포넌트 라이프사이클 메서드 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 아홉 가지 마운트, 업데이트, 언마운트의 세 가지 카테고리로 나눌 수 있음 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 의미함. 호출되는 메서드 constructor getDerivedStateFromProps render componentDidMount 업데이트 컴포넌트는 다음과 같은 총 네 가지 경우에 업데이트 props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 this.forceUpdate로 강제로 렌더링을 트리거할 때 호출되는 메서드 ge..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 5장 ref: DOM에 이름달기 6장 컴포넌트 반복 5장 ref: DOM에 이름 달기 특정 DOM 요소에 어떤 작업을 해야 할 때 요소에 id를 달면 CSS에서 특정 id에 스타일을 적용하거나 자바스크립트에서도 작업할 수 있습니다. 이렇게 요소에 id를 사용해 이름을 다는 것처럼 리액트에서는 ref(reference)를 사용해 DOM에 이름을 달 수 있습니다. 하지만 대체 '어떤' 작업을 할 때 ref를 사용해야 할까요? 정답은 'DOM을 꼭 직접적으로 건드려야 할 때' 입니다. 예를 들어, 다음과 같이 state만으로는 해결할 수 없는 기능에서는 어쩔 수 없이 ref를 사용해 DOM에 직접적으로 접근해야 합니다. 특..

해당 시리즈는 제목 그대로 김민준님의 '리액트를 다루는 기술'을 요약한 글입니다. 목차 3장 컴포넌트 4장 이벤트 핸들링 3장 컴포넌트 이 장에서는 먼저 클래스형 컴포넌트에 대해 살펴본 뒤, 컴포넌트를 새로 만들고 사용하는 방법을 알아보겠습니다. 그리고 컴포넌트의 속성 값을 지닌 props와 상태 값을 지닌 state를 사용하는 방법도 알아보겠습니다. - 84p 컴포넌트를 선언하는 방식 함수형 클래스형 // 함수형 컴포넌트 import React from 'react'; const App = () => { return ( ); } export default App; // 클래스형 컴포넌트 import React, { Component } from 'react' class App extends Compon..