리액트 애플리케이션에서 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있어 코드 유지 보수에 도움됩니다. 또한, 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 유용하며, 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화해 줄 수 있습니다. 리액트 애플리케이션에서 리덕스를 사용할 때는 주로 react-redux라는 라이브러리에서 제공하는 유틸 함수(connext)와 컴포넌트(Provider)를 사용하여 리덕스 관련 작업을 처리합니다. 17-1 작업 환경 설정 1. create-react-app으로 새로운 프로젝트 생성 2. 리덕스와 react-redux 라이브러리 설치 $ yarn add redux react-redux 3. .prett..

21-22/21-22 리액트 스타터 -1 2022. 1. 31. 13:01

16.1 개념 미리 정리하기 16.1.1 액션 액션(action): 상태에 어떠한 변화가 필요하면 발생하는 것으로, 이는 하나의 객체로 표현 { type: 'TOGGLE_VALUE' } 액션 객체는 위 코드와 같은 형식으로 이루어져 있습니다. 액션 객체는 type 필드를 반드시 가지고 있어야 하고, 이 값을 액션의 이름이라고 생각하면 됩니다. 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값이며, 개발자 마음대로 넣을 수 있습니다. 다음은 예시 액션입니다. { type: 'ADD_TODO', data: { id: 1, text: '리덕스 배우기' } } { type: 'CHANGE_INPUT', text: '안녕하세요' } 16.1.2 액션 생성 함수 액션 생성 함수(action creato..

21-22/21-22 리액트 스타터 -1 2022. 1. 31. 13:00

13.1 SPA Single Page Application의 약어, 한 개의 페이지로 이루어진 어플리케이션이라는 뜻입니다. 전통적인 웹 페이지는 다음과 같이 구성되어 있었습니다. 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여줍니다. 이후 사용자에게 보이는 화면을 서버 측에서 준비하고, 사전에 html 파일을 만들어 제공하거나, 데이터에 따라 유동적인 html을 생성해 주는 템플릿 엔진을 사용합니다. 그러나 요즘은 웹에서 제공하는 정보가 많이 때문에, 서버 측에서 모든 뷰를 준비하면 성능상의 문제가 발생할 수 있습니다. 또한 html을 서버에 요청할 때, 인터페이스에서 사용하고 있던 상태를 유지하는 것도 번거롭고,..

21-22/21-22 리액트 스타터 -1 2022. 1. 24. 13:00

10장에서 만든 일정 관리 애플리케이션은 데이터가 많지 않아 사용하는 데 불편하지 않았습니다. 그러나 데이터가 무수히 많아지면 애플리케이션이 느려지는 것을 체감할 수 있습니다. 이번 11장에서는 성능을 최적화하는 방법에 대해 알아보겠습니다. 11.1 많은 데이터 렌더링하기 먼저 실제로 랙(lag)을 경험할 수 있도록 많은 데이터를 렌더링해 보겠습니다. 데이터를 일일이 입력하지 않고 코드를 사용하여 추가하겠습니다. App 컴포넌트를 다음과 같이 수정하세요. // App.js import { useState, useRef, useCallback } from 'react'; import TodoTemplate from './components/TodoTemplate'; import TodoInsert from..

21-22/21-22 리액트 스타터 -1 2022. 1. 17. 13:00

12. immer 설치 및 사용법 전개 연산자를 여러 번 사용하는 것은 꽤 번거롭고 가독성 또한 좋지 않습니다. immer 라이브러리를 사용하면, 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트해 줄 수 있습니다. 12.1 immer 설치 $ yarn add immer 12.2 immer 사용하지 않고 불변성 유지 immer를 사용하지 않고 불변성을 유지하면서 값을 업데이트하는 컴포넌트 // App.js import React, {useRef, useCallback, useState } from 'react'; const App = () => { const nextId = useRef(1); const [form, setForm] = useState({name: '', ..

21-22/21-22 리액트 스타터 -1 2022. 1. 17. 13:00

열심히 만든 웹 페이지를 혼자만 보는 것은 아깝겠지요? 이번 글에서는 10장에서 만든 일정 관리 웹 애플리케이션을 Netlify에서 배포하는 방법을 알아보겠습니다. 먼저, 배포하고자 하는 react 프로젝트가 github에 올라가 있어야 합니다. 1. github에 회원가입이 되어 있지 않은 경우에는 먼저 회원가입을 하고, 회원가입이 되어 있다면 새로운 Repository를 생성합니다. 2. Repository name에 원하는 프로젝트명을 입력하고 Create repository를 클릭합니다. 3. 저장소 주소(URL)를 복사하여 터미널에 다음과 같이 코드를 입력합니다. $ git remote add origin $ git add . $ git commit -m "코멘트" - 코멘트의 내용은 자유롭게 ..

21-22/21-22 리액트 스타터 -1 2022. 1. 10. 13:30

이번 10장에서는 일정 관리 애플리케이션을 만들어 보았습니다. 간단하게 컴포넌트 설명 후 코드 첨부하겠습니다. TodoTemplate: 화면을 가운데에 정렬시켜 주며, 앱 타이틀(일정 관리)을 보여줍니다. children으로 내부 JSX를 props로 받아 와서 렌더링해 줍니다. TodoInsert: 새로운 항목을 입력하고 추가할 수 있는 컴포넌트입니다. state를 통해 인풋의 상태를 관리합니다. TodoListItem: 각 할 일 항목에 대한 정보를 보여 주는 컴포넌트입니다. todo 객체를 props로 받아 와서 상태에 따라 다른 스타일의 UI를 보여 줍니다. TodoList: todos 배열을 props로 받아 온 후, 이를 배열 내장 함수 map을 사용해서 여러 개의 TodoListItem 컴포..

21-22/21-22 리액트 스타터 -1 2022. 1. 10. 13:30

컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있지만, 이번에 다룰 스타일링 방식은 다음과 같습니다. 일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식 Sass : 자주 사용되는 CSS 전처리기 중 하나, 확장된 CSS 문법을 사용하여 CSS 코드 작성 CSS Module : 스타일 작성 시, CSS 클래스가 다른 CSS 클래스의 이름과 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션 styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식, 해당 스타일이 적용된 컴포넌트를 제작할 수 있음 9.1 가장 흔한 방식, 일반 CSS 가장 중요한 것은 CSS 클래스를 중복되지 않게 만드는 것입니다. 이를 위한 방식은 2가지가 있는데, 하단에서 다루도록 하겠..

21-22/21-22 리액트 스타터 -1 2022. 1. 3. 13:00

Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줍니다. 8.1 Hooks useState는 가장 기본적인 Hook로, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 줍니다. 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook를 사용하면 됩니다. useState를 사용해서 숫자 카운터를 구현해 봅시다. - Counter.js import React, { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현..

21-22/21-22 리액트 스타터 -1 2021. 12. 27. 13:00

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)가 존재합니다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다. 그럼 컴포넌트의 라이프사이클에 대해 알아볼까요? ※ 참고: 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다. 7.1 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 아홉 가지입니다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드입니다. 라이프사이클은 총 세 가지, 마운트, 업데이트, 언마운트 카테고리로 나눕니다. 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 합니다. 이때 호출하는 메서드는 다음..

21-22/21-22 리액트 스타터 -1 2021. 12. 27. 13:00

이번 장에서는 리액트 프로젝트에서 반복적인 내용을 효율적으로 보여 주고 관리하는 방법을 알아봅시다. 6-1 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링 할 수 있습니다. map 함수는 파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성합니다. arr.map(callback, [thisArg]) callback은 새로운 배열의 요소를 생성하는 함수입니다. 파라미터는 아래 세 가지입니다. currentValue: 현재 처리하고 있는 요소 index: 현재 처리하고 있는 요소의 index 값 array: 현재 처리하고 있는 원본 배열 thisArg(선택 항목): call..

21-22/21-22 리액트 스타터 -1 2021. 11. 29. 13:00

일반적으로 HTML에서 DOM에 이름을 달 때는 id를 사용합니다. id를 달면, 1. CSS에서 특정 id에 스타일 적용하기 2. 자바스크립트에서 특정 id를 작업하기. 두 가지가 모두 가능합니다. 리액트 프로젝트 내부에서 이와 같은 행동을 하기 위해서는, reference의 줄임말인 ref를 사용합니다. 5.1 ref는 어떤 상황에서 사용해야 할까? 'DOM을 꼭 직접 건드려야 할 때' 사용합니다. .success { background-color: lightgreen; } .failure { background-color: lightcoral; } ValidationSample.css import React, { Component } from 'react'; import './ValidationSa..

21-22/21-22 리액트 스타터 -1 2021. 11. 22. 13:00