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

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

INDEX 11장 컴포넌트 성능 최적화 1. 많은 데이터 렌더링하기 2. 크롬 개발자 도구를 통한 성능 모니터링 3. 느려지는 원인 분석 4. React.memo를 사용하여 컴포넌트 성능 최적화 5. onToggle, onRemove 함수가 바뀌지 않게 하기 6. 불변성의 중요성 7. TodoList 컴포넌트 최적화하기 8. react-virtualized를 사용한 렌더링 최적화 9. Question 개념 정리 및 코드 문제 컴포넌트 성능 최적화 많은 데이터 렌더링하기 ->크롬 개발자 도구를 통한 성능 모니터링 ->React.memo를 통한 컴포넌트 리렌더링 성능 최적화 ->onToggle과 onRemove가 새로워지는 현상 방지하기 ->react-virtualized를 사용한 렌더링 최적화 1. 많은 ..

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

INDEX 10장 일정 관리 웹 애플리케이션 만들기 1. 프로젝트 준비하기 1.1 프로젝트 생성 및 필요한 라이브러리 설치 1.2 Prettier 설정 1.3 index.css 수정 1.4 App 컴포넌트 초기화 2. UI 구성하기 2.1 TodoTemplate 만들기 2.2 TodoInsert 만들기 2.3 TodoListItem과 TodoList 만들기 3. 기능 구현하기 3.1 App에서 todos 상태 사용하기 3.2 항목 추가 기능 구현하기 3.3 지우기 기능 구현하기 3.4 수정 기능 4. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 ⚙️ 애플리케이션을 만들어보자! 프로젝트 준비하기 UI 구성하기 기능 구현하기 1. 프로젝트 준비하기 1.1 프로젝트 생성 및 필요..

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

INDEX 9장 컴포넌트 스타일링 1. 가장 흔한 방식, 일반 CSS 1.1 이름 짓는 규칙 1.2 CSS Selector 2. Sass 사용하기 ● Sass에서 지원하는 두 가지 확장자 .scss .sass 2.1 utils 함수 분리하기 2.2 sass-loader 설정 커스터마이징 2.3 node_modules에서 라이브러리 불러오기 3. CSS Module 3.1 classNames 3.2 Sass와 함께 사용하기 3.3 CSS Module이 아닌 파일에서 CSS Module 사용하기 4. styled-components 4.1 Tagged 템플릿 리터럴 4.2 스타일링된 엘리먼트 만들기 4.3 스타일에서 props 조회하기 4.4 props에 따른 조건부 스타일링 4.5 반응형 디자인 5. Qu..

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

INDEX 8장 Hooks 1. useState 1.1 useState를 여러 번 사용하기 2. useEffect 2.1 마운트될 때만 실행하고 싶을 때 2.2 특정 값이 업데이트될 때만 실행하고 싶을 때 2.3 뒷정리하기 3. useReducer 3.1 카운터 구현하기 3.2 인풋 상태 관리하기 4. useMemo 5. useCallback 6. useRef 6.1 로컬 변수 사용하기 7. 커스텀 Hooks 만들기 8. 다른 Hooks 9. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 작업을 설정하는 useEffect 등의 기능을 제공하여 다양한 작업을 할 수 있게 해준다. 8.1 useS..

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

INDEX 6장 컴포넌트 반복 1. 자바스크립트 배열의 map() 함수 ● 문법 2. 데이터 배열을 컴포넌트 배열로 변환하기 2.1 컴포넌트 수정하기 2.2 App 컴포넌트에서 예제 컴포넌트 렌더링 2.3 모듈 내보내기 및 불러오기 3. key 3.1 key 설정 4. 응용 4.1 초기 상태 설정하기 4.2 데이터 추가 기능 구현하기 4.3 데이터 제거 기능 구현하기 5. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 컴포넌트 반복 html 태그 중에는 반복적으로 사용할 필요가 있는 태그(li, tr, td 등)가 있다. // IterationSample.js const IterationSample = () => { return ( 눈사람 얼음 눈 바람 ); }; 이 장에서는..

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

1. 함수형 컴포넌트 vs 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 함수형 컴포넌트와 클래스형 컴포넌트로 나뉩니다. 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component{ render() { const name = "react"; return {name} } } export default App; 클래스형 컴포넌트의 특징은 ① state 기능 ② 라이프사이클 기능 ③ 임의 메서드 정의 클래스형 컴포넌트에는 render함수가 반드시 있어야 하고, JSX를 반환해주어야 합니다. 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { const n..

21-22/21-22 리액트 마스터 2021. 10. 11. 14:00

1. 리액트의 이벤트 시스템 이벤트 : 사용자가 웹브라우저에서 DOM 요소들과 상호작용하는 것 리액트의 이벤트 작성법은 일반 HTML에서의 이벤트 작성법과 비슷합니다. ※주의 사항 ① 이벤트 이름은 카멜 표기법으로 작성 ② 이벤트 설정 시 함수 형태의 객체 전달 - 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니다. ③ DOM 요소에만 이벤트 설정 가능 - 직접 만든 컴포넌트에는 이벤트 자체 설정 불가 그냥 이름이 onClick인 props를 컴포넌트에게 전달할 뿐 ⇨ 전달받은 props를 컴포넌트 내부의 DOM이벤트로 설정은 가능하다. ▶이벤트 종류 더보기 더보기 Clipboard, Composition, Keyboard, Focus, Form, Mouse, Selection, Touch, UI..

21-22/21-22 리액트 마스터 2021. 10. 11. 14:00

1. 코드 이해하기 import React from 'react'; 리액트를 불러와서 사용할 수 있게 해주는 코드 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데, 프로젝트 생성 과정에서 node_modules 디렉터리에 react모듈이 설치된다. 이로 인해 import 구문을 통해 리액트를 불러와 사용할 수 있게 된다. ▶ 번들러의 사용 위처럼 모듈을 불러와 사용하는 것은 브라우저엔 없는 기능이며, Node.js에서 지원하는 기능이다. 이런 기능을 브라우저에서 사용하기 위해 번들러(bundler)를 사용한다. 번들(bundel)은 묶는다는 뜻이며 파일을 묶듯이 연결한다. 리액트는 웹팩 번들러를 사용한다. 번들러 도구를 사용하면 import(또는 require)로 모듈을 ..

21-22/21-22 리액트 마스터 2021. 10. 4. 14:01