Front-End

리덕스 미들웨어란? 가장 자주 볼 수 있는 그림이 있습니다. 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행합니다. 미들웨어는 액션과 리듀서 사이의 중간자라고 볼 수 있습니다. 리듀서가 액션을 처리하기 전에 미들웨어가 할 수 있는 작업은 여러가지가 있습니다. 1. 액션을 단순히 콘솔에 기록하거나 2. 전달 받은 액션 정보를 기반으로 액션을 아예 취소하거나, 3. 다른 종류의 액션을 추가로 디스패치할 수도 있습니다. 보통 리덕스에서 미들웨어를 사용하는 주된 사용 용도는 비동기 작업을 처리 할 때 입니다. 예를 들어 리액트 앱에서 우리가 만약 백엔드 API 를 연동해야 된다면, 리덕스 미들웨어를 사용하여 처리하곤 하죠. 리덕스 미들웨어는 누구든지 만들어서 사용 할 수 있습..

이 부분이 제일 어렵고 저는 이해가 안되던 부분입니다. 제 공부를 위해 정리하는 것이니 참고용으로만 봐주시유! 1. Context API 리액트에서는 Props와 State는 부모 컴포넌트와 자식 컴포넌트 또는 한 컴포넌트 안에서 데이터를 다루기위해 사용된다. 이 Props와 State를 사용하게 되면 부모 컴포넌트에서 자식 컴포넌트로 즉, 위에서 아래로 한쪽으로 데이터가 흐르게된다. 만약 다른 컴포넌트 쪽에서 한쪽으로 흐르고 있는 데이터를 사용하고 싶을 경우에, 아니면 다른 컴포넌트에서 사용하고 있는 데이터를 현재의 데이터 흐름에 넣고 싶을때는 공통 부모 컴포넌트에 State를 만들고 사용하고자 하는 데이터를 Props를 전달해서 해야한다. 하지만 매번 공통 부모 컴포넌트를 수정하고 Props로 전달하..

1. 비동기적 - 동기적 일을 하다보니 비동기 작업이라는 말을 많이 보게 된다. 비동기 작업에 대해 다시 한번 이해하고 넘어가자. 동기적 작업 요청이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없다. 그 처음에 시작한 요청이 끝나야만 비로소 그 다음 작업을 할 수 있다. 계단형으로 차례로 순서를 기다려야한다 비동기적 작업 웹 애플리케이션이 멈추지 않기 때문에 동시에 여러 가지 요청을 처리할 수 있고, 기다리는 과정에서 다른 함수도 호출할 수 있다. 즉, 중지 상태가 되는 경우가 없어 작업이 즉시 처리한다. 서버 API를 호출할 때 외에도 함수로 하는 경우도 있는데, setTimeout 함수다. function printMe() { console.log('Hello World'..

라우팅!!!!!!!!!이란 ? 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미한다. 프로젝트를 하나의 페이지로 구성할 수도 있고, 여러 페이지로 구성할 수도 있다. 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템입니다. 리액트에서 라우트 시스템을 구축하기 위해 사용할 수 있는 선택지는 크게 두 가지가 있다. ★리액트 라우터(react Router) 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용되고 있습니다. 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있다. ★Next.js 리액트 프로젝트의 프레임워크입니다. Create React App처럼 리액..

불변성을 유지하면서 상태를 업데이트하는 것은 중요한 것을 배웠습니다. 전개 연산자와 배열의 내장 함수를 사용하면 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓸 수 있다. 하지만 객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트 하는 것은 매우 힘들다. 값 하나를 업데이트 하기 위해 코드 열 줄 정도 작성해야 하는데, 이렇게 전개 연산자를 자주 사용한 것은 기존에 가지고 있던 다른 값은 유지하면서 원하는 값을 새로 지정하기 위해서다. immer 이라는 라이브러리를 사용하면, 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트 할 수 있다. 1. immer 사용법 알아보기 먼저 immer을 설치하자. $yarn add immer immer 사용법 im..

데이터가 무수히 많아지면 애플리케이션이 느려지는 것을 체감할 수 있을 정도로 지연이 발생합니다. 성능을 분석해야 할 때에는 느려졌다는 느낌만으로 충분하지 않습니다. 정확히 몇 초가 걸리는지 확인해야 하는데, 이는 React DevTools를 사용하여 측정하면 됩니다. 리액트 개발자 도구의 Components 탭 우측에 Profiler라는 탭을 열어보세요. 좌측 상단에 녹화버튼이 보일건데, 버튼을 누르고, 성능을 확인하고 싶은 기능을 실행 한 후 다시 녹화버튼을 누르면 성능 분석 결과가 나옵니다. 1. 느려지는 원인 분석 컴포넌트는 다음과 같은 상황에서 리렌더링이 발생합니다. 1. 자신이 전달받은 props가 변경될 때 2. 자신의 state가 바뀔 때 3. 부모 컴포넌트가 리렌더링될 때 4. forceU..

✨ 리액트에서 컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있습니다. 여러 방식 중에서 딱히 정해진 방식이란 없습니다. 어떠한 방식이 있는지 알아보고, 자주 사용하는 방식을 하나하나 사용해 보겠습니다. • 일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식입니다. • Sass : 자주 사용되는 CSS 전처리기(pre-processor) 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있도록 해 줍니다. • Css Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션입니다. • styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을..

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수있게 해준다. 그전에 미리 새로운 프로젝트를 생성해봅시다! $yarn create react-app hooks-tutorial 1. useState useState는 가장 기본적인 Hooks다. 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. 만약 함수 컴포넌트에서 상태를 관리해야 한다면 이 Hook를 사용하면된다. // Couter.js import { useState } from 'react'; const Counter = () => { const [..

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. 리액트 프로젝트를 진행하다 보면 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지해야 할 수 있다. 이때는 컴포넌트의 라이프사이클 메서드를 사용한다. 참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다. 함수에서는 사용하지 못하고, Hooks 기능으로 비슷하게 작업할 수 있다. 1. 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 아홉 가지다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드,..

웹 애플리케이션을 만들다 보면 다음과 같이 반복되는 코드를 작성할 때가 있습니다. src 디렉터리에 IterationSample.js라는 코드를 한번 봅시다. // IterationSample.js const IterationSample = () => { return ( 눈사람 얼음 눈 바람 ); }; export default IterationSample; ... 형태가 계속 반복 되는 것을 볼 수 있습니다. 여기서는 4개지만 더 여러 개인 경우 복잡할 수 있습니다. 리액트 프로젝트에서 반복적인 내용을 효율적으로 보여 주고 관리하는 방법을 알아보자. = 1. 자바스크립트 배열의 map() 함수 = 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링 할 수 있습니다. ..