Hayo's

1. Install 'Craco' # npm npm i -D @craco/craco # yarn yarn add @caraco/craco 2. Update package.json CRA로 프로젝트를 생성했을 때 default로 생성되는 package.json파일의 "scripts" 부분을 하기와 같이 수정해줘야 합니다. "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "craco eject" } 3. Create craco.config.ts 프로젝트의 root 경로에 craco.config.ts 파일을 생성합니다. // craco.config.ts import path from "path"..

리액트 웹 애플리케이션에서 API가 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 하기 때문에, '리덕스'가 주로 사용된다. 그 중에서도 효율적이고 편하게 비동기 작업에 대한 상태 관리를 하고 싶다면 '미들웨어(Middleware)'를 사용하면 된다. 1. 미들웨어란? 액션과 리듀서 사이의 중간자라고 볼 수 있다. 액션을 디스패치했을 때, 리듀서에서 이를 처리하기 전에 지정된 작업을 실행한다. 미들웨어는 전달받은 액션을 콘솔에 기록하거나, 전달받은 액션 정보를 기반으로 액션을 취소하거나, 다른 종류의 액션을 추가로 디스패치하는 등 여러가지 작업을 할 수 있다. 함수를 반환하는 함수이다. middleware의 구성 store - 리덕스 스토어 인스턴스 next - 파라미터 함수 형태. - st..

1. Context API를 사용한 전역 상태 관리 흐름 이해하기 기존에는 최상위 컴포넌트에서 여러 컴포넌트를 거쳐 props로 원하는 상태와 함수를 전달했지만, Context API를 사용하면 Context를 말들어 단 한 번에 원하는 값을 받아와서 사용할 수 있다. 2. Context API 사용법 익히기 1. 새 Context 만들기 새 Context를 만들 때는 createContext 함수를 사용한다 파라미터에는 해당 Context의 기본 상태를 지정한다 // contexts/color.js import { createContext } from 'react'; const ColorContext = createContext({ color: 'black' }); export default Color..

1. 크롬 개발자 도구를 통한 성능 모니터링 → 리액트 v17부터는 리액트 전용 개발자 도구인 ReactDevTools를 사용하여 자세한 성능 분석이 가능하다. 리액트 개발자 도구의 Profiler 탭 클릭 후 좌측 상단의 파란색 녹화 버튼 클릭 성능 분석하고 싶은 작업 실행 작업 완료 후, 파란색 녹화 버튼을 다시 한번 클릭하면 성능 분석 결과가 나타남 Render duration: 리렌더링에 소요된 시간. **소요 시간은 컴퓨터 환경에 따라 다를 수 있음 Profiler 탭 상단에 있는 랭크 차트 아이콘을 클릭하면, 리렌더링된 컴포넌트를 오래 걸린 순으로 정렬하여 나열해 줌 3. 느려지는 원인 분석 컴포넌트가 리렌더링 되는 상황 자신이 전달 받은 props가 변경될 때 자신의 state가 바뀔 때 부..

Hooks는 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해주는, 리액트 v16.8에 새로 도입된 기능이다. useState 가장 기본적인 Hook 함수 컴포넌트에서 상태 관리를 할 때 사용 하나의 useState 함수는 하나의 상태 값만 관리할 수 있으므로, 컴포넌트에서 여러 개의 상태를 관리해야 한다면 여러 개의 useState를 사용 useEffect 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook 렌더링되고 난 직후마다 실행되며, 두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라짐 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태라고 볼 수 있음 useEffect의 활용 us..

1. LifeCycle Method의 이해 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다 컴포넌트의 수명: 페이지에 렌더링되기 전인 준비 과정에서 시작→ 페이지에 사라질 때 끝남 라이프사이클 컴포넌트는 클래스형 컴포넌트에서만 사용할 수 있다 함수형 컴포넌트에서는 Hooks 를 사용하여 비슷한 작업을 처리할 수 있다 라이프사이클 메서드의 종류는 총 9가지가 있다 Will 접두사가 붙은 메서드 - 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드 - 어떤 작업을 작동한 후에 실행되는 메서드 이 메서드 들은 컴포넌트 클래스에서 덮어 써 선언함으로써 사용할 수 있다 라이프사이클은 총 3가지, Mount, Update, Unmount 카테고리로 나눈다 Mount - DOM이 생..

ref (reference) 란? HTML 에서 id를 사용하여 DOM에 이름을 다는 것 처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법 리액트 컴포넌트 안에서도 id를 사용할 수 있긴 하지만, id를 달아놓은 컴포넌트를 여러 번 사용할 경우 중복 id를 가진 DOM이 여러 개가 생기게 되므로 잘못된 사용이다! 반면에, ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 위의 id와 같은 문제가 발생하지 않는다. 1. ref는 어떤 상황에서 사용해야 할까? → DOM을 꼭! 직접적으로 건드려야 할 때 state를 사용하여 많은 기능을 구현할 수 있지만, state만으로 해결할 수 없는 기능들을 구현할 때 === DOM에 직접적으로 접근해야 할 때, ref를 사용한다. 특정 in..

1. JSX 란? JavaScript의 확장 문법이다 JavaScript의 모든 문법이 포함되어 있음 BUT, 공식적인 JavaScript 문법은 아니다. Babel에서 여러 문법을 지원할 수 있도록 preset, plugin을 설정해 주어야 함. XML과 비슷하게 생김 - tag가 비어있다면 /> 으로 꼭 닫아줘야 한다 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 Babel에 의해 일반 JavaScript 형태의 코드로 변환된다 Babel은 JSX를 React.createElement() 호출로 컴파일한다. const element = ( Hello, world! ); const element = React.createElement( 'h1', {className: 'greeting'}, '..