이번장에서는 리덕스를 사용하여 리액트 애플리케이션 상태를 관리하는 방법에 대해 알아보겠습니다. 소규모 프로젝트에서는 컴포넌트가 가진 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

전개 연산자와 배열의 내장 함수를 이용해 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어쓸 수 있습니다. 그러나 객체 구조가 엄청나게 깊어지면 불변성을 유지하며 이를 업데이트하기 어렵습니다. 이번 장에서는 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

2.1 코드 이해하기 create-react-app으로 hello-react 프로젝트를 만들고 src/App.js 파일을 VS code에서 엽니다. import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; import 구문은 특정 파일을 불러오는 것을 의미합니다. 리액트로 만든 프로젝트의 자바스크립트 파일에서는 import를 사용하여 다른 파일을 불러와 사용할 수 있습니다. 모듈을 불러와서 사용하는 것은 브라우저에는 없는 기능입니다. 이는 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해..

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

1.1 왜 리액트인가? 최근 몇 년간 많은 개발자들은 자바스크립트에 뜨겁게 열광하고 있습니다. 한때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어였지만, 지금은 애플리케이션에서 가장 핵심적인 역할을 합니다. 우리는 그중에서 자바스크립트 라이브러리를 사용하여 사용자 인터페이스를 만들고, 최대한 성능을 아끼며 편안한 사용자 경험을 제공하는 리액트에 대해서 알아보고자 합니다. 1.1.0 MVMM과 MVC MVC(Model-View-Controller)와 MVVM(Model-View-ViewModel)는 프레임 워크의 아키텍쳐(구조) 입니다. 이 두 가지 구조의 공통점은 모델과(Model) 뷰(View)가 있다는 것입니다. 여기서 모델은 애플리케이션의 데이터를 관..

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

INDEX 17장 컴포넌트 스타일링 1. 작업 환경 설정 2. UI 준비하기 2.1 카운터 컴포넌트 만들기 2.2 할 일 목록 컴포넌트 만들기 3. 리덕스 관련 코드 작성하기 3.1 counter 모듈 작성하기 3.2 todos 모듈 만들기 3.3 루트 리듀서 만들기 4. 리액트 애플리케이션에 리덕스 적용하기 4.1 스토어 만들기 4.2 Provider 컴포넌트를 사용하여 프로젝트에 리덕스 적용하기 4.3 Redux DevTools의 설치 및 적용 5. 컨테이너 컴포넌트 만들기 5.1 CounterContainer 만들기 5.2 TodosContainer 만들기 6. 리덕스 더 편하게 사용하기 6.1 redux-actions 6.2 immer 7. Hooks를 사용하여 컨테이너 컴포넌트 만들기 7.1 u..

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

INDEX 16장 리덕스 라이브러리 이해하기 1.개념 미리 정리하기 1.1 액션 1.2 액션 생성 함수 1.3 리듀서 1.4 스토어 1.5 디스패치 1.6 구독 2. 리액트 없이 쓰는 리덕스 2.1 Parcel로 프로젝트 만들기 2.2 간단한 UI 구성하기 2.3 DOM 레퍼런스 만들기 2.4 액션 타입과 액션 생성 함수 정의 2.5 초깃값 설정 2.6 리듀서 함수 정의 2.7 스토어 만들기 2.8 render 함수 만들기 2.9 구독하기 2.10 액션 발생시키기 3. 리덕스의 세 가지 규칙 3.1 단일 스토어 3.2 읽기 전용 상태 3.3 리듀서는 순수한 함수 4. Question 개념 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 리덕스를 왜 사용하는가? 컴포넌트의 상태 업데이트 관련 로직을 다른 ..

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

