17.1 작업 환경 설정 $ yarn create react-app react-redux-tutorial $ cd react-redux-tutorial $ yarn add redux react-redux Prettier를 적용하고 싶다면 디렉터리에 다음과 같이 .prettierrc 파일을 작성하세요. { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 } 17.2 UI 준비하기 리액트 프로젝트에서 리덕스를 사용할 때 가장 많이 사용하는 패턴은 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하는 것입니다. 프레젠테이셔널 컴포넌트란 주로 상태 관리가 이루어지지 ..

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

16.1 개념 미리 정리하기 (1) 액션 상태에 어떠한 변화가 필요하면 하나의 객체로 표현되는 액션이란 것이 발생합니다. 액션 객체는 type 필드를 반드시 가지고 있어야 합니다. 이 값을 액션의 이름이라고 생각하면 됩니다. 그리고 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값이며, 작성자 마음대로 넣을 수 있습니다. { type: 'ADD_TODO', data: { id: 1, text: '리덕스 배우기' } } (2) 액션 생성 함수 액션 생성 함수는 액션 객체를 만들어 주는 함수입니다. function addTodo(data) { return { type: 'ADD_TODO', data }; } (3) 리듀서 리듀서는 변화를 일으키는 함수입니다. 액션을 만들어서 발생시키면 리듀서가 ..

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

13.1 라우팅이란? 웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미합니다. 웹 애플리케이션을 만들 때 프로젝트를 하나의 페이지로 구성할 수도 있고, 여러 페이지로 구성할 수도 있습니다. 블로그를 만든다고 가정한다면, 블로그 애플리케이션은 여러 페이지로 구성되어 있습니다. 글쓰기 페이지: 새로운 포스트를 작성하는 페이지 포스트 목록 페이지: 블로그에 작성된 여러 포스트의 목록을 보여주는 페이지 포스트 읽기 페이지: 하나의 포스트를 보여주는 페이지 이렇게 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템입니다. 리액트에서 라우팅 시스템을 구축하기 위해 사용할 ..

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

11장에서는 컴포넌트 업데이트 성능을 어떻게 최적화해야 하는지, 불변성을 유지하면서 상태를 업데이트하는 것이 왜 중요한지 배웠습니다. 전개 연산자와 배열의 내장함수를 사용하면 간단하게 배열과 객체를 복사하고 새로운 값을 덮어쓸 수 있지만, 객체의 구조가 매우 깊어지면 불변성을 유지하면서 이를 업데이트하는 것이 매우 힘듭니다. 이러한 상황에서 immer라는 라이브러리를 사용하면, 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용해 불변성을 유지하면서 업데이트를 해줄 수 있습니다. 12.1 immer를 설치하고 사용법 알아보기 12.1.1 immer 설치 $ yarn add immer 12.1.2 immer를 사용하지 않고 불변성 유지 먼저 immer를 사용하지 않고 불변성을 유지하면서 값을 업데이트하는 컴..

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

10장에서 만든 일정 관리 애플리케이션은 추가되어 있는 데이터가 매우 적기 때문에 아직은 사용하는 데 불편함이 없습니다. 그러나 데이터가 무수히 많아지면, 애플리케이션이 느려지는 것을 체감할 수 있을 정도로 지연이 발생합니다. 따라서 11장에서는 이와 같은 흐름으로 컴포넌트 성능 최적화를 위한 실습을 진행합니다. 많은 데이터 렌더링하기 -> 크롬 개발자 도구를 통한 성능 모니터링 -> react.memo를 통한 컴포넌트 리렌더링 성능 최적화 -> onToggle과 onRemove가 새로워지는 현상 방지하기 -> react-virtualized를 사용한 렌더링 최적화 11.1 많은 데이터 렌더링하기 우선 실제로 랙(lag)을 경험해보기 위해 많은 데이터를 렌더링해 보겠습니다. createBulkTodos ..

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

