이번장에서는 리덕스를 사용하여 리액트 애플리케이션 상태를 관리하는 방법에 대해 알아보겠습니다. 소규모 프로젝트에서는 컴포넌트가 가진 state를 사용하는 것만으로도 충분하지만 프로젝트의 규모가 커짐에 따라 상태 관리가 복잡해질 수 있습니다. 리덕스를 사용하여 상태 관리를 하면 다음과 같은 장점이 있습니다. 1. 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있어 코드를 유지보수 하는데 도움이 됩니다. 2. 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 유용합니다. 3. 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화할 수 있다. 이번 실습의 흐름은 다음과 같습니다. 프로젝트 준비 → 프레젠테이셔널 컴포넌트 작성 → 리덕스 관련 코드 작성 → 컨테이너 컴..

22-23/22-23 리액트 스타터 1 2023. 1. 12. 10:01

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리입니다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있습니다. 또한, 컴포넌트끼리 같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있습니다. 리덕스 라이브러리는 전역 상태를 관리할 때 효과적입니다. 코드의 유지 보수성을 높이고, 작업 효율을 극대화할 수 있습니다. 리덕스는 편리한 개발자 도구를 지원하고 미들웨어 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있습니다. 이전 장에서 배운 Context API로 같은 작업을 할 수 있습니다. 단순히 전역 상태 관리만 요구된다면 Context API를 사용하는 것으로 충분합니다. ..

22-23/22-23 리액트 스타터 1 2023. 1. 12. 10:00

이번 13장에서는 리액트 라우터로 SPA를 개발하는 방법에 대해서 알아보고자 합니다. ​ 13.1 SPA란? Single Page Application의 약자인 SPA는 한 페이지로 이루어진 애플리케이션을 의미합니다. 서버에서 사용자에게 제공하는 화면은 한 종류지만, 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면 가질 수 있습니다. 이전에 만든 todo-list 웹 애플리케이션을 사례로 보면, 홈, 포스트 목록, 포스트 등 여려 화면을 볼 수 있었습니다. 사용자에게 보이는 화면을 서버가 준비하는 전통적인 웹 페이지와 달리, 리액트 같은 라이브러리 혹은 프레임워크를 사용하는 방법이 있습니다. 좀 더 구체적으로 이를 설명하면 아래와 같습니다. 뷰 렌더링 -> 사용..

22-23/22-23 리액트 스타터 1 2023. 1. 5. 10:00

전개 연산자와 배열의 내장 함수를 이용해 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어쓸 수 있습니다. 그러나 객체 구조가 엄청나게 깊어지면 불변성을 유지하며 이를 업데이트하기 어렵습니다. 이번 장에서는 immer라는 라이브러리를 사용하여 구조가 복잡한 객체도 쉽고 짧은 코드로 불변성을 유지하면서 업데이트하는 것을 배워보도록 하겠습니다. 12.1 immer를 설치하고 사용법 알아보기 immer 라이브러리를 사용하기 위해서는 yarn을 통해 설치해야 합니다.이번 예제로 쓸 리액트 프로젝트와 함께 immer을 설치해 주세요. $ yarn create react-app immer-tutorial $ cd immer-tutorial $ yarn add immer 위와 같이 폼에서 아이디와 이름을 입력하면..

22-23/22-23 리액트 스타터 1 2022. 12. 29. 10:01

지난 장에서 학습한 내용을 활용해 애플리케이션을 만들었습니다. 데이터가 적을 때 사용하는 것은 불편하지 않지만, 데이터가 무수히 많아지면 지연이 발생하여 애플리케이션이 느려질 것입니다. 이번 실습에서는 이를 해결하는 과정을 다룹니다. 이번 장에서는 많은 데이터를 렌더링하고, 크롬 개발자 도구로 성능을 모니터링하고, React.memo를 통해 컴포넌트 리렌더링 성능을 최적화하고, onToggle과 onRemove가 새로워지는 현상을 방지하고, react-virtualized를 사용하여 렌더링을 최적화하겠습니다. 11.1 많은 데이터 렌더링하기 우선 지연을 발생시키도록 많은 데이터를 렌더링하겠습니다. App 컴포넌트를 수정합니다. //App.js import { useState, useRef, useCall..

22-23/22-23 리액트 스타터 1 2022. 12. 29. 10:00

이번 10장에서는 컴포넌트의 일정관리 웹 애플리케이션에 대해서 알아보고자 합니다. 지금까지 배운 이론을 바탕으로 실제로 사용 가능한 웹 용 애플리케이션을 만들어 봅시다. 10.1 프로젝트 준비하기 이전의 이론을 바탕으로 애플리케이션을 생성하기에 앞서, 라이브러리 설치 및 기타 프로그램 설정과 생성이 필요합니다. 이를 단계별로 나누어 알아봅시다. 1) 라이브러리 몇 가지를 다운로드합니다. 명령프롬포트 창 등을 통해 라이브러리를 설치하면 되는데, 설치할 라이브러리는 우선 3가지입니다. SASS CLASSNAMES (편리한 조건부 스타일링 제공) REACT-ICONS (다양한 SVG 아이콘 제공) 2) Prettier 설정을 합니다. 2장에서 Prettier에 대해 학습했었습니다. 이를 참고해서 프로젝트를 만..

22-23/22-23 리액트 스타터 1 2022. 12. 22. 10:00

