$$config title: 23_06_10, 리액트 & 안드로이드 강의(주말 오전) keywords: - IT - 리액트 & 안드로이드 강의 $$ # 수업페이지 - [페이지 : https://slog.gg/p/12446](https://slog.gg/p/12446) - [F강의장 초대링크](https://discord.gg/X92Yt6Dg) # 디스코드 주소 - [https://discord.gg/bABAANWj](https://discord.gg/bABAANWj) # 관련링크 - [새 코드팬, codepen.io/pen](https://codepen.io/pen) - [리액트 시작소스코드, to2.kr/ekF](https://to2.kr/ekF) # 필수 사전지식 - [필수사전지식 - HTML, CSS](https://slog.gg/p/11935) - [필수사전지식 - Javscript, JQuery](https://slog.gg/p/11941) # 챕터 01 시작 ## 01-01, 개요와 기본세팅 - [영상 - 23 06 10, ken 12446, 리액트 수업, 1강, 소개](https://youtu.be/FE0J5RHVwFI) - [영상 - 23 06 10, ken 12446, 리액트 수업, 2강, CODEPEN 세팅](https://youtu.be/oTp9astaoro) ## 01-02, 자바스크립트 기초문법 ## 기초 출력 - [영상 - 23 06 10, ken 12446, 리액트 수업, 3강, 자바스크립트 기초 출력, 숫자형, 문자형 설명](https://youtu.be/b9J0UsFeITQ) ## 변수 - [영상 - 23 06 10, ken 12446, 리액트 수업, 4강, 변수](https://youtu.be/BESiGihHVNk) ``` - 변수의 특징 1. 변수는 선언되어야만 사용가능하다. 2. 변수는 공간이다. 3. 변수는 값을 오직 하나밖에 가지지 못한다. 4. 변수는 중복선언이 금지되어 있다. 5. 변수는 재활용이 가능하다. - 자바스크립트 변수 선언 방식 var : 안씀 let : 변수의 재활용이 가능. const : 변수의 재활용이 불가능. ``` - [영상 - 23 06 10, ken 12446, 리액트 수업, 5강, 변수를 이용한 다양한 출력방식](https://youtu.be/Wr63VzF5GBI) ## 연산자(사칙연산자, 비교연산자, 논리연산자) - [영상 - 23 06 10, ken 12446, 리액트 수업, 6강, 자바스크립트 연산자(사칙연산자, 비교연산자, 논리연산자)](https://youtu.be/RSnlkQ9CtWY) ## 반복문(while, for) - [영상 - 23 06 10, ken 12446, 리액트 수업, 7강, 자바스크립트 반복문(while, for)](https://youtu.be/wEOTUhCWgK8) ```js let i = 1; // 시작값 while(i <= 10) { // 끝값 console.log(i); i++; } for(let i = 1; i <= 10; i++) { console.log(i); } ``` ## 함수(정의, 실행, 매개변수, 리턴, 애로우 펑션) - [영상 - 23 06 10, ken 12446, 리액트 수업, 8강, 자바스크립트 함수(정의, 실행, 매개변수, 리턴)](https://youtu.be/dwbPOSih1sE) - [영상 - 23 06 10, ken 12446, 리액트 수업, 9강, 함수 애로우 펑션](https://youtu.be/1Q6syWyxANw) # 챕터 02 시작 ## 02-01, 리액트 개발환경 세팅 - [영상 - 23 06 10, ken 12446, 리액트 수업, 10강, codepen에서 리액트 개발환경 세팅](https://youtu.be/KU5YrtiBLbU) ## 새로 세팅하는 법 - [새 코드팬, codepen.io/pen](https://codepen.io/pen) - HTML - `

