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

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

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리로, 이를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. 이외에도 Context API를 통해서 전역 상태를 관리할 수 있지만, 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있기 때문에 프로젝트의 규모가 클 경우에는 리덕스를 사용하는 편이 좋다. I. 개념 미리 정리하기 리덕스를 사용하면서 접하게 될 키워드의 개념이다. 1. 액션 상태에 어떠한 변화가 필요하면 액션(action)이 발생한다. 이는 하나의 객체로 표현되며, 액션 객체는 다음과 같은 형식으로 이..

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

I. 라우팅이란? 라우팅: 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것 블로그를 만든다고 가정한다면, 블로그 애플리케이션은 다음과 같은 페이지로 구성되어 있습니다. 글쓰기 페이지: 새로운 포스트를 작성하는 페이지 포스트 목록 페이지: 블로그에 작성된 여러 포스트의 목록을 보여주는 페이지 포스트 읽기 페이지: 하나의 포스트를 보여주는 페이지 이렇게 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템입니다. 리액트에서 라우팅 시스템을 구축하기 위해 사용할 수 있는 선택지는 크게 두 가지가 있습니다. 리액트 라우터(React Router) : 리액트의 라우팅 관련 라이브러리 중 가장 오래되고 가장 많..

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

앞선 단원에서 전개 연산자와 배열의 내장 함수를 사용하여 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓰는 것을 배웠습니다. 하지만 객체의 구조가 깊어진다면 불변성을 유지하면서 업데이트하는 것은 힘든 일입니다. 이러한 상황에 immer라이브러리를 사용해볼 수 있습니다. 이번 단원에서는 다음과 같은 순서로 진행합니다. immer 설치 immer 사용법 App 컴포넌트에 immer 적용하기 useState의 함수형 업데이트와 immer 함께 쓰기 I. immer 설치 및 사용법 알아보기 1. immer 설치 $ yarn add immer 2. immer 사용법 immer라이브러리를 사용하면 불변성을 유지하면서 간단하게 값을 업데이트할 수 있습니다. import produce from 'immer'; cons..

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

데이터가 무수히 많아지면 앱 속도가 느려지는 것을 체감할 정도의 지연이 발생한다. I. 많은 데이터 렌더링하기 => App 컴포넌트를 다음과 같이 수정하여 데이터를 추가하면 랙(lag)이 발생한다. createBulkTodos 함수를 만들어 2500개의 데이터를 자동 생성한다. //App.js function createBulkTodos() { const array = []; for(let i=1;i { const [todos, setTodos] = useState(createBulkTodos); const nextId = useRef(2501); (...) }; export default App; 주의할 점은 useState의 기본값에 함수를 넣어 주었다는 것이다. useState( createBulk..

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

우리는 이전의 단원들을 통해 리액트의 기본기부터 컴포넌트를 스타일링하는 방법까지를 배웠습니다. 지금까지 배운 내용을 활용하여 프런트 엔드를 공부할 때 자주 구현하는 일정관리 애플리케이션을 만들어보겠습니다. 이번 실습은 다음과 같은 순서로 진행됩니다. 프로젝트 준비하기 UI 구성하기 기능 구현하기 I. 프로젝트 준비하기 1. 프로젝트 생성 및 필요한 라이브러리 설치 일정 관리 애플리케이션을 만들기위해 터미널에 create-react-app을 사용한 명령어를 입력하겠습니다. 또한 프로젝트가 생성되면 todo-app 디렉터리로 이동하여 애플리케이션을 만들 때 필요한 라이브러리를 설치하세요. $ yarn create react-app todo-app $ cd todo-app $ yarn add node-sass..

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

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

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

**Hooks를 사용하는 방법 (1) 리액트 내장 Hooks 사용하기 (2) 커스텀 Hooks 만들기 I. useState => 함수 컴포넌트에서도 가변적 상태를 지닐 수 있게 해준다 //Counter.js import { useState } from 'react'; const Counter = () => { const [ value, setValue ] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value + 1)}>+1 setValue(value - 1)}>-1 }; }; export default Counter; useState 함수의 파라미터에는 상태의 기본값이 들어가며, 여기서는 0이다 이 함수는 호출 시, 배열을 반환하며, 배열의 첫 번째..

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

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

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

I. 컴포넌트 반복 웹 애플리케이션을 만들다 보면 코드를 반복하여 사용할 때가 있다. 반복적인 코드를 효율적으로 보여주고 관리하는 방법을 배워보겠다. 1. map() 함수 자바스크립트 배열 객체의 내장 함수인 map함수를 이용해볼 수 있다. map 함수는 배열의 각 요소를 원하는 규칙에 따라 변환한 후, 그 결과로 새로운 배열을 생성한다. arr.map(callback, [thisArg]) arr : 변환할 배열 callback : arr 배열의 요소를 변환시킬 함수 thisArg(선택 항목): callback 함수 내부에서 사용할 this 레퍼런스 var numbers = [1, 2, 3, 4, 5]; var processed = numbers.map(function(num){ return num * ..

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

* ref(reference의 줄임말) : HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법 5장에서는 클래스형 컴포넌트에서 ref를 사용하는 법을 공부한다. (함수형 컴포넌트에서 ref 사용 시, Hooks 사용 > 8장 ) I. ref는 어떤 상황에서 사용해야 할까? => 특정 DOM에 작업을 해야할 때 사용하는데, 특히 DOM을 꼭 직접적으로 건드려야 할 때 사용해야 한다 1. 예제 컴포넌트 생성 .success { background-color : lightgreen; } .failure { background-color : lightcoral; } import {Component} from 'react'; import './Validat..

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

I. 리액트 이벤트 시스템 1. 이벤트를 사용할 때 주의사항 1. 이벤트 이름은 카멜 표기법으로 작성합니다. HTML의 onclick은 리액트에서 onClick으로 작성 onekeyup은 onKeyUp으로 작성 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아닌 함수 형태의 값을 전달 HTML에서는 이벤트를 설정할 때 큰따옴표 안에 실행할 코드를 넣음 리액트에서는 함수 형태의 객체를 전달 화살표 함수 문법처럼 바로 만들어서 전달해도 되고, 렌더링 부분 외부에 미리 만들어서 전달해도 가능 3. DOM 요소에만 이벤트를 설정할 수 있음 div, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있음 그러나 자신이 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할..

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