지금까지 배운 것들을 바탕으로 일정 관리 웹 애플리케이션을 만들어 보도록 하겠습니다. 10.1 프로젝트 준비하기 일정 관리 웹 애플리케이션을 만들기 위한 준비작업을 해보겠습니다. 10.1.1 프로젝트 생성 및 필요한 라이브러리 설치 $ yarn create react-app todo-app $ cd todo-app $ yarn add sass classnames reacct-icons 애플리케이션을 위한 프로젝트를 새로 생성해줍니다. 이번 프로젝트에서는 sass를 이용할 예정이며, classnames를 통해 좀 더 편한 스타일링을 할 예정입니다. 또한, react-icons를 통해서 다양한 아이콘도 사용해 볼 예정입니다. 10.1.2 Prettier 설정 { "singleQuote": true, "sem..

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

9.1 가장 흔한 방식, 일반 CSS CSS를 작성할 때 가장 중요한 점은 CSS 클래스를 중복되지 않게 만드는 것입니다. 이름을 지을 때 특별한 규칙을 사용하거나 CSS Selector를 활용할 수 있습니다. 9.1.1 이름 짓는 규칙 컴포넌트 이름-클래스 형태로 지어집니다. (ex: App-header) BEM 네이밍은 CSS 방법론 중 하나로, 이름을 지을 때 일종의 규칙을 준수하여 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는 방식입니다. (ex: .card__title-primary) .App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-item..

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

Hooks는 리액트 v16.8에 새로 도입된 기능으로, 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업(함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect)을 할 수 있게 해 줍니다. 이번 실습은 우선 리액트 내장 Hooks를 사용하고 다음으로 커스텀 Hooks를 만드는 흐름으로 진행하겠습니다. 실습을 진행하기 위해 create-react-app을 사용하여 새로운 프로젝트를 생성해주세요. $ yarn create react-app hooks-tutorial 8.1 useState 3장에서도 사용해 보았던 useState는 가장 기본적인 Hook이며, 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 줍니다. 만약 함수 컴포넌트에서 상태를 관..

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

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재합니다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다. 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 하는 경우, 또는 불필요한 업데이트를 방지해야 할 때에 컴포넌트의 라이프사이클 메서드를 사용합니다. 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다. 함수 컴포넌트에서는 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있습니다. 7.1 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 9가지입니다. Will 접두사가 붙은 메서드 : 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드 :..

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

코드를 작성하다보면 다음과 같이 반복되는 코드를 작성할 수도 있습니다. import React from ‘react‘; const IterationSample = () => { return ( 떡볶이 마라탕 치킨 초밥 ); }; export default IterationSample; 위의 예시는 li 태그의 반복입니다. 위의 예시는 간단하기에 그냥 li 태그를 반복해서 작성해도 큰 문제가 없지만, 간단한 반복에서 나아가 반복되는 코드들이 많아진다면 코드의 양은 늘어나고 파일의 용량도 증가해 쓸데없는 낭비가 발생할 것 입니다. 이번 6장에서는 반복적인 내용을 효율적으로 보여주고 관리하는 방법에 대해서 설명하도록 하겠습니다. 6.1 자바스크립트 배열의 map() 함수 자바스크립트에서는 배열 객체의 내장 함..

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

5.1 ref는 어떤 상황에서 사용해야 할까? HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있습니다. 바로 ref(reference의 줄임말) 개념입니다 5.1.1 예제 컴포넌트 생성 //ValidationSample.css .success { background-color: lightgreen; } .failure { background-color: lightcoral; } //ValidationSample.js import React, { Component } from 'react'; import './ValidationSample.css'; class ValidationSample extends Component { state = {..

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

4.1 리액트의 이벤트 시스템 이벤트란 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것을 말합니다. 리액트의 이벤트 시스템 사용법은 일반 HTML에서 이벤트를 작성하는 것과 비슷한데, 주의해야 할 몇 가지 사항이 있습니다. 4.1.1 이벤트를 사용할 때 주의 사항 1. 이벤트 이름은 카멜 표기법으로 작성합니다. (예: onClick, onKeyUp) 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다. HTML에서 이벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달합니다. 화살표 함수 문법으로 함수를 만들어 전달하거나, 렌더링 부분 외부에 미리 만들어서 전달해도 됩니다. 3. DOM 요소(div, button..

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