` - SETTINGS - JS => 바벨 enable - JS - `import React from "https://cdn.skypack.dev/react@17";` - `import ReactDOM from "https://cdn.skypack.dev/react-dom@17";` - [영상 - 23 06 11, ken 12446, 리액트 수업, 11강, 리액트 시작소스코드, to2.kr/ekF](https://youtu.be/LEh4zPGD_QE) - [리액트 시작소스코드, to2.kr/ekF](https://to2.kr/ekF) ## 02-02, 리액트 사용하는 이유 $$ppt title: PPT-02-02 # 리액트를 사용하는 이유--o--t=1 # 웹은 페이지 이동시 특유의 깜박거림이 있습니다.--o--t=1 # 모바일앱은 페이지 이동시 부드럽고, 빠릅니다.--o--t=1 # 리액트는 모바일앱같은 웹을 만들 수 있습니다.--o--t=1 # 그래서 리액트로 고품질의 웹사이트를 만들 수 있습니다.[br /]아주 복잡한 UI를 가진 앱도 깔끔하게 만들 수 있도록[br /]도와주는 역할도 합니다.--o--t=1 # 또 모바일앱도 제작 가능합니다.--o--t=1 # 리액트 기반의 대표적인 앱이 배달의 민족과 토스가 있습니다.--o--t=1 # 리액트를 잘 활용하면 기업에서는 굉장한 비용절감을 할 수 있습니다.--o--t=1 $$ --- ## 02-03, 리액트 교육자료 - [영상 - 23 06 11, ken 12446, 리액트 수업, 12강, 리액트 추가 교육 자료](https://youtu.be/_0phA3y8rqg) ### 추가교육자료 - [리액트 공식문서, https://ko.reactjs.org/](https://ko.reactjs.org/) - [리액트 공식문서, 자습서(실전파에게 추천), https://ko.reactjs.org/tutorial/tutorial.html](https://ko.reactjs.org/tutorial/tutorial.html) - [리액트 공식문서, 단계별 가이드(이론파에게 추천), https://ko.reactjs.org/docs/hello-world.html](https://ko.reactjs.org/docs/hello-world.html) - [리액트 기초, 코딩애플](https://www.youtube.com/playlist?list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy) ## 02-04, 리액트 시작, 실습하기 ### 미션1 : 새 태그 만들어보기 - [CODEPEN](https://codepen.io/sangwon7242/pen/xxaGoPK?editors=0010) - [영상 - 23 06 11, ken 12446, 리액트 수업, 12강, 리액트로 새 태그 만들기](https://youtu.be/wUfYhkcDP6U) ### 미션2 : 새 태그 만들어보기, CSS style 적용 #### 설명 2-1 - [영상 - 23 06 11, ken 12446, 리액트 수업, 13강, 리액트로 새 태그 만들기, CSS style 적용, 1부, 문제](https://youtu.be/Vn6cwhznVoc) - [CODEPEN, 1부, 문제](https://codepen.io/sangwon7242/pen/KKxpjQx?editors=0010) - [영상 - 23 06 11, ken 12446, 리액트 수업, 13강, 리액트로 새 태그 만들기, CSS style 적용, 2부, 정답](https://youtu.be/gl2ENUVHZNg) - [CODEPEN, 2부, 문제정답](https://codepen.io/sangwon7242/pen/QWVbXPJ?editors=0010) #### 설명 2-2 - [영상 - 23 06 11, ken 12446, 리액트 수업, 14강, 단순하게 설명하면, 리액트로 새로운 태그를 만들 수 있다](https://youtu.be/yg1UvCHugh4) ### 미션3 : className을 이용하셔 CSS style 적용 - [영상 - 23 06 11, ken 12446, 리액트 수업, 15강, CSS style 적용, className](https://youtu.be/MZPnWFn4ClA) - [CODEPEN](https://codepen.io/sangwon7242/pen/LYJVKqZ?editors=0110) ## 02-05, useState $$ppt title: PPT-02-05 # useState--o--t=1 # 복사본은 뒤늦게 원본이 바뀌어도, 변하지 않습니다. ```js let a = 10; console.log(a); // 출력 : 10 a = 50; // 이렇게 바꾼다고 해서 위에서 출력한 10이 50으로 바뀌지 않습니다. ``` # 복사본은 뒤늦게 원본이 바뀌어도, 변하지 않습니다. ```js function Hi() { let name = '홍길동'; setTimeout(() => name = '홍길순', 3000); return <>안녕하세요. 저의 이름은 {name} 입니다. } ``` ```html ``` # 리액트에서는 state 라는 개념이 있습니다. ```js function Hi() { // name 에는 '홍길동' 이 들어가고, setName은 name을 변경할 때 사용합니다. // 즉 state는 name = '홍길순'; // 이런식으로 값을 바꿀 수 없습니다. const [name, setName] = useState('홍길동'); setTimeout(() => setName('홍길순'), 3000); return <>안녕하세요. 저의 이름은 {name} 입니다. } ``` ```html ``` $$ --- - [영상 - 23 06 11, ken 12446, 리액트 수업, 16강, useState 개념, 1부, 일반변수의 한계](https://youtu.be/pNYEkU6TknE) - [CODEPEN - 일반변수는 바뀌어도 변함이 없음](https://codepen.io/sangwon7242/pen/vYzOQpy?editors=0011) - [영상 - 23 06 11, ken 12446, 리액트 수업, 17강, useState 개념, 2부, useState를 활영하여 관련된 내용 한번에 업데이트](https://youtu.be/EMHDlCKCknQ) - [CODEPEN - useState를 사용한 변수는 바뀌었을 때 관련된 것들이 같이 바뀜](https://codepen.io/sangwon7242/pen/WNgvVNY?editors=0011) ## 02-06, 리액트의 뷰 갱신 원리 - [영상 - 23 06 11, ken 12446, 리액트 수업, 18강, 리액트의 뷰 갱신 원리, 재벌처럼 매번 버리고 새로 구매한다.](https://youtu.be/vlxL-_GMjVs) # 챕터 03 시작 # 챕터 03, 간단한 숫자 카운팅 기능 구현 ## 03-01 시작 ## 미션 1, 숫자 카운팅 기초 1. - [ ] 01-01단계, 숫자 카운팅(리액트, 제이쿼리, php 방식) - [영상 - 23 06 11, ken 12446, 리액트 수업, 19강, 숫자 카운팅, 증가, 감소, 1부, 리액트 방식](https://youtu.be/o3qcefjaCgI) - [CODEPEN - 요즘(리액트) 방식](https://codepen.io/sangwon7242/pen/jOQPBKJ?editors=0010) - HTML과 자바스크립트가 합쳐져 있어서 소스코드 전체로직을 파악할 때 편하다. - state 변수를 변경하기만 하면 관련된 뷰영역들이 자동으로 갱신된다.(마치 엑셀 계산수식이 걸려 있는 셀 처럼) - 갱신속도는 브라우저 문서를 매번 버리고 새로 만드는 서버사이드렌더링 보다는 빠르다. - [영상 - 23 06 11, ken 12446, 리액트 수업, 19강, 숫자 카운팅, 증가, 감소, 2부, 제이쿼리 방식](https://youtu.be/-cYrWOPTBlg) - [CODEPEN - 예전(제이쿼리) 방식](https://codepen.io/jangka44/pen/OJxddOz?editors=0010) - HTML과 자바스크립트가 나눠져 있어서 소스코드 전체로직을 파악할 때 귀찮다. - state 변수를 변경하고, 따로 수동으로 관련된 뷰영역들을 일일이 갱신해줘야 한다. - 갱신속도는 브라우저 문서를 매번 버리고 새로 만드는 서버사이드렌더링 보다는 빠르다. - [예전(서버사이드렌더링) 방식](https://codepen.io/jangka44/debug/XWeOOQb) - HTML과 자바스크립트가 합쳐져 있어서 소스코드 전체로직을 파악할 때 편하다. - state 변수를 변경하기만 하면 관련된 뷰영역들이 자동으로 갱신된다.(마치 엑셀 계산수식이 걸려 있는 셀 처럼) - 갱신속도는 느리다. 왜냐하면 매 요청마다 전체 문서를 PHP에서 다시 그리기 때문이다. 1. - [ ] 01-02 단계, 숫자 기록, 기록삭제 - [영상 - 23 06 17, ken 12446, 리액트 수업, 20강, 숫자기록](https://youtu.be/dApkqi3538s) - [CODEPEN](https://codepen.io/sangwon7242/pen/NWENdJx?editors=0010) - [영상 - 23 06 17, ken 12446, 리액트 수업, 21강, 숫자기록, 기록삭제](https://youtu.be/I5pxYPGBrmc) - [CODEPEN](https://codepen.io/sangwon7242/pen/LYXNWPX?editors=0010) 1. - [ ] 01-03 단계, 전개구문 - [영상 - 23 06 17, ken 12446, 리액트 수업, 22강, 전개구문](https://youtu.be/6LnxTUWeFrA) - [CODEPEN](https://codepen.io/sangwon7242/pen/YzOyZoj?editors=0012) 1. - [ ] 01-04 단계, 숫자 기록을 여러개로 - [영상 - 23 06 17, ken 12446, 리액트 수업, 23강, 숫자 기록을 여러개로](https://youtu.be/D5syASAe2LY) - [CODEPEN](https://codepen.io/sangwon7242/pen/wvQGJaG?editors=0010) 1. - [ ] 01-05 단계, 숫자기록을 여러개로, map - [영상 - 23 06 17, ken 12446, 리액트 수업, 24강, 숫자기록을 여러개로, map, 1부](https://youtu.be/ATafSNC31kc) - [영상 - 23 06 17, ken 12446, 리액트 수업, 24강, 숫자기록을 여러개로, map, 2부](https://youtu.be/oh2_tdDQgjI) - [CODEPEN](https://codepen.io/jangka44/pen/WNOjByJ?editors=0012) 1. - [ ] 01-06 단계, 숫자기록을 여러개로, map을 활용해서 리스트로 출력 - [영상 - 23 06 17, ken 12446, 리액트 수업, 25강, 숫자기록을 여러개로, map을 활용해서 리스트로 출력](https://youtu.be/FSDlhKIOM8Y) - [CODEPEN](https://codepen.io/sangwon7242/pen/VwVapaO?editors=0010) - [영상 - 23 06 17, ken 12446, 리액트 수업, 26강, 숫자기록을 여러개로, map을 활용해서 리스트로 출력, 재구현](https://youtu.be/hXnmvI7yEqo) - [CODEPEN](https://codepen.io/sangwon7242/pen/XWydMMB?editors=0010) 1. - [ ] 01-07 단계, 감소, 취소, 기록전체삭제 버튼추가 - [영상 - 23 06 17, ken 12446, 리액트 수업, 27강, 감소, 취소, 기록전체삭제 버튼추가](https://youtu.be/8GC5HmvFjIw) - [CODEPEN](https://codepen.io/sangwon7242/pen/OJaNpzR?editors=0010) 1. - [ ] 01-08 단계, filter를 이용한 배열요소 삭제, 불변성 유지 - [영상 - 23 06 18, ken 12446, 리액트 수업, 28강, filter를 이용한 배열요소 삭제, 불변성 유지]() - [CODEPEN](https://codepen.io/sangwon7242/pen/dyqpzRx?editors=0012) 1. - [ ] 01-09 단계, 아이템 삭제기능 - [영상 - 23 06 18, ken 12446, 리액트 수업, 29강, 아이템 삭제기능]() - [CODEPEN](https://codepen.io/sangwon7242/pen/zYMqaNg?editors=0010) 1. - [ ] 01-10 단계, 레코드 폼과 레코드 리스트로 컴포넌트 분리 - [영상 - 23 06 18, ken 12446, 리액트 수업, 30강, 레코드 폼과 레코드 리스트로 컴포넌트 분리](https://youtu.be/_hBBKC0XBok) - [CODEPEN](https://codepen.io/sangwon7242/pen/ZEmWRaN?editors=0010) 1. - [ ] 01-11 단계, 함수 분리와 매개변수에 대한 복습 - [영상 - 23 06 18, ken 12446, 리액트 수업, 31강, 함수 분리와 매개변수에 대한 복습](https://youtu.be/WlJD_LQ-FyU) - [CODEPEN](https://codepen.io/sangwon7242/pen/PoxNaaR?editors=0011) 1. - [ ] 01-12 단계, NumberRecorderListItem 컴포넌트로 분리 - [영상 - 23 06 18, ken 12446, 리액트 수업, 32강, NumberRecorderListItem 컴포넌트로 분리](https://youtu.be/nZHmJyu6_iI) - [CODEPEN](https://codepen.io/sangwon7242/pen/OJaNEEZ?editors=0010) ## 미션 2, 숫자 기록 수정모드 1. - [ ] 02-01 단계, NumberRecorderListItem에 수정모드 UI - [영상 - 23 06 18, ken 12446, 리액트 수업, 33강, NumberRecorderListItem에 수정모드 UI](https://youtu.be/W9ssRIuQS8I) - [CODEPEN](https://codepen.io/sangwon7242/pen/zYMqaJG?editors=0110) 2. - [ ] 02-02 단계, NumberRecorderListItem에 수정모드 UI, 입력상자 값 변경 허용 - [영상 - 23 06 18, ken 12446, 리액트 수업, 34강, NumberRecorderListItem에 수정모드 UI, 입력상자 값 변경 허용](https://youtu.be/mPJOJkttAZI) - [CODEPEN](https://codepen.io/sangwon7242/pen/bGQpKOm?editors=0010) 3. - [ ] 02-02 단계, NumberRecorderListItem에 수정모드 UI, 입력상자 값 변경 허용 후 수정 - [영상 - 23 06 18, ken 12446, 리액트 수업, 35강, NumberRecorderListItem에 수정모드 UI, 입력상자 값 변경 허용 후 수정](https://youtu.be/ZWDeuLKb1kg) - [CODEPEN](https://codepen.io/sangwon7242/pen/WNYwyLL?editors=0010) 4. - [ ] 02-03 단계, 30강에 수정기능 추가, 재구현 - [영상 - 23 06 24, ken 12446, 리액트 수업, 36강, 30강에 수정기능 추가, 재구현](https://youtu.be/RYkvrJ0wk3Q) - [CODEPEN](https://codepen.io/sangwon7242/pen/yLQVPGm?editors=0010) ## 03-02 시작 ## 03-02 : CSS 프레임워크 테일윈드 & 데이지 UI 소개 - 테일윈드 & 데이지UI 소개 - [영상 - 23 06 24, ken 12446, 리액트 수업 37강, 테일윈드 & 데이지 UI 소개](https://youtu.be/cGrGZrSYszU) - [리액트 시작 소스코드(가벼운), to2.kr/dun](https://to2.kr/dun) - [CODEPEN](https://codepen.io/sangwon7242/pen/mdQOqNL?editors=1010) - [테일윈드 CSS 프레임워크](https://tailwindcss.com/) - [데이지UI 컴포넌트](https://daisyui.com/components/) - 데이지UI 로드, 데이지UI를 사용하시려면, 테일윈드도 필요합니다. ```html ### 미션 1 : 튜토리얼 숫자 카운터, 데이지 UI 1. - [ ] [문제 - 00, 시작](https://codepen.io/jangka44/pen/WNdJPNN?editors=0010) 2. - [ ] [문제 - 01, 입력상자](https://codepen.io/jangka44/pen/eYyrbdO?editors=0010) 3. - [ ] [문제 - 02, 데이지 UI](https://codepen.io/jangka44/pen/VwyxqVQ?editors=0010) 4. - [ ] [문제 - 03, 숫자 증가](https://codepen.io/jangka44/pen/vYpjvvj?editors=0010) 5. - [ ] [문제 - 04, 입력상자의 이벤트가 반응](https://codepen.io/jangka44/pen/LYemMvO?editors=0010) 6. - [ ] [문제 - 05, valueAsNumber](https://codepen.io/jangka44/pen/gOozZJZ?editors=0010) 7. - [ ] [문제 정답](https://codepen.io/sangwon7242/pen/KKrNZMK) - [영상 - 23 06 24, ken 12446, 리액트 수업 38강, 튜토리얼 숫자 카운터, 테일윈드 & 데이지 UI](https://youtu.be/zU1yAMWfrQk) # 챕터 4 시작 # 챕터 04, 할일 리스트 기능 구현 및 꾸미기 ## 미션 1, 할일 리스트 1. - [ ] 01-01 단계, 5초마다 자동으로 할일이 추가되도록 작업 - [영상 - 23 06 24, ken 12446, 리액트 수업 39강, 5초마다 자동으로 할일이 추가되도록 작업](https://youtu.be/vwsRCmCHDBc) - [CODEPEN](https://codepen.io/sangwon7242/pen/mdQOpmz?editors=0011) 1. - [ ] 01-02 단계, 할일추가 폼 - [영상 - 23 06 24, ken 12446, 리액트 수업 40강, 할일추가 폼](https://youtu.be/J43SGw44v_0) - [CODEPEN](https://codepen.io/sangwon7242/pen/JjebMEr?editors=1011) 1. - [ ] 01-03 단계, 할일추가 폼을 별도의 컴포넌트로 분리 - [영상 - 23 06 25, ken 12446, 리액트 수업 41강, 할일추가 폼을 별도의 컴포넌트로 분리](https://youtu.be/Ng_0Rxfx9XU) - [CODEPEN](https://codepen.io/sangwon7242/pen/dyQOwBQ?editors=0010) 1. - [ ] 01-04 단계, 할일리스트를 ul, li 로 표현 - [영상 - 23 06 25, ken 12446, 리액트 수업 42강, 할일리스트를 ul, li 로 표현](https://youtu.be/Cn3Lgr_iQ5Y) - [CODEPEN](https://codepen.io/sangwon7242/pen/dyQOwEg?editors=0010) 1. - [ ] 01-05 단계, 할일리스트를 별도의 컴포넌트로 분리 - [영상 - 23 06 25, ken 12446, 리액트 수업 43강, 할일리스트를 별도의 컴포넌트로 분리](https://youtu.be/FOYakyhjV-o) - [CODEPEN](https://codepen.io/sangwon7242/pen/dyQOwxQ?editors=0010) 1. - [ ] 01-06 단계, 할일리스트아이템 삭제 - [영상 - 23 06 25, ken 12446, 리액트 수업 44강, 할일리스트아이템 삭제](https://youtu.be/JN8dvfVWIRY) - [CODEPEN](https://codepen.io/sangwon7242/pen/PoxbVYY?editors=0011) ## 미션 2. 할일 리스트 최적화 방법 ### 02-01, 여태까지 만든 구조 설명 - [영상 - 23 06 25, ken 12446, 리액트 수업 45강, 여태까지 만든 구조 설명](https://youtu.be/-90t15wVHh0) $$uml map App { todos => [] setTodos => 세터 addTodo => setTodos 이용 } map TodoWriteForm { newTodoTitle => '' nsetNewTodoTitle => 세터 addTodo => _addTodo 이용 } map TodoList { todos.map => todo } map TodoListItem_0 { removeTodo => setTodos 이용 } map TodoListItem_1 { removeTodo => setTodos 이용 } map TodoListItem_2 { removeTodo => setTodos 이용 } App --> TodoWriteForm : addTodo:_addTodo App --> TodoList : todos,\nsetTodos TodoList --> TodoListItem_0 : todo,\nindex,\ntodos,\nsetTodos TodoList --> TodoListItem_1 : todo,\nindex,\ntodos,\nsetTodos TodoList --> TodoListItem_2 : todo,\nindex,\ntodos,\nsetTodos $$ ### 02-02, 함수와 데이터는 최대한 하류에서 생성, 꼭 필요한 것만 상류에서 생성 - [영상 - 23 06 25, ken 12446, 리액트 수업 46강, 함수와 데이터는 최대한 하류에서 생성, 꼭 필요한 것만 상류에서 생성](https://youtu.be/wtA2SY1iwFU) ### 02-03, newTodoTitle, nsetNewTodoTitle 을 TodoWriteForm 에서 생성 - [영상 - 23 06 25, ken 12446, 리액트 수업 47강, newTodoTitle, nsetNewTodoTitle 을 TodoWriteForm 에서 생성](https://youtu.be/1oSmYnM59o0) - [CODEPEN](https://codepen.io/sangwon7242/pen/bGQBzEp?editors=0011) ### 02-04, App에서 addTodo를 만들 때 더 단순하게 만들기 - [영상 - 23 06 25, ken 12446, 리액트 수업 48강, App에서 addTodo를 만들 때 더 단순하게 만들기](https://youtu.be/cvgvSlmWLLo) - [CODEPEN](https://codepen.io/sangwon7242/pen/Rwqovaz?editors=0010) ### 02-05, 구조분해할당의 리네임 문법으로 TodoWriteForm에서 addTodo 함수를 생성할 수 있도록 허용 - [영상 - 23 06 25, ken 12446, 리액트 수업 49강, 구조분해할당의 리네임 문법으로 TodoWriteForm에서 addTodo 함수를 생성할 수 있도록 허용](https://youtu.be/OM2-o1QbHj8) - [CODEPEN](https://codepen.io/sangwon7242/pen/oNQYmLm?editors=0010) $$uml map App { todos => [] setTodos => 세터 addTodo => setTodos 이용 } map TodoWriteForm { newTodoTitle => '' nsetNewTodoTitle => 세터 addTodo => _addTodo 이용 } map TodoList { todos.map => todo } map TodoListItem_0 { removeTodo => setTodos 이용 } map TodoListItem_1 { removeTodo => setTodos 이용 } map TodoListItem_2 { removeTodo => setTodos 이용 } App --> TodoWriteForm : addTodo:_addTodo App --> TodoList : todos,\nsetTodos TodoList --> TodoListItem_0 : todo,\nindex,\ntodos,\nsetTodos TodoList --> TodoListItem_1 : todo,\nindex,\ntodos,\nsetTodos TodoList --> TodoListItem_2 : todo,\nindex,\ntodos,\nsetTodos $$ ### 02-06, 상류에서는 최대한 원육를 가공하고, 하류에서 꼭 필요한 부분만 넘겨주세요. - [영상 - 23 06 25, ken 12446, 리액트 수업, 50강, 상류에서는 최대한 원육를 가공하고, 하류에서 꼭 필요한 부분만 넘겨주세요.](https://youtu.be/LtvunfdTE7I) ### 02-07, removeTodo를 상류에서 생성하여 하류로 보내줌 - [영상 - 23 06 25, ken 12446, 리액트 수업, 51강, removeTodo를 상류에서 생성하여 하류로 보내줌](https://youtu.be/5GMkMTgFnPQ) - [CODEPEN](https://codepen.io/sangwon7242/pen/dyQOapr?editors=0010) ## 미션 3. setState 함수 시작 ### 03-01, setState 함수를 호출해도 함수가 즉시 다시 실행되지는 않는다 - [영상 - 23 06 25, ken 12446, 리액트 수업, 52강, setState 함수를 호출해도 함수가 즉시 다시 실행되지는 않는다](https://youtu.be/lJQzVGXeQhc) - [CODEPEN](https://codepen.io/sangwon7242/pen/ExONrWp?editors=1011) ### 03-02, setState 함수를 사용하는 2가지 방법 - [영상 - 23 06 25, ken 12446, 리액트 수업, 53강, setState 함수를 사용하는 2가지 방법](https://youtu.be/BKqCXT7aZ8U) - [CODEPEN](https://codepen.io/sangwon7242/pen/ZEmBwKv?editors=1011) ### 03-03, setState 함수를 사용하는 2가지 방법의 차이점 - [영상 - 23 06 25, ken 12446, 리액트 수업, 54강, setState 함수를 사용하는 2가지 방법의 차이점](https://youtu.be/40rxMc0IV7I) - [CODEPEN](https://codepen.io/sangwon7242/pen/OJabdjN?editors=0010) ### 03-04, todo list에 setState 콜백세팅 형태 적용할 곳 찾아보기 - [영상 - 23 06 25, ken 12446, 리액트 수업, 55강, todo list에 setState 콜백세팅 형태 적용할 곳 찾아보기](https://youtu.be/4X0UbYEayCk) - [CODEPEN](https://codepen.io/sangwon7242/pen/OJabdgM?editors=0010) ## 미션 4. 할일 리스트 아이템 수정 1. - [ ] 04-01 단계, 아이템 수정UI 레이아웃 작성 - [영상 - 23 06 25, ken 12446, 리액트 수업, 56강, 아이템 수정UI 레이아웃 작성](https://youtu.be/a92neicRTSY) - [CODEPEN](https://codepen.io/sangwon7242/pen/ZEmBwax?editors=0010) 1. - [ ] 04-02 단계, 아이템 수정모드일 때 입력창 보임 - [영상 - 23 06 25, ken 12446, 리액트 수업, 57강, 아이템 수정모드일 때 입력창 보임](https://youtu.be/NuZhFMnmSHU) - [CODEPEN](https://codepen.io/sangwon7242/pen/GRwNzyp?editors=0010) 1. - [ ] 04-03 단계, 아이템 수정모드 취소버튼 - [영상 - 23 07 01, ken 12446, 리액트 수업, 58강, 아이템 수정모드 취소버튼](https://youtu.be/Ksxnhr5ATSQ) - [CODEPEN](https://codepen.io/sangwon7242/pen/rNQmvOb?editors=0010) 1. - [ ] 04-04 단계, 아이템 수정모드 취소 후 다시 수정모드 진입시 value 값 초기화 - [영상 - 23 07 01, ken 12446, 리액트 수업, 59강, 아이템 수정모드 취소 후 다시 수정모드 진입시 value 값 초기화](https://youtu.be/2jcAgW3y5Vk) - [CODEPEN](https://codepen.io/sangwon7242/pen/LYXymNp?editors=0010) 1. - [ ] 04-05 단계, 아이템 수정기능 완료 - [영상 - 23 07 01, ken 12446, 리액트 수업, 60강, 아이템 수정기능 완료](https://youtu.be/v8k_Mvay1Mg) - [CODEPEN](https://codepen.io/sangwon7242/pen/RwqVyRK?editors=0010) # 챕터 5 시작 ## 05-01 시작 ## 미션 1, 업그레이드 된 TODOLIST 구현 ### 01-01, 다음 버전의 TODOLIST 기능들 소개 - [영상 - 23 07 01, ken 12446, 리액트 수업, 61강, 다음 버전의 TODOLIST 기능들 소개](https://youtu.be/QGJyv4xmxyM) ### 미션 2, 2차원 데이터로 이루어진 TODOLIST 구현 1. - [ ] 02-01 단계, 다시 시작, 새 할일 입력받고, 리스팅하기 - [영상 - 23 07 01, ken 12446, 리액트 수업, 62강, 다시 시작, 새 할일 입력받고, 리스팅하기](https://youtu.be/5egulGEqSG8) - [CODEPEN](https://codepen.io/sangwon7242/pen/bGQWMWM?editors=0010) 1. - [ ] 02-02 단계, 새 할일 등록시 번호 증가 - [영상 - 23 07 01, ken 12446, 리액트 수업, 63강, 새 할일 등록시 번호 증가](https://youtu.be/FFHyauwqUFg) - [CODEPEN](https://codepen.io/sangwon7242/pen/YzRVLYV?editors=0010) 1. - [ ] 02-03 단계, 새 할일 등록 함수 매개변수 구조 변경 - [영상 - 23 07 01, ken 12446, 리액트 수업, 64강, 새 할일 등록 함수 매개변수 구조 변경](https://youtu.be/j5-ql9ObXpY) - [CODEPEN](https://codepen.io/sangwon7242/pen/yLQbjpr?editors=0010) 1. - [ ] 02-04 단계, 할일 목록 UI 구현, 아이템 삭제 - [영상 - 23 07 01, ken 12446, 리액트 수업, 65강, 할일 목록 UI 구현, 아이템 삭제](https://youtu.be/wLN3G1vCVuE) - [CODEPEN](https://codepen.io/sangwon7242/pen/vYQmjjJ?editors=0010) 1. - [ ] 02-05 단계, 아이템 수정 UI - [영상 - 23 07 01, ken 12446, 리액트 수업, 66강, 아이템 수정 UI](https://youtu.be/gbPlLraUxvw) - [CODEPEN](https://codepen.io/sangwon7242/pen/YzRVLOx?editors=0010) 1. - [ ] 02-06 단계, 아이템 수정 UI의 입력창 값 다루기 - [영상 - 23 07 01, ken 12446, 리액트 수업, 67강, 아이템 수정 UI의 입력창 값 다루기](https://youtu.be/CyXzKyFtFiQ) - [CODEPEN](https://codepen.io/sangwon7242/pen/abQWGPZ?editors=0010) 1. - [ ] 02-07 단계, 아이템 수정 완료 - [영상 - 23 07 01, ken 12446, 리액트 수업, 68강, 아이템 수정 완료](https://youtu.be/vsC1X9JjNdg) - [CODEPEN](https://codepen.io/sangwon7242/pen/KKrmREL?editors=0010) 1. - [ ] 02-08단계, 관련된 state를 한 덩어리로 묶기 - [영상 - 23 07 02, ken 12446, 리액트 수업, 69강, 관련된 state를 한 덩어리로 묶기](https://youtu.be/jPJpydchlrw) - [CODEPEN](https://codepen.io/sangwon7242/pen/wvQdZKr?editors=0010) ## 미션 3, immer ### 03-01, immer 소개 - [영상 - 23 07 02, ken 12446, 리액트 수업, 70강, immer 소개](https://youtu.be/a8Jjqye8zXQ) - [CODEPEN](https://codepen.io/sangwon7242/pen/NWEjmRY?editors=0010) ### 03-02, immmer 적용 - [영상 - 23 07 02, ken 12446, 리액트 수업, 71강, immer 적용](https://youtu.be/A7nB-0CLkMU) - [CODEPEN](https://codepen.io/sangwon7242/pen/xxQdedb?editors=0010) ## 05-02 시작 ## 05-02 : useRef --- $$ppt title: PPT-05-02 # useRef의 두가지 용법,[br /]1st : DOM 조작 ```jsx const inputRef = useRef(null); return