20.1 서버 사이드 렌더링의 이해 클라이언트 사이드 렌더링 : UI 렌더링을 브라우저에서 모두 처리하는 것 ⇒ 리액트는 기본적으로 클라이언트 사이드 렌더링! 서버 사이드 렌더링 : UI를 서버에서 렌더링하는 것 [서버 사이드 렌더링의 장점] 웹 서비스의 검색 엔진 최적화 초기 렌더링 성능 개선 자바스크립트 파일이 다운로드되지 않은 시점에도 html 상에 사용자가 볼 수 있는 콘텐츠가 있어 대기 시간 최소화, 사용자 경험 향상 클라이언트 사이드 렌더링은 로딩되고 실행될 때까지 빈 페이지를 보며 대기해야 함 [서버 사이드 렌더링의 단점] 서버 리소스가 사용된다 ⇒ 사용자가 동시에 몰릴 시, 서버에 과부하 발생 고려사항이 많아 개발 어려움 서버 사이드 렌더링과 코드 스플리팅 충돌 서버 사이드 렌더링과 코드 ..

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

Intro 리액트 프로젝트를 사용자에게 제공할 때는 빌드 작업을 거쳐서 배포해야 한다. 빌드 작업에선 불필요한 주석, 경고 메시지, 공백 등을 제거해 파일 크기 최소화 JSX문법이나 최신 자바스크립트 문법이 원활하게 실행되도록 코드의 트랜스파일 작업 진행 이미지와 같은 정적 파일의 경로 설정 과 같은 일을 한다. 빌드 작업은 웹팩 이라는 도구가 담당한다. 프로젝트의 모든 자바스크립트 파일 하나로 합치기 프로젝트의 모든 CSS 파일 하나로 합치기 스플리팅이란? 파일을 분리하는 작업 CRA를 통해 React 프로젝트를 만들 경우 기본으로 탑재되어있는 SplitChunks 기능을 통해 스플리팅이 되지만, 단순한 캐싱 효과만 있을 뿐이다. 애플리케이션의 규모가 커질 경우에 기본적인 스플리팅 기능만 이용하면 로딩..

21-22/21-22 리액트 마스터 2022. 1. 24. 18:05

1. 작업환경 준비 프로젝트 생성) $ yarn create react-app learn-redux-middleware 라이브러리 설치) $ yarn add redux react-redux redux-actions counter 리덕스 모듈 작성) ✅ 복습! 모듈이란 Ducks 패턴을 사용해 액션 타입, 액션 생성 함수, 리듀서를 작성한 코드를 말한다! import { createAction, handleActions } from "redux-actions"; //액션타입 정의 const INCREASE = "counter/INCREASE"; const DECREASE = "counter/DECREASE"; //액션 생성 함수 export const increase = createAction(INCREA..

21-22/21-22 리액트 마스터 2022. 1. 24. 18:05

INDEX 13장 리액트 라우터로 SPA 개발하기 1. SPA란? 1.1 SPA의 단점 2. 프로젝트 준비 및 기본적인 사용법 2.1 프로젝트 생성및 라이브러리 설치 2.2 프로젝트에 라우터 적용 2.3 페이지 만들기 2.4 Route 컴포넌트로 특정 주소에 컴포넌트 연결 2.5 Link 컴포넌트를 사용하여 다른 주소로 이동하기 3. Route 하나에 여러 개의 path 설정하기 3.1 App에서 todos 상태 사용하기 3.2 항목 추가 기능 구현하기 3.3 지우기 기능 구현하기 3.4 수정 기능 4. URL 파라미터와 쿼리 4.1 App에서 todos 상태 사용하기 4.2 항목 추가 기능 구현하기 5. 서브 라우트 6. 리액트 라우터 부가 기능 6.1 history 6.2 withRouter 6.3 ..

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

INDEX 12장 immer를 사용하여 더 쉽게 불변성 유지하기 1. immer를 설치하고 사용법 알아보기 1.1 프로젝트 준비 1.2 immer를 사용하지 않고 불변성 유지 1.3 immer 사용법 1.4 App 컴포넌트에 immer 적용하기 1.5 useState의 함수형 업데이트와 immer 함께 쓰기 2. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 immer 라이브러리 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용해 불변성을 유지하며 업데이트할 수 있게 해주는 라이브러리 불변성을 유지하며 업데이트해야할 때 immer를 사용하지 않으면? 배열 또는 객체를 복사할 때: 전개 연산자(...)와 배열의 내장 함수 사용 객체의 구조가 엄청나게 깊어지면: 하나의 값을 업데..

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