리액트에서는 다양한 방식으로 컴포넌트를 스타일링할 수 있습니다. 이번 장에서는 자주 사용하는 4가지 방식을 알아보도록 하겠습니다. 먼저 이번 예시에서는 create-react-app을 이용해 새로운 프로젝트를 만듭니다. styling-react 프로젝트를 만들고 열어주세요. $ yarn create react-app styling-react $ cd styling-react $ yarn start 9.1 가장 흔한 방식, 일반 CSS 기존의 CSS 스타일링에 불편을 겪지 않고, 새로운 기술을 배우고 싶지 않다면 일반 CSS를 계속 사용해도 괜찮습니다. 실제로 소규모 프로젝트에서는 새로운 스타일링 시스템을 적용하는 것이 불필요할 수도 있습니다. 방금 만든 프로젝트에는 App.js 파일과 App.css 파일..

22-23/22-23 리액트 스타터 1 2022. 12. 1. 10:00

이번 8장에서 다룰 Hooks는 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업(함수 컴포넌트에서 상태 관리하기, 렌더링 직후 작업 설정하기 등)을 할 수 있게 합니다. 이는 리액트 v16.8에 새로 도입되었습니다. 이번 장에서 리액트 내장 Hooks를 사용하고 커스텀 Hooks를 만들어봅시다. 실습을 위하여 create-react-app을 이용해 새로운 프로젝트를 생성합시다. $ yarn create react-app hooks-tutorial 8. 1 useState 3장에서 사용하였던 useState는 가장 기본적인 Hook이며 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 합니다. 함수 컴포넌트에서 상태를 관리해야 할 때 이 Hook을 사용하면 됩니다. 이 useState를 사용하여 숫자 ..

22-23/22-23 리액트 스타터 1 2022. 11. 24. 10:00

이번 7장에서는 컴포넌트의 라이프사이클 메서드에 대해서 알아보고자 합니다. ​ ​ ​ 모든 리액트 컴포넌트에는 라이프사이클-수명 주기-가 존재하는데, 이는 컴포넌트 상태의 변화가 있을 때부터 실행하는 함수로서, 컴포넌트의 수명은 페이지 렌더링 전부터, 페이지의 삭제까지입니다. ​ 그런데, 리엑트 프로젝트를 진행하다 보면, 이러한 컴포넌트의 수명주기에 개입해 조작해야 하는 경우가 생길 수 있습니다. 가령 컴포넌트의 업데이트 전후에 추가 작업 처리를 만들거나, 특정 업데이트를 방지하는 경우처럼요. ​ 이러한 상황을 위해, 컴포넌트의 라이프사이클 메서드가 이용됩니다. 라이프사이클 메서드의 특징 중 하나는, 함수형 컴포넌트에는 사용 불가능하고, 클래스형 컴포넌트에서만 사용할 수 있다는 점입니다. ​ ​ ​ 7...

22-23/22-23 리액트 스타터 1 2022. 11. 17. 10:00

이번 장에서는 반복되는 코드를 효율적으로 보여주고 관리하는 방법에 대해 배워보겠습니다. 0. 자바스크립트 배열의 내장 함수 자바스크립트에서는 배열을 다룰 수 있는 유용한 내장 함수들이 있습니다. forEach : 배열의 각 요소들에게 일관된 작업을 수행할 수 있습니다. 사용법 - 배열명.forEach(파라미터) map : 배열 안의 모든 원소를 변환할 때 사용됩니다. 사용법 - 배열명.map(파라미터) filter : 배열에서 특정 조건을 만족하는 값들을 분류하여 새 배열을 만듭니다. 사용법 - 배열명.filter(파라미터) push : 배열의 맨 뒷부분에 요소를 추가합니다. 사용법 - 배열명.push(파라미터) pop : 배열의 맨 뒤 요소 하나를 반환하고 제거합니다. 사용법 - 배열명.pop() co..

22-23/22-23 리액트 스타터 1 2022. 11. 10. 10:00

5장 ref: DOM에 이름달기 public/index.html 파일의 div 태그의 id가 root로 설정되어 있습니다. 이처럼 id를 사용하면 특정 DOM 요소에 대하여 쉽게 접근하여 처리할 수 있습니다. 이렇게 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼, 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 ref(reference)입니다. 5.1 ref는 어떤 상황에서 사용해야 할까? ref는 DOM을 직접적으로 건드려야 할 때 사용해야 합니다. 예로 클래스형 컴포넌트에서 ref를 사용하는 방법을 알아봅시다. 5.1.1 예제 컴포넌트 생성 src 디렉터리 안에 ValidationSample.css와 ValidationSample.js 파일을 생성해봅시다. /*ValidationSam..

22-23/22-23 리액트 스타터 1 2022. 11. 5. 10:00

4장 이번장에서는 이벤트를 다루는 방법에 대해서 알아봅니다. ​ ​ ​ ​ HTML에서 DOM 요소에 이벤트를 설정하는 방법은 아래의 코드와 같습니다. alert함수를 이용해서 메시지 박스를 띄우는 방법으로, 이벤트를 실행하면 "" 사이의 자바스크립트를 실행하는 것이 특징입니다. click me 4.1.1 이벤트를 사용할 때 주의 사항 카멜 표기법 함수 형태 값 전달 (자바스크립트 코드 전달X) : HTML과의 차이점 DOM 요소에만 이벤트 설정 가능 (개발자가 직접 만든 컴포턴트에 자체 이벤트 설정 불가) 전달받은 props를 컴포넌트 내부 DOM 이벤트로 설정 4.1.2. 이벤트 종류 다양한 이벤트가 존재하지만, 책에서는 일부만을 다룹니다. Clipboard Composition Keyboard Fo..

22-23/22-23 리액트 스타터 1 2022. 10. 13. 10:00