``` # useRef의 두가지 용법,[br /]2nd : 기억 ```jsx const noRef = useRef(10); return

액션

``` # 불변성을 유지하면서 삭제 ```jsx const arr = [10, 20, 30]; const newArr = arr.filter((el, index) => index != 0); // [20, 30] ``` # 불변성을 유지하면서 수정 ```jsx const arr = [10, 20, 30]; const newArr = arr.map((el, index) => index == 0 ? 100 : el); // [100, 20, 30] // index 0 자리에있던 10이 100으로 수정됨 ``` $$ --- ### 미션 1 : useRef 기초 1. - [ ] 01-01 단계, useRef를 사용해서 dom 조작하기 - [영상 - 23 07 02, ken 12446, 리액트 수업, 72강, useRef를 사용해서 dom 조작하기](https://youtu.be/5cE6Cgxgcuc) - [CODEPEN](https://codepen.io/sangwon7242/pen/LYXyvjN?editors=0110) 1. - [ ] 01-02 단계, 숫자기록입력상자에 useRef를 이용하여 dom 조작 - [영상 - 23 07 02, ken 12446, 리액트 수업, 73강, 숫자기록입력상자에 useRef를 이용하여 dom 조작](https://youtu.be/yPX0s6kwDh4) - [CODEPEN - 시작](https://codepen.io/sangwon7242/pen/xxQdyoj?editors=0010) - [CODEPEN - 정답](https://codepen.io/sangwon7242/pen/JjeNVpG?editors=0010) 1. - [ ] 01-03 단계, useRef와 useState의 차이점 - [영상 - 23 07 02, ken 12446, 리액트 수업, 74강, useRef와 useState의 차이점](https://youtu.be/aa85Ytq3o1Y) - [CODEPEN](https://codepen.io/sangwon7242/pen/rNQmbrB?editors=0011) ## 05-03 시작 ## 05-03 : useEffect, useMemo, React,momo, useCallback $$ppt title: PPT-05-03 # useEffect, 리랜더링시마다 실행되는 리액트에서,[br /]딱 1번만 실행되어야 하는 경우에 사용 ```jsx const a = 10; // 리랜더링 마다 실행 useEffect(() => { // 딱 한번 실행 }); ``` # useMemo, 리랜더링시마다 쓸데없는 계산을 하지 않고,[br /]한번 계산한 결과를 기억 ```jsx const key = 10; // key 변수의 값이 바뀌지 않는한 실제 계산은 반복되지 않는다. const rs = useMemo(() => { return 10 * 10 * 10 * 10 * 10; }, [key]); ``` # React.memo, props가 바뀌지 않으면[br /]리랜더링 하지않는 컴포넌트 만들 때 ```jsx function OrderList() { /* 구현 */ } // 이 함수를 실행하면 결국 OrderList가 실행된다. // 아래 함수는 OrderList 함수보다 덜 민감하게 실행된다. const MemoizedOrderList = React.memo(OrderList); function App() { return ; } ``` # useCallback, 리랜더링시마다 함수를 만들지 않고,[br /]한번만든 함수를 기억 ```jsx const a = () => 10 + 20; // 매 랜더링마다 실행, 즉 함수생성 const b = useCallback(() => 10 + 20, []); // 매 랜더링시마다, 함수생성을 하지 않음 ``` $$ --- ### 미션 1 : useEffect 기초 1. - [ ] 01-01 단계, useEffect를 사용하여 함수의 특정부분 재실행 방지 - [영상 - 23 07 02, ken 12446, 리액트 수업, 75강, useEffect를 사용하여 함수의 특정부분 재실행 방지](https://youtu.be/5gsxRHcpMJc) - [CODEPEN](https://codepen.io/sangwon7242/pen/ZEmKZqg?editors=0011) 1. - [ ] 01-02 단계, 의존성 배열 인자를 제거하면, 매번 실행은 되지만 타이밍이 늦어진다. - [영상 - 23 07 02, ken 12446, 리액트 수업, 76강, 의존성 배열 인자를 제거하면, 매번 실행은 되지만 타이밍이 늦어진다.](https://youtu.be/lvXXygip5uc) - [CODEPEN](https://codepen.io/sangwon7242/pen/BaGREOV?editors=0111) 1. - [ ] 01-03 단계, 타이팅이 늦어져야 하는 경우, useRef, useEffect 조합 - [영상 - 23 07 15, ken 12446, 리액트 수업, 77강, 타이팅이 늦어져야 하는 경우, useRef, useEffect 조합](https://youtu.be/t4c1ISaBnQ0) - [CODEPEN](https://codepen.io/sangwon7242/pen/WNYMqWP?editors=0011) 1. - [ ] 01-04 단계, 자식이 리랜더링 되는것은 부모 관계없고, 부모가 리랜더링되면 자식도 리랜더링 됨 - [영상 - 23 07 15, ken 12446, 리액트 수업, 78강, 자식이 리랜더링 되는것은 부모 관계없고, 부모가 리랜더링되면 자식도 리랜더링 됨](https://youtu.be/tQafcty_xkM) - [CODEPEN](https://codepen.io/sangwon7242/pen/JjepgPE?editors=0111) 1. - [ ] 01-05 단계, useEffect의 의존성배열을 이용해서, 실행민감도 조절 - [영상 - 23 07 15, ken 12446, 리액트 수업, 79강, useEffect의 의존성배열을 이용해서, 실행민감도 조절](https://youtu.be/YB7Ewr2i47I) - [CODEPEN](https://codepen.io/sangwon7242/pen/MWzQNaY?editors=0010) ### 미션 2 : useMemo 사용하여 쓸데없는 연산 줄이기 1. - [ ] 02-01 단계, useMemo를 하기 위한 준비, 실행이 완료되는데 엄청 오래 걸리는 함수 구현 - [영상 - 23 07 15, ken 12446, 리액트 수업, 80강, useMemo를 하기 위한 준비, 실행이 완료되는데 엄청 오래 걸리는 함수 구현](https://youtu.be/NezQKbCxRgA) - [CODEPEN](https://codepen.io/sangwon7242/pen/QWJQeEX?editors=0012) - [제타위키 - https://zetawiki.com/wiki/자바스크립트_수행시간_측정](https://to2.kr/eCb) 1. - [ ] 02-02 단계, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현 - [영상 - 23 07 15, ken 12446, 리액트 수업, 81강, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현](https://youtu.be/JBaRovBhm08s) - [CODEPEN](https://codepen.io/sangwon7242/pen/XWyZvNj?editors=0011) 1. - [ ] 02-03 단계, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 state 적용 - [영상 - 23 07 15, ken 12446, 리액트 수업, 82강, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 state 적용](https://youtu.be/PpPb0mR5fQQ) - [CODEPEN](https://codepen.io/sangwon7242/pen/rNQJXGW?editors=0011) 1. - [ ] 02-04 단계, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 useEffect 적용 - [영상 - 23 07 15, ken 12446, 리액트 수업, 83강, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 useEffect 적용](https://youtu.be/SO6_7AR-QUM) - [CODEPEN](https://codepen.io/sangwon7242/pen/vYQdoea?editors=0011) 1. - [ ] 02-05 단계, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 useMemo 적용 - [영상 - 23 07 15, ken 12446, 리액트 수업, 84강, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 useMemo 적용](https://youtu.be/vcwcPzWd5rQ) - [CODEPEN](https://codepen.io/sangwon7242/pen/OJaQKOq?editors=0011) ### 미션 3 : React.memo 사용하여 쓸데없는 연산 줄이기 1. - [ ] 03-01 단계, 실행이 오래걸리는 PrimeNosCount 컴포넌트 구현 - [영상 - 23 07 22, ken 12446, 리액트 수업, 85강, 실행이 오래걸리는 PrimeNosCount 컴포넌트 구현](https://youtu.be/KssH96j_XAU) - [CODEPEN](https://codepen.io/sangwon7242/pen/PoxBGzm?editors=0010) 1. - [ ] 03-02 단계, useEffect로 속도 최적화 - [영상 - 23 07 22, ken 12446, 리액트 수업, 86강, useEffect로 속도 최적화](https://youtu.be/2kjmX3rG2JI) - [CODEPEN](https://codepen.io/sangwon7242/pen/PoxBGzm?editors=0011) 1. - [ ] 03-03 단계, useMemo로 속도 최적화 - [영상 - 23 07 22, ken 12446, 리액트 수업, 87강, useMemo로 속도 최적화](https://youtu.be/Iwzw_yRC660) - [CODEPEN](https://codepen.io/sangwon7242/pen/BaGPLQw?editors=0011) 1. - [ ] 03-04 단계, React.memo로 속도 최적화 - [영상 - 23 07 22, ken 12446, 리액트 수업, 88강, React.memo로 속도 최적화](https://youtu.be/o8akvUkH1BI) - [CODEPEN](https://codepen.io/sangwon7242/pen/QWJBKdr?editors=0011) ### 미션 4 : useCallback 으로 어이없는 리랜더링 막기 1. - [ ] 04-01 단계, useCallback을 사용하기 위한 환경을 만들기 - [영상 - 23 07 22, ken 12446, 리액트 수업, 89강, useCallback을 사용하기 위한 환경을 만들기](https://youtu.be/MOt9UTEdpQM) - [CODEPEN](https://codepen.io/sangwon7242/pen/xxQJEPb?editors=0111) 1. - [ ] 04-02 단계, useCallback을 사용하여 어이없는 리랜더링 막기 - [영상 - 23 07 22, ken 12446, 리액트 수업, 90강, useCallback을 사용하여 어이없는 리랜더링 막기](https://youtu.be/Qxrl8Lz0dO4) - [CODEPEN](https://codepen.io/sangwon7242/pen/RwqBGxV?editors=0011) ## 05-04 시작 ## 05-04 : 멀티체크박스 관리 기능 구현 ### 미션 1 : 음식주문시 옵션기능 1. - [ ] 01-01 단계, 음식옵션 리스트 - [영상 - 23 07 22, ken 12446, 리액트 수업, 91강, 음식옵션 리스트](https://youtu.be/0cgxS9cA3p8) - [CODEPEN](https://codepen.io/sangwon7242/pen/zYMLKmx?editors=0010) 1. - [ ] 01-02 단계, 음식옵션 리스트아이템 체크기능 - [영상 - 23 07 22, ken 12446, 리액트 수업, 92강, 음식옵션 리스트아이템 체크기능](https://youtu.be/t59LkZUGYGA) - [CODEPEN](https://codepen.io/sangwon7242/pen/WNYKGJg?editors=0010) 1. - [ ] 01-03 단계, 리스트아이템을 전부 체크하면, 전체 토글 체크박스도 체크 되도록 - [영상 - 23 07 23, ken 12446, 리액트 수업, 93강, 리스트아이템을 전부 체크하면, 전체 토글 체크박스도 체크 되도록](https://youtu.be/I4Pld5Jg-L0) - [CODEPEN](https://codepen.io/sangwon7242/pen/rNQrJdM?editors=0010) 1. - [ ] 01-04 단계, 전체 토글 체크박스를 클릭시 그 상태가 전체에 반영 - [영상 - 23 07 23, ken 12446, 리액트 수업, 94강, 전체 토글 체크박스를 클릭시 그 상태가 전체에 반영](https://youtu.be/gZqaAAdOZfk) - [CODEPEN](https://codepen.io/sangwon7242/pen/yLQqvjY?editors=0010) 1. - [ ] 01-05 단계, new Array().fill 기능으로 초기상태를 쉽게 만들기 - [영상 - 23 07 23, ken 12446, 리액트 수업, 95강, 전체 토글 체크박스를 클릭시 그 상태가 전체에 반영](https://youtu.be/jMmhMQa400g) - [CODEPEN](https://codepen.io/sangwon7242/pen/WNYKMKe?editors=0010) 1. - [ ] 01-06 단계, 옵션의 선택개수표시 - [영상 - 23 07 23, ken 12446, 리액트 수업, 96강, 전체 토글 체크박스를 클릭시 그 상태가 전체에 반영](https://youtu.be/g-p-V3NJraM) - [CODEPEN](https://codepen.io/sangwon7242/pen/PoxBQBV?editors=0010) 1. - [ ] 01-07 단계, useMemo 사용하여 옵션과 상관없는 변화에 의한 쓸데없는 옵션관련계산 없애기 - [영상 - 23 07 23, ken 12446, 리액트 수업, 97강, 전체 토글 체크박스를 클릭시 그 상태가 전체에 반영](https://youtu.be/N1gyn1JPMdI) - [CODEPEN](https://codepen.io/sangwon7242/pen/mdQjXGQ?editors=0010) 1. - [ ] 01-08 단계, OrderMainFood, OrderOptions 컴포넌트로 나눔 - [영상 - 23 07 23, ken 12446, 리액트 수업, 98강, OrderMainFood, OrderOptions 컴포넌트로 나눔](https://youtu.be/gmBvFsp8lSo) - [CODEPEN](https://codepen.io/sangwon7242/pen/qBQyxvx?editors=0010) 1. - [ ] 01-09 단계, React.memo, useCallback 사용하여 각각의 컴포넌트 자체가 필요할 경우에만 리랜더링 되도록 - [영상 - 23 07 23, ken 12446, 리액트 수업, 99강, React.memo, useCallback 사용하여 각각의 컴포넌트 자체가 필요할 경우에만 리랜더링 되도록](https://youtu.be/gJyntZIuKaQ) - [CODEPEN](https://codepen.io/sangwon7242/pen/jOQpZgW?editors=0011) ## 05-05 시작 ## 05-05 : 정리 ### 미션 1 : 음식주문시 옵션기능 1. - [ ] 01-01 단계, 체크박스, 셀렉트박스, 라디오버튼 - [영상 - 23 07 23, ken 12446, 리액트 수업, 100강, 체크박스, 셀렉트박스, 라디오버튼](https://youtu.be/AuK62KhWpYE) - [CODEPEN](https://codepen.io/sangwon7242/pen/ExOpEao?editors=1100) 1. - [ ] 01-02 단계, 체크박스 다루기 - [영상 - 23 07 23, ken 12446, 리액트 수업, 101강, 체크박스 다루기](https://youtu.be/IpOpbxAWK0E) - [CODEPEN](https://codepen.io/sangwon7242/pen/ZEmjxGK?editors=0110) 1. - [ ] 01-03 단계, 라디오버튼 다루기 - [영상 - 23 07 23, ken 12446, 리액트 수업, 102강, 라디오버튼 다루기](https://youtu.be/UnvlmIfIh04) - [CODEPEN](https://codepen.io/sangwon7242/pen/dyQjmMQ?editors=0110) 1. - [ ] 01-04 단계, 반복문으로 라디오버튼 출력 후 관리 - [영상 - 23 07 23, ken 12446, 리액트 수업, 103강, 반복문으로 라디오버튼 출력 후 관리](https://youtu.be/HMXPrBCHAME) - [CODEPEN](https://codepen.io/sangwon7242/pen/wvQxmWa?editors=0010) 1. - [ ] 01-05 단계, 셀렉트박스 다루기 - [영상 - 23 07 29, ken 12446, 리액트 수업, 104강, 셀렉트박스 다루기](https://youtu.be/HHPsrwwPSr4) - [CODEPEN](https://codepen.io/sangwon7242/pen/wvQQqmz?editors=0010) 1. - [ ] 01-06 단계, 음식주문폼에 체크박스, 라디오버튼 도입, 상황에 따른 상태생성 위치 설명 - [영상 - 23 07 29, ken 12446, 리액트 수업, 105강, 음식주문폼에 체크박스, 라디오버튼 도입, 상황에 따른 상태생성 위치 설명](https://youtu.be/tTSFjC41SHA) - [CODEPEN](https://codepen.io/sangwon7242/pen/Jjeeyvw?editors=0010) # 챕터 6 시작 ## 챕터 06, MUI로 앱을 예쁘게 꾸미기 ## 01-01 시작 ## 미션 1 : MUI 소개 $$ppt title: PPT-01 # Material UI(MUI)는 유명한 리액트 UI 라이브러리 입니다. ![img](https://i.imgur.com/3y21gas.png) # 쉬운 커스터마이징 ![img](https://i.imgur.com/GkzsBaZ.png) # 쉬운 사용 ![img](https://i.imgur.com/KIXiCa8.png) ```jsx ``` $$ 1. - [ ] 01-01 단계, MUI 소개 - [영상 - 23 07 29, ken 12446, 리액트 수업, 106강, MUI 소개](https://youtu.be/EcBlGxu6-DY) - [MUI](https://mui.com/) - [MUI - all components](https://mui.com/material-ui/) 1. - [ ] 01-02 단계, 리액트 MUI 연습장, to2.kr/dDN 소개 - [영상 - 23 07 29, ken 12446, 리액트 수업, 107강, 리액트 MUI 연습장, to2.kr/dDN 소개](https://youtu.be/wcWxHNxODKc) - [CODEPEN](https://codepen.io/sangwon7242/pen/yLQQomj?editors=0010) - [to2.kr/dDN - 리액트 MUI 연습장](https://codepen.io/jangka44/pen/yLpQmOM?editors=0010) 1. - [ ] 01-03 단계, 컴포넌트 설명서 보는 방법 - [영상 - 23 07 29, ken 12446, 리액트 수업, 108강, 컴포넌트 설명서 보는 방법](https://youtu.be/gKhk8zz0KNk) - [CODEPEN](https://codepen.io/sangwon7242/pen/poQQrML?editors=0010) - [MUI - Autocomplete](https://mui.com/material-ui/react-autocomplete/) - [테일윈드 치트시트](https://nerdcave.com/tailwind-cheat-sheet) 1. - [ ] 01-04 단계, 컴포넌트 API 확인 방법 - [영상 - 23 07 29, ken 12446, 리액트 수업, 109강, 컴포넌트 API 확인 방법](https://youtu.be/nggOUzWocQ4) - [MUI - Autocomplete API](https://mui.com/material-ui/api/autocomplete/) 1. - [ ] 01-05 단계, MUI 테마 커스터마이징 하는 방법 - [영상 - 23 07 29, ken 12446, 리액트 수업, 110강, MUI 테마 커스터마이징 하는 방법](https://youtu.be/7TWJd2_1zBU) - [CODEPEN](https://codepen.io/sangwon7242/pen/jOQQLgY?editors=0010) - [https://bareynol.github.io/mui-theme-creator/](https://bareynol.github.io/mui-theme-creator/) ## 미션 2 : MUI 컴포넌트 1. - [ ] 02-01 단계, MUI 컴포넌트, Button - [영상 - 23 07 29, ken 12446, 리액트 수업, 111강, MUI 컴포넌트, Button](https://youtu.be/LEnkROSfSiA) - [to2.kr/dDN - 리액트 MUI 연습장](https://codepen.io/jangka44/pen/yLpQmOM?editors=0010) - [CODEPEN](https://codepen.io/sangwon7242/pen/Jjeeygq?editors=0010) 1. - [ ] 02-02 단계, MUI 컴포넌트, AppBar - [영상 - 23 07 29, ken 12446, 리액트 수업, 112강, MUI 컴포넌트, AppBar](https://youtu.be/np9mKh5ON24) - [CODEPEN](https://codepen.io/sangwon7242/pen/bGQQodr?editors=0110) 1. - [ ] 02-03 단계, MUI 컴포넌트, AppBar, fixed - [영상 - 23 07 29, ken 12446, 리액트 수업, 113강, MUI 컴포넌트, AppBar, fixed](https://youtu.be/zfMKX44yOZM) - [CODEPEN](https://codepen.io/sangwon7242/pen/QWJJqjQ?editors=0010) 1. - [ ] 02-04 단계, MUI 컴포넌트, Snackbar - [영상 - 23 07 29, ken 12446, 리액트 수업, 114강, MUI 컴포넌트, Snackbar](https://youtu.be/HFQQaUEAQ08) - [CODEPEN](https://codepen.io/sangwon7242/pen/NWEEaNw?editors=0010) 1. - [ ] 02-05 단계, MUI 컴포넌트, Snackbar에 Alert 넣기 - [영상 - 23 07 29, ken 12446, 리액트 수업, 115강, MUI 컴포넌트, Snackbar에 Alert 넣기](https://youtu.be/gdClYQPacYs) - [CODEPEN](https://codepen.io/sangwon7242/pen/VwVVMme?editors=0010) 1. - [ ] 02-06 단계, MUI 컴포넌트, Drawer - [영상 - 23 08 05, ken 12446, 리액트 수업, 116강, MUI 컴포넌트, Drawer](https://youtu.be/YWjTspCK69E) - [CODEPEN](https://codepen.io/sangwon7242/pen/QWJJqjQ?editors=0010) 1. - [ ] 02-07 단계, MUI 컴포넌트, TabMenu - [영상 - 23 08 05, ken 12446, 리액트 수업, 117강, MUI 컴포넌트, TabMenu](https://youtu.be/RdVJwmLJZ6o) - [CODEPEN](https://codepen.io/sangwon7242/pen/QWJJqjQ?editors=0010) ## 01-02 시작 ## 01-02 머터리얼 UI 적용 ## 미션 1 : 할일리스트에 MUI 적용 1. - [ ] 01-01 단계, 앱바 - [영상 - 23 08 05, ken 12446, 리액트 수업, 118강, 할일리스트에 MUI 적용, 앱바](https://youtu.be/NTo8BzuoDVo) - [CODEPEN](https://codepen.io/sangwon7242/pen/NWEJXaV?editors=1010) 1. - [ ] 01-02 단계, 할일추가 폼 - [영상 - 23 08 05, ken 12446, 리액트 수업, 119강, 할일리스트에 MUI 적용, 할일 추가 폼](https://youtu.be/US5iqo_IATA) - [CODEPEN](https://codepen.io/sangwon7242/pen/eYQXyyz?editors=0010) 1. - [ ] 01-03 단계, 할일추가 폼 꾸미기 - [영상 - 23 08 05, ken 12446, 리액트 수업, 120강, 할일리스트에 MUI 적용, 할일추가 폼 꾸미기](https://youtu.be/rIR1YKG9en4) - [CODEPEN](https://codepen.io/sangwon7242/pen/BaGbJVE?editors=0010) 1. - [ ] 01-04 단계, 할일리스트 - [영상 - 23 08 05, ken 12446, 리액트 수업, 121강, 할일리스트에 MUI 적용, 할일 리스트](https://youtu.be/RvrYy0EObhI) - [CODEPEN](https://codepen.io/sangwon7242/pen/BaGbJOe?editors=0010) 1. - [ ] 01-05 단계, 테스트 데이터 생성, 할일 3개 - [영상 - 23 08 05, ken 12446, 리액트 수업, 122강, 할일리스트에 MUI 적용, 테스트 데이터 생성, 할일 3개](https://youtu.be/lB1tNbdn4sA) - [CODEPEN](https://codepen.io/sangwon7242/pen/eYQXyQg?editors=0010) 1. - [ ] 01-06 단계, 할일리스트 꾸미기, Chip 적용 - [영상 - 23 08 05, ken 12446, 리액트 수업, 123강, 할일리스트에 MUI 적용, Chip 적용](https://youtu.be/xB_hGZsYBZg) - [CODEPEN](https://codepen.io/sangwon7242/pen/GRweyzz) 1. - [ ] 01-07 단계, 할일리스트 꾸미기, 본문 꾸미기 - [영상 - 23 08 05, ken 12446, 리액트 수업, 124강, 할일리스트에 MUI 적용, 본문 꾸미기](https://youtu.be/Mzx_VnQOQfI) - [CODEPEN](https://codepen.io/sangwon7242/pen/RwqdxdE?editors=0010) 1. - [ ] 01-08 단계, 멀티라인 텍스트 필드 - [영상 - 23 08 05, ken 12446, 리액트 수업, 125강, 할일리스트에 MUI 적용, 멀티라인 텍스트 필드](https://youtu.be/3YBvcxpZU3w) - [CODEPEN](https://codepen.io/sangwon7242/pen/oNQVprM?editors=0010) ## 미션 2 : MUI와 테일윈드 같이 사용 1. - [ ] 02-01 단계, 테일윈드 느낌표 기능으로 mui에서 정해놓은 스타일 수정, Chip 상단여백 조절 - [영상 - 23 08 05, ken 12446, 리액트 수업, 126강, MUI와 테일윈드, 테일윈드 느낌표 기능으로 mui에서 정해놓은 스타일 수정, Chip 상단여백 조절](https://youtu.be/Uh458BIJNcU) - [CODEPEN](https://codepen.io/sangwon7242/pen/zYMbROE?editors=0010) 1. - [ ] 02-02 단계, 할일리스트 최신순으로 정렬 - [영상 - 23 08 05, ken 12446, 리액트 수업, 127강, MUI와 테일윈드, 할일리스트 최신순으로 정렬](https://youtu.be/6wrF6boNq08) - [CODEPEN](https://codepen.io/sangwon7242/pen/bGQZLNd?editors=0010) 1. - [ ] 02-03 단계, MUI로 글자색을 primary 색상으로 변경 - [영상 - 23 08 05, ken 12446, 리액트 수업, 128강, MUI와 테일윈드, MUI로 글자색을 primary 색상으로 변경](https://youtu.be/UzOy_qPRj0g) - [CODEPEN](https://codepen.io/sangwon7242/pen/oNQVEgP?editors=0010) 1. - [ ] 02-04 단계, CSS 변수 - [영상 - 23 08 05, ken 12446, 리액트 수업, 129강, MUI와 테일윈드, CSS 변수](https://youtu.be/NzwsG_CmCb4) - [CODEPEN](https://codepen.io/sangwon7242/pen/NWEJyxx?editors=1100) 1. - [ ] 02-05 단계, 자바스크립트에서 정의된 색상을 CSS에서 사용하는 방법 - [영상 - 23 08 05, ken 12446, 리액트 수업, 130강, MUI와 테일윈드, 자바스크립트에서 정의된 색상을 CSS에서 사용하는 방법](https://youtu.be/ituGZhSEpAE) - [CODEPEN](https://codepen.io/sangwon7242/pen/RwqdQrO?editors=0110) 1. - [ ] 02-06 단계, 테일윈드 JIT을 이용한 css 변수접근 - [영상 - 23 08 06, ken 12446, 리액트 수업, 131강, MUI와 테일윈드, 테일윈드 JIT을 이용한 css 변수접근](https://youtu.be/nAEUJiU-Zms) - [CODEPEN](https://codepen.io/sangwon7242/pen/xxQBmBP) 1. - [ ] 02-07 단계, 테일윈드의 다양한 조건적 스타일링 - [영상 - 23 08 06, ken 12446, 리액트 수업, 132강, MUI와 테일윈드, 테일윈드의 다양한 조건적 스타일링](https://youtu.be/SKcWjFBEJ6U) - [CODEPEN](https://codepen.io/sangwon7242/pen/xxQBmBP?editors=1100) 1. - [ ] 02-08 단계, mui 테마 색상들을 CSS에서 사용할 수 있도록, CSS 변수화 - [영상 - 23 08 06, ken 12446, 리액트 수업, 133강, mui 테마 색상들을 CSS에서 사용할 수 있도록, CSS 변수화](https://youtu.be/QPtuvIp0GLo) - [CODEPEN](https://codepen.io/sangwon7242/pen/ZEmPVdL?editors=0010) ## 01-03 시작 ## 01-03 테일윈드 적용 ## 미션 1 : 할일리스트 좌측에 체크박스, 우측 옵션버튼 - [ ] 01-01 단계. 레이아웃 - [영상 - 23 08 06, ken 12446, 리액트 수업, 134강, 레이아웃](https://youtu.be/twfMNVlje3M) - [CODEPEN](https://codepen.io/sangwon7242/pen/RwqdvNv?editors=0010) - [ ] 01-02 단계. 좌측에 버튼, 버튼내용물을 수직상단으로 정렬 - [영상 - 23 08 06, ken 12446, 리액트 수업, 135강, 좌측에 버튼, 버튼내용물을 수직상단으로 정렬](https://youtu.be/-sDMQuKrwMc) - [CODEPEN](https://codepen.io/sangwon7242/pen/GRwezRL?editors=1010) - [ ] 01-03 단계. 좌측 버튼의 border-radius 세부조정 - [영상 - 23 08 06, ken 12446, 리액트 수업, 136강, 좌측 버튼의 border-radius 세부조정](https://youtu.be/QGGl7f0vID4) - [CODEPEN - border-radius 실험](https://codepen.io/pen) - [CODEPEN](https://codepen.io/sangwon7242/pen/PoxLVwr?editors=1010) - [ ] 01-04 단계. 체크박스 크기, 체크색상, 언체크색상 - [영상 - 23 08 06, ken 12446, 리액트 수업, 137강, 체크박스 크기, 체크색상, 언체크색상](https://youtu.be/-BER5RgkLLU) - [CODEPEN](https://codepen.io/sangwon7242/pen/VwVRgLE?editors=0010) - [ ] 01-05 단계. 우측옵션버튼 꾸미기 - [영상 - 23 08 06, ken 12446, 리액트 수업, 138강, 우측옵션버튼 꾸미기](https://youtu.be/GMtfXXNXdW8) - [CODEPEN](https://codepen.io/sangwon7242/pen/wvQONMB?editors=0010) - [ ] 01-06 단계. 우측옵션버튼 border-radius 세부조정 - [영상 - 23 08 06, ken 12446, 리액트 수업, 139강, 우측옵션버튼 border-radius 세부조정](https://youtu.be/_57Mg6sOB3Y) - [CODEPEN](https://codepen.io/sangwon7242/pen/YzRgBqd?editors=0010) - [ ] 01-07 단계. 좌측버튼의 내용물과 우측버튼의 내용물에 고정높이를 주어서 균형을 맞춤 - [영상 - 23 08 06, ken 12446, 리액트 수업, 140강, 좌측버튼의 내용물과 우측버튼의 내용물에 고정높이를 주어서 균형을 맞춤](https://youtu.be/TJy49oDbG3E) - [CODEPEN](https://codepen.io/sangwon7242/pen/OJaqdRJ?editors=0010) - [ ] 01-08 단계, 할일본문의 상단, 하단에 margin - [영상 - 23 08 06, ken 12446, 리액트 수업, 141강, 할일본문의 상단, 하단에 margin](https://youtu.be/6behsNha4lg) - [CODEPEN](https://codepen.io/sangwon7242/pen/yLQwZVM?editors=0010) - [ ] 01-09 단계, 좌측버튼 우측에 divider 넣기 - [영상 - 23 08 06, ken 12446, 리액트 수업, 142강, 좌측버튼 우측에 divider 넣기](https://youtu.be/1aHtocycd4U) - [CODEPEN](https://codepen.io/sangwon7242/pen/poQYGRR?editors=0010) - [ ] 01-10 단계, 모바일이 아닌 환경에서도 모바일과 비슷한 느낌의 스크롤이 나오도록 - [영상 - 23 08 06, ken 12446, 리액트 수업, 143강, 모바일이 아닌 환경에서도 모바일과 비슷한 느낌의 스크롤이 나오도록](https://youtu.be/7brTPszJkDI) - [CODEPEN - overlay 스크롤바](https://codepen.io/sangwon7242/pen/mdQovWZ?editors=0100) - [CODEPEN](https://codepen.io/sangwon7242/pen/zYMbewR?editors=0110) ## 01-03 시작 ## 01-03 정리 ## 미션 1 : 옵션드로어 - [ ] 01-01 단계, 옵션 드로어 - [영상 - 23 08 06, ken 12446, 리액트 수업, 144강, 옵션 드로어](https://youtu.be/ArN4KIMW-QE) - [CODEPEN](https://codepen.io/sangwon7242/pen/MWzxLov?editors=0010) - [ ] 01-02 단계, 각각의 컴포넌트로 분리 - [영상 - 23 08 06, ken 12446, 리액트 수업, 145강, 각각의 컴포넌트로 분리](https://youtu.be/m-nwUWYQBms) - [CODEPEN](https://codepen.io/sangwon7242/pen/MWzxLov?editors=0010) - [ ] 01-03 단계, 옵션버튼 누르면 드로어 나오도록 - [영상 - 23 08 06, ken 12446, 리액트 수업, 146강, 옵션버튼 누르면 드로어 나오도록](https://youtu.be/Bs4FK6ZQohU) - [CODEPEN](https://codepen.io/sangwon7242/pen/MWzxLov/be4966067b829524ac0e30cf5ca7eb0d?editors=0010) - [ ] 01-04 단계, 드로어관련된 가독성 개선 - [영상 - 23 08 12, ken 12446, 리액트 수업, 147강, 드로어관련된 가독성 개선](https://youtu.be/E93N-CyIlZo) - [CODEPEN](https://codepen.io/sangwon7242/pen/ZEmdqGE?editors=0010) - [ ] 01-05 단계, 옵션드로어 커스텀 훅 - [영상 - 23 08 12, ken 12446, 리액트 수업, 148강, 옵션드로어 커스텀 훅](https://youtu.be/CDF8iHg1KNg) - [CODEPEN](https://codepen.io/sangwon7242/pen/NWEZOGe?editors=0010) - [ ] 01-06 단계, TodoOptionDrawer 컴포넌트 - [영상 - 23 08 12, ken 12446, 리액트 수업, 149강, TodoOptionDrawer 컴포넌트](https://youtu.be/CzMwHX47OdE) - [CODEPEN](https://codepen.io/sangwon7242/pen/oNQraYe?editors=0010) - [ ] 01-07 단계, SwipableDrawer로 교체 - [영상 - 23 08 12, ken 12446, 리액트 수업, 150강, SwipableDrawer로 교체](https://youtu.be/-4-dnAEDidc) - [CODEPEN](https://codepen.io/sangwon7242/pen/qBQzJRm?editors=0010) - [ ] 01-08 단계, 드로어의 내용으로 리스트 넣기 - [영상 - 23 08 12, ken 12446, 리액트 수업, 151강, 드로어의 내용으로 리스트 넣기](https://youtu.be/o2LVzf7zMt8) - [CODEPEN](https://codepen.io/sangwon7242/pen/ZEmdqeG?editors=0010) - [ ] 01-09 단계, items-baseline, line-height 관련 실험 - [영상 - 23 08 12, ken 12446, 리액트 수업, 152강, items-baseline, line-height 관련 실험](https://youtu.be/ekM3Y4QJ-TU) - [CODEPEN](https://codepen.io/sangwon7242/pen/qBQzJXj?editors=1100) - [ ] 01-10 단계, 드로어관련된 가독성 개선 - [영상 - 23 08 12, ken 12446, 리액트 수업, 153강, 수정, 삭제버튼에 아이콘 넣기](https://youtu.be/ezQhP7KRNU8) - [CODEPEN](https://codepen.io/sangwon7242/pen/xxQoyPd?editors=0010) ## 미션 2 : 수정, 삭제기능 - [ ] 02-01 단계, 할일삭제, todoOptionDrawerStatus에서 Status를 State로 변경 - [영상 - 23 08 12, ken 12446, 리액트 수업, 154강, 할일삭제, todoOptionDrawerStatus에서 Status를 State로 변경](https://youtu.be/6zhwHLtWFw8) - [CODEPEN - removeTodoById 실험](https://codepen.io/sangwon7242/pen/vYQqVra?editors=0012) - [CODEPEN](https://codepen.io/sangwon7242/pen/zYMVmLZ?editors=0010) - [ ] 02-02 단계, 수정을 위한 모달 - [영상 - 23 08 12, ken 12446, 리액트 수업, 155강, 수정을 위한 모달](https://youtu.be/qgOq8j0ugrE) - [CODEPEN](https://codepen.io/sangwon7242/pen/PoxryXL?editors=0010) - [ ] 02-03 단계, 수정버튼을 누르면 모달이 나오도록 - [영상 - 23 08 12, ken 12446, 리액트 수업, 156강, 수정버튼을 누르면 모달이 나오도록](https://youtu.be/aRga3efdus0) - [CODEPEN](https://codepen.io/sangwon7242/pen/OJaeBdY?editors=0010) - [ ] 02-04 단계, 할일수정모달 커스텀 훅 - [영상 - 23 08 12, ken 12446, 리액트 수업, 157강, 할일수정모달 커스텀 훅](https://youtu.be/fEc5ylnqqKQ) - [CODEPEN](https://codepen.io/sangwon7242/pen/gOQNBEE?editors=0010) - [ ] 02-05 단계, 할일수정모달을 별도의 컴포넌트로 분리, 할일 수정 폼 구현 - [영상 - 23 08 12, ken 12446, 리액트 수업, 158강, 할일수정모달을 별도의 컴포넌트로 분리, 할일 수정 폼 구현](https://youtu.be/t2FYpnWhHQ0) - [CODEPEN](https://codepen.io/sangwon7242/pen/ExOBdzw?editors=0010) - [ ] 02-06 단계, 할일수정 폼 처리 - [영상 - 23 08 12, ken 12446, 리액트 수업, 159강, 할일수정 폼 처리](https://youtu.be/s2mEeJdFKzU) - [CODEPEN](https://codepen.io/sangwon7242/pen/zYMVMYE?editors=0010) - [ ] 02-07 단계, 할일삭제 전에 confirm - [영상 - 23 08 12, ken 12446, 리액트 수업, 160강, 할일삭제 전에 confirm](https://youtu.be/R2yLM5Nb9Q0) - [CODEPEN](https://codepen.io/sangwon7242/pen/eYQwQmW?editors=0010) - [ ] 02-08 단계, 할일수정이 취소되거나 완료되면, 드로어까지 종료 - [영상 - 23 08 12, ken 12446, 리액트 수업, 161강, 할일수정이 취소되거나 완료되면, 드로어까지 종료](https://youtu.be/v_ZNBAnVfIc) - [CODEPEN](https://codepen.io/sangwon7242/pen/eYQwQmW?editors=0010)