# 수업페이지 - [페이지 : https://www.slog.gg/p/13721](https://www.slog.gg/p/13721) # 리액트 시작소스코드 - [리액트 시작소스코드](https://codepen.io/sangwon7242/pen/JjQKpBW?editors=0010) # 필수 사전지식 - [필수사전지식 - HTML, CSS](https://www.slog.gg/p/13512) - [필수사전지식 - Javscript, JQuery](https://www.slog.gg/p/13626) # 리액트와 리액트 네이티브를 사용하는 이유 | **구분** | **리액트(React)** | **리액트 네이티브(React Native)** | |--------------------|-------------------------------------------------|------------------------------------------------| | **어디에 쓰이나요?** | 웹사이트 개발에 사용해요. | 모바일 앱 개발, 특히 안드로이드와 iOS 앱을 만들 때 사용해요. | | **주요 기능** | 브라우저에서 동작하는 웹 페이지를 만들어요. | 웹이 아니라 실제 앱으로 변환되서 폰에서 동작하는 앱을 만들어요. | | **공통점** | 둘 다 같은 리액트의 개념을 사용해요. 컴포넌트나 상태 관리 같은 부분에서요. | 똑같이 리액트의 개념을 사용해요. 코딩 방식도 비슷하죠. | | **차이점** | 웹 브라우저에서 동작해요. | 안드로이드와 iOS 같은 모바일 환경에서 동작해요. | | **언어** | 자바스크립트를 주로 사용해요. | 자바스크립트를 사용하지만, 네이티브 앱 요소와도 연결돼요. | # 자바스크립트 DOM 작동 방식 $$uml actor User User -> Browser : 요청 (Request) Browser -> HTML : HTML 파일 로드 HTML -> DOM : DOM 트리 생성 DOM -> JavaScript : JavaScript 로직 실행 JavaScript -> DOM : DOM 요소 조작 DOM -> Browser : 변경된 DOM을 렌더링 Browser -> User : 웹 페이지 출력 $$ ### 설명: 1. **User**: 사용자가 브라우저에서 웹 페이지를 요청 2. **Browser**: 브라우저가 HTML 파일을 로드하고 DOM 트리를 생성 3. **HTML**: HTML 문서가 DOM으로 변환 4. **DOM**: 브라우저는 HTML을 DOM 트리로 변환하여 웹 페이지 구조를 생성 5. **JavaScript**: 자바스크립트는 이 DOM을 조작하거나 이벤트를 처리 6. **Browser**: 자바스크립트가 DOM을 수정하면, 브라우저는 변경된 내용을 다시 렌더링하여 사용자에게 보여줌 - css에 색상, 투명도, 그림자 등 요소의 스타일을 업데이트해 다시 그리도록 하는 것이 `Repaint`라 함 - 레이아웃의 구조가 변경(글씨 크기, 너비, 높이 수정, 위치 변경 등)이 되어 레이아웃이 다시 계산되고, 계산 된 내용을 반영하는 것을 `Reflow`라 함 # React Virtual DOM 작동 방식 $$uml actor User User -> Browser : 요청 (Request) Browser -> React : React 코드 로드 React -> VirtualDOM : 컴포넌트로 가상 DOM 생성 VirtualDOM -> DOM : 초기 DOM 렌더링 User -> React : 사용자 이벤트 (클릭, 입력 등) React -> VirtualDOM : 상태(State) 업데이트 VirtualDOM -> DiffingAlgorithm : 가상 DOM 비교 (Diff) DiffingAlgorithm -> DOM : 변경된 부분만 실제 DOM에 업데이트 DOM -> Browser : 변경된 DOM을 다시 렌더링 Browser -> User : 업데이트된 페이지 출력 $$ ### 설명: 1. **User**: 사용자가 웹 페이지를 요청 2. **Browser**: 브라우저가 리액트 코드(자바스크립트)를 로드 3. **React**: 리액트는 컴포넌트 기반의 `가상 DOM(Virtual DOM)`을 생성 4. **Virtual DOM**: 가상 DOM은 실제 DOM의 가벼운 , 브라우저에 초기 렌더링이 이루어짐 5. **User**: 사용자가 페이지에서 클릭이나 입력 같은 이벤트를 발생시킴 6. **Virtual DOM**: 가상 DOM은 실제 DOM의 가벼운 사본이며, 브라우저에서 초기 렌더링이 이루어짐 7. **Virtual DOM**: 상태가 바뀌면 가상 DOM도 변경 8. **Diffing Algorithm**: 리액트는 가상 DOM과 이전 가상 DOM을 `비교(diffing)`하여 변경만 실제 DOM에 적용 9. **DOM**: 변경된 부분만 실제 DOM에 업데이트되어 브라우저에 반영 10. **Browser**: 브라우저가 사용자에게 업데이트된 웹 페이지를 보여줌 # 챕터 01, 시작 # 1강, 개요 - [영상 - 24 09 07, slog 13721, 리액트 기초, 1강, 개요](https://youtu.be/uNwaosqT-xU) # 2강, 코드펜 세팅 - [영상 - 24 09 07, slog 13721, 리액트 기초, 2강, 코드펜 세팅](https://youtu.be/vLuPTBJ5vQw) # 3강, 리액트를 사용하기 위한 코드펜 세팅 - [영상 - 24 09 07, slog 13721, 리액트 기초, 3강, 리액트를 사용하기 위한 코드펜 세팅](https://youtu.be/ardszhSeL0s) - [기본 세팅](https://codepen.io/sangwon7242/pen/JjQKpBW?editors=0010t) # 4강, 자바스크립트 DOM 작동 방식 - [영상 - 24 09 07, slog 13721, 리액트 기초, 4강, 자바스크립트 DOM 작동 방식](https://youtu.be/LDKTUa2D5xg) - [자바스크립트 DOM 구조](https://codepen.io/sangwon7242/pen/Yzodjmg?editors=0010) # 5강, React Virtual DOM 작동 방식 - [영상 - 24 09 07, slog 13721, 리액트 기초, 5강, React Virtual DOM 작동 방식](https://youtu.be/K4zWqOh3hps) # 챕터 02, 리액트 사용해보기 # 6강, 새 태그 만들어보기 - [CODEPEN](https://codepen.io/sangwon7242/pen/poXqOJP?editors=0010) - [영상 - 24 09 07, slog 13721, 리액트 기초, 6강, 새 태그 만들어보기](https://youtu.be/tYe6Gv49-qE) # 7강, 리액트에서 CSS Style 적용하는 방법 - [CODEPEN](https://codepen.io/sangwon7242/pen/qBzLMbQ?editors=0010) - [영상 - 24 09 07, slog 13721, 리액트 기초, 7강, 리액트에서 CSS Style 적용하는 방법](https://youtu.be/Fw4S5C0oMok) # 8강, CSS Style을 className, 스타일을 변수 분리해서 적용 - [CODEPEN - 문제](https://codepen.io/sangwon7242/pen/qBzLMbQ?editors=0010) - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/poXqORr) - [CODEPEN - 정답, className](https://codepen.io/sangwon7242/pen/BagvOpK?editors=0010) - [CODEPEN - 정답, 변수로 분리](https://codepen.io/sangwon7242/pen/poXqORr?editors=0010) - [영상 - 24 09 07, slog 13721, 리액트 기초, 8강, CSS Style을 className, 스타일을 변수 분리해서 적용](https://youtu.be/AcKoNvE8Lek) # 9강, CSS Style을 테일윈드, styledComponents를 이용해서 적용 - [CODEPEN](https://codepen.io/sangwon7242/pen/XWLoPMY?editors=0110) - [영상 - 24 09 07, slog 13721, 리액트 기초, 9강, CSS Style을 테일윈드, styledComponents를 이용해서 적용](https://youtu.be/U1n91O4PdFw) # 챕터 03, useState에 이해 # 10강, 일반 변수의 한계 - [CODEPEN](https://codepen.io/sangwon7242/pen/JjQwaJx?editors=1011) - [영상 - 24 09 07, slog 13721, 리액트 기초, 10강, 일반 변수의 한계](https://youtu.be/SFK3d0BEngg) ``` 일반 변수는 상태가 변화되어도 UI업데이트의 영향을 주지 않는다. ``` # 11강, useState를 활영하여 관련된 내용 한번에 업데이트 - [CODEPEN](https://codepen.io/sangwon7242/pen/QWXzVOg?editors=1011) - [영상 - 24 09 07, slog 13721, 리액트 기초, 11강, useState를 활영하여 관련된 내용 한번에 업데이트](https://youtu.be/mJgg2ab6a3U) # 12강, 리액트의 뷰 갱신 원리, 재벌처럼 매번 버리고 새로 구매한다. - [CODEPEN](https://codepen.io/sangwon7242/pen/eYwbLMj?editors=1011) - [영상 - 24 09 07, slog 13721, 리액트 기초, 12강, 리액트의 뷰 갱신 원리, 재벌처럼 매번 버리고 새로 구매한다.](https://youtu.be/q10xDwPO4Ds) # 챕터 04, 간단한 숫자 카운팅 기능 구현 # 13강, 숫자 기록 - [CODEPEN](https://codepen.io/sangwon7242/pen/eYwbLrj?editors=0010) - [영상 - 24 09 07, slog 13721, 리액트 기초, 13강, 숫자 기록](https://youtu.be/qUr08z2HGoI) # 14강, 숫자 감소, 삭제 - [CODEPEN](https://codepen.io/sangwon7242/pen/ExBGepr?editors=0010) - [영상 - 24 09 07, slog 13721, 리액트 기초, 14강, 숫자 감소, 삭제](https://youtu.be/AKRplkDP8Lw) # 15강, 전개구문 - [CODEPEN](https://codepen.io/sangwon7242/pen/gONZVjr?editors=0012) - [영상 - 24 09 08, slog 13721, 리액트 기초, 15강, 전개구문](https://youtu.be/xWj_ukcZGzs) # 16강, 숫자 기록을 여러개로 - [CODEPEN](https://codepen.io/sangwon7242/pen/GRbPVXZ?editors=0010) - [영상 - 24 09 08, slog 13721, 리액트 수업&안드로이드 수업, 16강, 숫자 기록을 여러개로](https://youtu.be/VtvapVEWgXs) # 17강, map 활용법 이해하기 - [CODEPEN 1부](https://codepen.io/sangwon7242/pen/JjQwgeq?editors=0012) - [CODEPEN 2부](https://codepen.io/sangwon7242/pen/LYKMwXw?editors=0012) - [영상 - 24 09 08, slog 13721, 리액트 수업, 17강, map 활용법 이해하기](https://youtu.be/ajn0odQHnDc) # 18강, 숫자 증가, 감소 기능을 별도의 함수로 분리 - [CODEPEN](https://codepen.io/sangwon7242/pen/qBzLeJG?editors=0010) - [영상 - 24 09 08, slog 13721, 리액트 수업, 18강, 숫자 증가, 감소 기능을 별도의 함수로 분리](https://youtu.be/vNyF1LrNGJs) # 19강, 숫자기록을 여러개로, map을 활용해서 리스트로 출력 - [CODEPEN](https://codepen.io/sangwon7242/pen/WNqLVLZ?editors=0010) - [영상 - 24 09 08, slog 13721, 리액트 수업, 19강, 숫자기록을 여러개로, map을 활용해서 리스트로 출력](https://youtu.be/GDqLctdRmB4) # 20강, filter를 이용한 배열요소 삭제, 불변성 유지 - [CODEPEN](https://codepen.io/sangwon7242/pen/zYVygVb?editors=0012) - [영상 - 24 09 08, slog 13721, 리액트 수업, 20강, filter를 이용한 배열요소 삭제, 불변성 유지](https://youtu.be/f1CSGnTw_C4) # 21강, 숫자 기록을 별도의 함수로 분리 - [CODEPEN](https://codepen.io/sangwon7242/pen/qBzLeeW?editors=0010) - [영상 - 24 09 08, slog 13721, 리액트 수업, 21강, 숫자 기록을 별도의 함수로 분리](https://youtu.be/wzUHyEGvIG0) # 22강, 아이템 삭제기능 - [CODEPEN](https://codepen.io/sangwon7242/pen/QWXzeeQ?editors=0010) - [영상 - 24 09 08, slog 13721, 리액트 수업, 22강, 아이템 삭제기능](https://youtu.be/Ah05yEig3ak) # 23강, 함수의 매개변수 유무에 따른 바인딩 방법차이 - [CODEPEN 1부](https://codepen.io/sangwon7242/pen/abgXobg?editors=0012) - [CODEPEN 2부](https://codepen.io/sangwon7242/pen/JjQxPoP?editors=0012) - [영상 - 24 09 08, slog 13721, 리액트 수업, 23강, 함수의 매개변수 유무에 따른 바인딩 방법차이](https://youtu.be/O9zlSmwvdCo) # 24강, 레코드 폼과 레코드 리스트로 컴포넌트 분리 - [CODEPEN](https://codepen.io/sangwon7242/pen/ExBrYYJ?editors=0010) - [영상 - 24 09 08, slog 13721, 리액트 수업, 34강, 레코드 폼과 레코드 리스트로 컴포넌트 분리](https://youtu.be/rq7IbLGSCwM) # 25강. 함수 분리와 매개변수에 대한 복습 - [CODEPEN, 함수 분리](https://codepen.io/sangwon7242/pen/PorVYzj?editors=0012) - [CODEPEN, 객체 다루는 방법](https://codepen.io/sangwon7242/pen/GRbzKjm?editors=0012) - [영상 - 24 09 08, slog 13721, 리액트 수업, 25강, 함수 분리와 매개변수에 대한 복습](https://youtu.be/ngnKGBTzg1s) # 26강, NumberRecorderListItem 컴포넌트로 분리 - [CODEPEN](https://codepen.io/sangwon7242/pen/OJedLXj?editors=0010) - [영상 - 24 09 08, slog 13721, 리액트 수업, 26강, NumberRecorderListItem 컴포넌트로 분리](https://youtu.be/5k9UsDEyCkA) # 챕터 05, 숫자 기록 수정화면 # 27강, 수정화면과 보기화면 토글 - [CODEPEN](https://codepen.io/sangwon7242/pen/dyBabOM?editors=0010) - [영상 - 24 09 08, slog 13721, 리액트 수업, 27강, 수정화면과 보기화면 토글](https://youtu.be/w-VDRk8bnr4) # 28강, NumberRecorderListItem에 수정모드 UI - [CODEPEN](https://codepen.io/sangwon7242/pen/gOVYmRR?editors=0010) - [영상 - 24 09 21, slog 13721, 리액트 수업, 28강, NumberRecorderListItem에 수정모드 UI](https://youtu.be/m3Ne12LnfX8) # 29강, NumberRecorderListItem에 수정모드 UI, 입력상자 값 변경 허용 - [CODEPEN](https://codepen.io/sangwon7242/pen/YzmKZrp?editors=0010) - [영상 - 24 09 21, slog 13721, 리액트 수업, 29강, NumberRecorderListItem에 수정모드 UI, 입력상자 값 변경 허용](https://youtu.be/-BU55ft2aqg) # 30강, NumberRecorderListItem에 수정모드 UI, 입력상자 값 변경 허용 후 수정 - [CODEPEN](https://codepen.io/sangwon7242/pen/abeoJEz?editors=0010) - [영상 - 24 09 21, slog 13721, 리액트 수업, 30강, NumberRecorderListItem에 수정모드 UI, 입력상자 값 변경 허용 후 수정](https://youtu.be/7plSOMQnWiM) # 31강, 수정기능 추가, 재구현 - [CODEPEN](https://codepen.io/sangwon7242/pen/XWvrMYr?editors=0010) - [영상 - 24 09 21, slog 13721, 리액트 수업, 31강, 24강에서 수정기능 추가, 재구현](https://youtu.be/Oj7eMJoswQA) # 챕터 06, CSS 프레임워크 테일윈드 & 데이지 UI 소개 # 32강, 테일윈드 & 데이지UI 소개 - 테일윈드 & 데이지UI 소개 - [영상 - 24 09 21, slog 13721, 리액트 수업 32강, 테일윈드 & 데이지 UI 소개](https://youtu.be/UqTqCFhMReg) - [리액트 시작 소스코드(가벼운)](https://codepen.io/sangwon7242/pen/JjQKpBW?editors=0010) - [CODEPEN](https://codepen.io/sangwon7242/pen/eYqOWYm?editors=0010) - [테일윈드 CSS 프레임워크](https://tailwindcss.com/) - [데이지UI 컴포넌트](https://daisyui.com/components/) - 데이지UI 로드, 데이지UI를 사용하시려면, 테일윈드도 필요합니다. ```html # 33강, 데이지 UI를 이용한 숫자 카운터 만들기 - [CODEPEN - 정답예시](https://cdpn.io/pen/debug/KKrNZMK) 1. - [ ] [문제 - 00, 시작](https://codepen.io/sangwon7242/pen/JjQKpBW?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) - [영상 - 24 09 21, slog 13721, 리액트 수업, 33강, 데이지 UI를 이용한 숫자 카운터 만들기]() # 챕터 07, 할일 리스트 기능 구현 # 34강, 객체 구조 분해 할당 - [CODEPEN](https://codepen.io/sangwon7242/pen/jOgNmyg?editors=0011) - [영상 - 24 09 21, slog 13721, 리액트 수업, 34강, 객체 구조 분해 할당](https://youtu.be/W2c4G6ovsL4) # 35강, useState의 원리를 다시한번 설명 - [CODEPEN](https://codepen.io/sangwon7242/pen/yLmBbMy?editors=0011) - [영상 - 24 09 21, slog 13721, 리액트 수업, 35강, useState의 원리를 다시한번 설명](https://youtu.be/cKQDQxs0Z0g) $$uml @startuml App -> newTodoTitle : 당신의 초기값은 '' 입니다. setNewTodoTitle -> App : App님, 제가 실행되어 버렸네요.\n뭘 해야하는지 아시죠?\n지금 제가 받은 새 newTodoTitle 는 '안녕'입니다.\n다음 생에는 꼭 반영해주세요. App -> App : 다시 실행하자. 그리고 잊지 말자. App -> newTodoTitle : 당신의 값은 '안녕' 입니다. @enduml $$ # 36강, input 값의 변경을 허용하는 원리를 다시한번 설명 - [CODEPEN](https://codepen.io/sangwon7242/pen/QWeLvve?editors=0011) - [영상 - 24 09 21, slog 13721, 리액트 수업, 35강, useState의 원리를 다시한번 설명](https://youtu.be/7ee-XeIKooc) $$uml @startuml App -> newTodoTitle : 당신의 초기값은 'ㅋㅋ' 입니다. newTodoTitle -> input : 당신의 value 속성의 값은 'ㅋㅋ' 입니다. 사용자 -> input : ㅋㅋ 뒤에 ㅎ 를 입력해야지! input -> input_onChange : 값을 변경하는 change 이벤트가 발생되었으니,\nonChange 함수를 실행해야 겠다. input_onChange -> setNewTodoTitle : 미리 약속된대로 당신을 실행합니다. setNewTodoTitle -> App : App님, 제가 실행되어 버렸네요.\n뭘 해야하는지 아시죠?\n지금 제가 받은 새 newTodoTitle 는 'ㅋㅋㅎ'입니다.\n다음 생에는 꼭 반영해주세요. App -> App : 다시 실행하자. 그리고 잊지 말자. App -> newTodoTitle : 당신의 값은 'ㅋㅋㅎ' 입니다. newTodoTitle -> input : 당신의 value 속성의 값은 'ㅋㅋㅎ' 입니다. @enduml $$ # 37강, 5초마다 자동으로 할일이 추가되도록 작업 - [CODEPEN](https://codepen.io/sangwon7242/pen/poMzOjV?editors=0011) - [영상 - 24 09 22, slog 13721, 리액트 수업, 37강, 5초마다 자동으로 할일이 추가되도록 작업](https://youtu.be/651NYGk4Izc) # 38강, 할일추가 폼 - [CODEPEN](https://codepen.io/sangwon7242/pen/yLmBxeE?editors=0011) - [영상 - 24 09 22, slog 13721, 리액트 수업, 38강, 할일추가 폼](https://youtu.be/6YPm92loiyY) # 39강, 할일추가 폼을 별도의 컴포넌트로 분리 - [CODEPEN](https://codepen.io/sangwon7242/pen/NWQKLrw?editors=0010) - [영상 - 24 09 22, slog 13721, 리액트 수업 39강, 할일추가 폼을 별도의 컴포넌트로 분리](https://youtu.be/PbhEZvCMRIg) # 40강, 할일리스트를 ul, li 로 표현 - [CODEPEN](https://codepen.io/sangwon7242/pen/qBeWMqB?editors=0010) - [영상 - 24 09 22, slog 13721, 리액트 수업, 40강, 할일리스트를 ul, li 로 표현](https://youtu.be/Ta4wLRE1JSM) # 41강, 할일리스트를 별도의 컴포넌트로 분리 - [CODEPEN](https://codepen.io/sangwon7242/pen/rNXBZWP?editors=0010) - [영상 - 24 09 22, slog 13721, 리액트 수업, 41강, 할일리스트를 별도의 컴포넌트로 분리](https://youtu.be/VL1kN-F8BDk) # 42강, 할일리스트아이템 삭제 - [CODEPEN](https://codepen.io/sangwon7242/pen/BaXBOWd?editors=0011) - [영상 - 24 09 22, slog 13721, 리액트 수업, 42강, 할일리스트아이템 삭제](https://youtu.be/F3CdGyVmJUs) # 43강, 여태까지 만든 구조 설명 - [영상 - 24 09 22, slog 13721, 리액트 수업, 43강, 여태까지 만든 구조 설명](https://youtu.be/A7lGFRnKAQ0) $$uml map App { todos => [] setTodos => 세터 addTodo => setTodos 이용 } map TodoWriteForm { newTodoTitle => '' setNewTodoTitle => 세터 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 $$ # 44강, 함수와 데이터는 최대한 하류에서 생성, 꼭 필요한 것만 상류에서 생성 - [영상 - 24 09 22, slog 13721, 리액트 수업 44강, 함수와 데이터는 최대한 하류에서 생성, 꼭 필요한 것만 상류에서 생성](https://youtu.be/yxME_DBxlAQ) # 45강, newTodoTitle, nsetNewTodoTitle 을 TodoWriteForm 에서 생성 - [CODEPEN](https://codepen.io/sangwon7242/pen/bGXbxYL?editors=0011) - [영상 - 24 09 22, slog 13721, 리액트 수업 45강, newTodoTitle, setNewTodoTitle 을 TodoWriteForm 에서 생성](https://youtu.be/kLbPy-PozmY) # 46, App에서 addTodo를 만들 때 더 단순하게 만들기 - [CODEPEN](https://codepen.io/sangwon7242/pen/RwXbYQp?editors=0011) - [영상 - 24 09 22, slog 13721, 리액트 수업 46강, App에서 addTodo를 만들 때 더 단순하게 만들기](https://youtu.be/TRgTGag5Uqk) # 47강, 구조분해할당의 리네임 문법으로 TodoWriteForm에서 addTodo 함수를 생성할 수 있도록 허용 - [CODEPEN](https://codepen.io/sangwon7242/pen/MWNgqVL?editors=0011) - [영상 - 24 09 22, slog 13721, 리액트 수업 47강, 구조분해할당의 리네임 문법으로 TodoWriteForm에서 addTodo 함수를 생성할 수 있도록 허용](https://youtu.be/MAaUWs792J4) $$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 $$ # 48강, 상류에서는 최대한 원육를 가공하고, 하류에서 꼭 필요한 부분만 넘겨주세요. - [영상 - 24 09 22, slog 13721, 리액트 수업, 48강, 상류에서는 최대한 원육를 가공하고, 하류에서 꼭 필요한 부분만 넘겨주세요.](https://youtu.be/dN89tUy4-8c) # 49강, removeTodo를 상류에서 생성하여 하류로 보내줌 - [CODEPEN](https://codepen.io/sangwon7242/pen/MWNgqVL?editors=0011) - [영상 - 24 09 22, slog 13721, 리액트 수업, 49강, removeTodo를 상류에서 생성하여 하류로 보내줌](https://youtu.be/t2RPEk0Hle0) # 챕터 08, setState # 50강, setState 함수를 호출해도 함수가 즉시 다시 실행되지는 않는다 - [CODEPEN](https://codepen.io/sangwon7242/pen/MWNgqBx?editors=0011) - [영상 - 24 09 22, slog 13721, 리액트 수업, 50강, setState 함수를 호출해도 함수가 즉시 다시 실행되지는 않는다](https://youtu.be/rUvgQN1gQhM) # 51강, setState 함수를 사용하는 2가지 방법의 차이점 - [CODEPEN](https://codepen.io/sangwon7242/pen/poMzOQG?editors=0010) - [영상 - 24 09 22, slog 13721, 리액트 수업, 51강, setState 함수를 사용하는 2가지 방법의 차이점](https://youtu.be/jZQ-2rZBGLg) # 52강, todo list에 setState 콜백세팅 형태 적용할 곳 찾아보기 - [CODEPEN](https://codepen.io/sangwon7242/pen/qBeWMwN?editors=0011) - [영상 - 24 09 22, slog 13721, 리액트 수업, 52강, todo list에 setState 콜백세팅 형태 적용할 곳 찾아보기](https://youtu.be/vF8Ye4foFQA) # 챕터 09, 할 일 리스트 아이템 수정 # 53강, 아이템 수정UI 레이아웃 작성 - [CODEPEN](https://codepen.io/sangwon7242/pen/YzmKObQ?editors=0011) - [영상 - 24 09 22, slog 13721, 리액트 수업, 53강, 아이템 수정UI 레이아웃 작성](https://youtu.be/DXjo-jY294k) # 54강, 아이템 수정모드 구현, 입력값 허용 - [CODEPEN](https://codepen.io/sangwon7242/pen/ZEgzqzz?editors=0011) - [영상 - 24 09 22, slog 13721, 리액트 수업, 54강, 아이템 수정모드 구현, 입력값 허용](https://youtu.be/7ClsgKFgwrg) # 55강, 아이템 수정기능 완료 - [CODEPEN](https://codepen.io/sangwon7242/pen/vYoBVBe?editors=0011) - [영상 - 24 09 22, slog 13721, 리액트 수업, 55강, 아이템 수정기능 완료](https://youtu.be/EC-BzayAr1A) # 챕터 10, 리액트 사용을 위한 개발환경 세팅 # 56강, git 설치 - [git](https://git-scm.com/) - [영상 - 24 09 28, slog 13721, 리액트 수업, 56강, git 설치](https://youtu.be/rDGs5eEswHE) ```bash git --version git update ``` # 57강, visual studio code 설치 및 세팅 - [visual studio code](https://code.visualstudio.com/) - [d2coding 폰트](https://github.com/naver/d2codingfont/releases) - [영상 - 24 09 28, slog 13721, 리액트 수업, 57강, visual studio code 설치 및 세팅](https://youtu.be/_W7bX3dCZXc) # 58강, nodejs 개념과 nvm 설치 - [node js](https://nodejs.org/en) - [nvm](https://github.com/coreybutler/nvm-windows/releases) - [영상 - 24 09 28, slog 13721, 리액트 수업, 58강, nodejs 개념과 nvm 설치](https://youtu.be/zV7KfFPrbXs) # 59강, nodejs 설치 및 버전선택 - [영상 - 24 09 28, slog 13721, 리액트 수업, 59강, nodejs 설치 및 버전선택](https://youtu.be/wsNGfaQtOHw) ```bash nvm ls # node js 버전 확인 nvm install "노드 버전" # 노드js 설치 nvm ues "노드 버전" # 버전 선택 nvm uninstall "버전" # 노드js 삭제 ``` # 60강, next js 설치 및 실행 - [next js](https://nextjs.org/) - [영상 - 24 09 28, slog 13721, 리액트 수업, 60강, next js 설치 및 실행](https://youtu.be/DYosnjAFVbc) ```bash npm run build npm run dev ``` # 61강, 깃허브에 프로젝트 업로드 - [강사 GIT](https://github.com/SangWon7242/todo_app_0928) - [영상 - 24 09 28, slog 13721, 리액트 수업, 61강, 깃허브에 프로젝트 업로드](https://youtu.be/AzcRs3nuVEI) # 챕터 11, 업그레이드 된 TODOLIST 구현 하기 # 62강, 새 할일 입력받고, 리스팅하기 - [GIT](https://github.com/SangWon7242/todo_app_0928/commit/4357b0366597e94cad3b6f4f896ba38d8d8c94bf) - [영상 - 24 09 28, slog 13721, 리액트 수업, 62강, 새 할일 입력받고, 리스팅하기](https://youtu.be/gsMW6jkRMPk) # 63강, 새 할일 등록시 번호 증가 - [GIT](https://github.com/SangWon7242/todo_app_0928/commit/b9c78a33646680831ea040ddbac0ae7f072107e2) - [영상 - 24 09 28, slog 13721, 리액트 수업, 63강, 새 할일 등록시 번호 증가](https://youtu.be/qkGyunxsdzM) # 64강, 새 할일 등록 함수 매개변수 구조 변경 - [GIT](https://github.com/SangWon7242/todo_app_0928/commit/f0ff54f94babe49d7908cf3d103138416bbbb46c) - [영상 - 24 09 28, slog 13721, 리액트 수업, 64강, 새 할일 등록 함수 매개변수 구조 변경](https://youtu.be/pqXmdm17giU) # 65강, 할일 목록 UI 구현, 아이템 삭제 - [GIT](https://github.com/SangWon7242/todo_app_0928/commit/64340572a4ee10b968c61d6841c58c80caabfa62) - [영상 - 24 09 28, slog 13721, 리액트 수업, 65강, 할일 목록 UI 구현, 아이템 삭제](https://youtu.be/p56zrg9tN6Y) # 66강, 아이템 수정 UI - [GIT](https://github.com/SangWon7242/todo_app_0928/commit/3edc707d2b6d5ba224d13302d10b4fa75612e5c7) - [영상 - 24 09 28, slog 13721, 리액트 수업, 66강, 아이템 수정 UI](https://youtu.be/DwApPNQjY-8) # 67강, 아이템 수정 UI의 입력창 값 다루기 - [GIT](https://github.com/SangWon7242/todo_app_0928/commit/0a4b75c0009f7af77ee9dde061291457c1eef56e) - [영상 - 24 09 28, slog 13721, 리액트 수업, 67강, 아이템 수정 UI의 입력창 값 다루기](https://youtu.be/J2zexGF0Wt8) # 68강, 아이템 수정 완료 - [GIT](https://github.com/SangWon7242/todo_app_0928/commit/0f55dc1d161d535be60375cbaaaafcedf38a8b47) - [영상 - 24 09 28, slog 13721, 리액트 수업, 68강, 아이템 수정 완료](https://youtu.be/L8e6zaavmfQ) # 69강, 강사 코드 가져와서 이어가는 방법 - [영상 - 24 09 29, slog 13721, 리액트 수업, 69강, 강사 코드 가져와서 이어가는 방법](https://youtu.be/sTECFjHdfKg) ```bash git clone https://github.com/SangWon7242/todo_app_0928 todo_app_T ``` #### 프로젝트 오픈 후 ```bash npm install # 노드 모듈 다운 npm run dev # 프로젝트 실행 ``` # 70강, 관련된 state를 한 덩어리로 묶기 - [GIT](https://github.com/SangWon7242/todo_app_0928/commit/08c64e19aa2665330ab51745af6905816d94d8b7) - [영상 - 24 09 29, slog 13721, 리액트 수업, 70강, 관련된 state를 한 덩어리로 묶기](https://youtu.be/gTfv76z_o54) # 챕터 12, immer # 71강, immer 소개 - [영상 - 24 09 29, slog 13721, 리액트 수업, 71강, immer 소개](https://youtu.be/-qjPaGondG0) - [CODEPEN](https://codepen.io/sangwon7242/pen/VwovvxQ?editors=0010) ```js import immer, { produce } from "https://cdn.skypack.dev/immer"; ``` # 72강, immer 적용 - [GIT](https://github.com/SangWon7242/todo_app_0928/commit/b409e99f31846422b5870aef19177dd36468bfe2) - [영상 - 24 09 29, slog 13721, 리액트 수업, 72강, immer 적용](https://youtu.be/V-YUF3FXOzE) ```bash npm install immer ``` # 챕터 13, useRef를 이용한 DOM 조작 # 73강, useRef를 사용해서 dom 조작하기 - [영상 - 24 09 29, slog 13721, 리액트 수업, 73강, useRef를 사용해서 dom 조작하기](https://youtu.be/4XMSXK2y-Jk) - [CODEPEN](https://codepen.io/sangwon7242/pen/vYoNNba?editors=0010) # 74강, 숫자기록입력상자에 useRef를 이용하여 dom 조작 - [영상 - 24 09 29, slog 13721, 리액트 수업, 74강, 숫자기록입력상자에 useRef를 이용하여 dom 조작](https://youtu.be/_zPyiop9SgE) - [CODEPEN](https://codepen.io/sangwon7242/pen/rNXOOgj?editors=0010) # 75강, useRef와 useState의 차이점 - [영상 - 24 09 29, slog 13721, 리액트 수업, 75강, useRef와 useState의 차이점](https://youtu.be/RxYatsiyCQ0) - [CODEPEN](https://codepen.io/sangwon7242/pen/WNVQreb?editors=0011) ### useRef의 두가지 용법 1st : DOM 조작 ```jsx const inputRef = useRef(null); return

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

액션

``` # 76강, 할 일 앱에 useRef 적용 - [GIT](https://github.com/SangWon7242/todo_app_0928/commit/81149080eeef23c7fc5bf4703e80d470c5b1bf41) - [영상 - 24 09 29, slog 13721, 리액트 수업, 76강, 할 일 앱에 useRef 적용](https://youtu.be/-9DmTf_3fiE) # 챕터 14, useEffect, useMemo, React,momo, useCallback # 77강, useEffect를 사용하여 함수의 특정부분 재실행 방지 - [영상 - 24 09 29, slog 13721, 리액트 수업, 77강, useEffect를 사용하여 함수의 특정부분 재실행 방지](https://youtu.be/fX1EDyMgzIA) - [CODEPEN](https://codepen.io/sangwon7242/pen/QWejyjj?editors=0011) # 78강, 의존성 배열 인자를 제거하면, 매번 실행은 되지만 타이밍이 늦어진다. - [영상 - 24 09 29, slog 13721, 리액트 수업, 78강, 의존성 배열 인자를 제거하면, 매번 실행은 되지만 타이밍이 늦어진다.](https://youtu.be/PZ8x7cUBfRA) - [CODEPEN](https://codepen.io/sangwon7242/pen/poMjggE?editors=0011) # 79강, 타이팅이 늦어져야 하는 경우, useRef, useEffect 조합 - [영상 - 24 09 29, slog 13721, 리액트 수업, 79강, 타이팅이 늦어져야 하는 경우, useRef, useEffect 조합](https://youtu.be/0WYwrpccyNo) - [CODEPEN](https://codepen.io/sangwon7242/pen/wvVKMGv?editors=0011) # 80강, 할 일 앱에 useEffect를 이용하여 최초의 포커싱이 이루어지도록 - [GIT](https://github.com/SangWon7242/todo_app_0928/commit/2cc7fadf4629f2aebdaea84566dadc5333659b93) - [영상 - 24 09 29, slog 13721, 리액트 수업, 80강, 할 일 앱에 useEffect를 이용하여 최초의 포커싱이 이루어지도록](https://youtu.be/pkk6pEVdS3M) # 81강, 자식이 리랜더링 되는것은 부모 관계없고, 부모가 리랜더링되면 자식도 리랜더링 됨 - [영상 - 24 09 29, slog 13721, 리액트 수업, 81강, 자식이 리랜더링 되는것은 부모 관계없고, 부모가 리랜더링되면 자식도 리랜더링 됨](https://youtu.be/YemYbpo4VsM) - [CODEPEN](https://codepen.io/sangwon7242/pen/KKOdVgg?editors=0011) ``` - 자식 안에서 리랜더링 되면 그게 부모 컴포넌트에게 영향을 끼치지 않는다. - 하지만 부모가 리랜더링 되면 거기에 딸린 자식 컴포넌트는 리랜더린 된다. ``` # 82강, useEffect의 의존성배열을 이용해서, 실행민감도 조절 - [영상 - 24 09 29, slog 13721, 리액트 수업, 82강, useEffect의 의존성배열을 이용해서, 실행민감도 조절](https://youtu.be/9811d4wGHn8) - [CODEPEN](https://codepen.io/sangwon7242/pen/abevdBq?editors=0011) # 83강, useMemo를 하기 위한 준비, 실행이 완료되는데 엄청 오래 걸리는 함수 구현 - [영상 - 24 10 05, slog 13721, 리액트 수업, 83강, useMemo를 하기 위한 준비, 실행이 완료되는데 엄청 오래 걸리는 함수 구현](https://youtu.be/fx3hpJOr3MI) - [CODEPEN](https://codepen.io/sangwon7242/pen/poMbJob?editors=0011) - [제타위키 - https://zetawiki.com/wiki/자바스크립트_수행시간_측정](https://to2.kr/eCb) # 84강, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현 - [영상 - 24 10 05, slog 13721, 리액트 수업, 84강, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현](https://youtu.be/HFy-omhVU18) - [CODEPEN](https://codepen.io/sangwon7242/pen/poMbJob?editors=0011) # 85강, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 state 적용 - [영상 - 24 10 05, slog 13721, 리액트 수업, 85강, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 state 적용](https://youtu.be/4pdVmkOzgPc) - [CODEPEN](https://codepen.io/sangwon7242/pen/yLmJNag?editors=0011) # 86강, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 useEffect 적용 - [영상 - 24 10 05, slog 13721, 리액트 수업, 86강, useMemo를 하기 위한 준비, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 useEffect 적용](https://youtu.be/6yabqUz1rK4) - [CODEPEN](https://codepen.io/sangwon7242/pen/KKOMpmN?editors=0011) # 87강, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 useMemo 적용 - [영상 - 24 10 05, slog 13721, 리액트 수업, 97강, 1부터 입력값까지의 소수개수를 알려주는 프로그램 구현에 useMemo 적용](https://youtu.be/a9r0uwejg-o) - [CODEPEN](https://codepen.io/sangwon7242/pen/XWvKbgV?editors=0011) # 88강, 실행이 오래걸리는 PrimeNosCount 컴포넌트 구현 - [영상 - 24 10 05, slog 13721, 리액트 수업, 88강, 실행이 오래걸리는 PrimeNosCount 컴포넌트 구현](https://youtu.be/UnEkphO73o4) - [CODEPEN](https://codepen.io/sangwon7242/pen/mdNEJpN?editors=0010) # 89강, useEffect로 속도 최적화 - [영상 - 24 10 05, slog 13721, 리액트 수업, 89강, useEffect로 속도 최적화](https://youtu.be/YW-Ym7O5how) - [CODEPEN](https://codepen.io/sangwon7242/pen/YzmWXeb?editors=0010) # 90강, useMemo로 속도 최적화 - [영상 - 24 10 05, slog 13721, 리액트 수업, 90강, useMemo로 속도 최적화](https://youtu.be/_Ss0iSD92Ew) - [CODEPEN](https://codepen.io/sangwon7242/pen/abeZOQR?editors=0011) # 91강, React.memo로 속도 최적화 - [영상 - 24 10 05, slog 13721, 리액트 수업, 91강, React.memo로 속도 최적화](https://youtu.be/MfG1h4H36EQ) - [CODEPEN](https://codepen.io/sangwon7242/pen/JjgKdww?editors=0011) # 92강, useCallback을 사용하기 위한 환경을 만들기 - [영상 - 24 10 05, slog 13721, 리액트 수업, 92강, useCallback을 사용하기 위한 환경을 만들기](https://youtu.be/V69izRD1SQc) - [CODEPEN](https://codepen.io/sangwon7242/pen/bGXedPq?editors=0011) # 93강, useCallback을 사용하여 어이없는 리랜더링 막기 - [영상 - 24 10 06, slog 13721, 리액트 수업, 93강, useCallback을 사용하여 어이없는 리랜더링 막기](https://youtu.be/obKkh6YV_bc) - [CODEPEN](https://codepen.io/sangwon7242/pen/RwXRZBJ?editors=0011) # 챕터 14, 멀티체크박스 관리 기능 구현 - 음식주문시 옵션기능 # 94강, 음식옵션 리스트 - [영상 - 24 10 06, slog 13721, 리액트 수업, 94강, 음식옵션 리스트](https://youtu.be/CpL1v0QV2gE) - [CODEPEN](https://codepen.io/sangwon7242/pen/YzmWxdL?editors=0010) # 95강, 음식옵션 리스트아이템 체크기능 - [영상 - 24 10 06, slog 13721, 리액트 수업, 95강, 음식옵션 리스트아이템 체크기능](https://youtu.be/GIqAGPLX5P8) - [CODEPEN](https://codepen.io/sangwon7242/pen/eYqzEod?editors=0010) # 96강, 리스트아이템을 전부 체크하면, 전체 토글 체크박스도 체크 되도록 - [영상 - 24 10 06, slog 13721, 리액트 수업, 96강, 리스트아이템을 전부 체크하면, 전체 토글 체크박스도 체크 되도록](https://youtu.be/L1iJcnzohi4) - [CODEPEN](https://codepen.io/sangwon7242/pen/dyxXzEm?editors=0010) # 97강, 전체 토글 체크박스를 클릭시 그 상태가 전체에 반영 - [영상 - 24 10 06, slog 13721, 리액트 수업, 97강, 전체 토글 체크박스를 클릭시 그 상태가 전체에 반영](https://youtu.be/K_xE--8getU) - [CODEPEN](https://codepen.io/sangwon7242/pen/NWQraKK?editors=0010) # 98강, new Array().fill 기능으로 초기상태를 쉽게 만들기 - [영상 - 24 10 06, slog 13721, 리액트 수업, 98강, new Array().fill 기능으로 초기상태를 쉽게 만들기](https://youtu.be/bPqsvNi8X60) - [CODEPEN](https://codepen.io/sangwon7242/pen/JjgKrPO?editors=0010) # 99강, 옵션의 선택개수표시 - [영상 - 24 10 06, slog 13721, 리액트 수업, 99강, 옵션의 선택개수표시](https://youtu.be/o_Rbc02BWZA) - [CODEPEN](https://codepen.io/sangwon7242/pen/jOgrGOP?editors=0010) # 100강, useMemo 사용하여 옵션과 상관없는 변화에 의한 쓸데없는 옵션관련계산 없애기 - [영상 - 24 10 06, slog 13721, 리액트 수업, 100강, useMemo 사용하여 옵션과 상관없는 변화에 의한 쓸데없는 옵션관련계산 없애기](https://youtu.be/A_fQsJXZjQ0) - [CODEPEN](https://codepen.io/sangwon7242/pen/abeZLbL?editors=0011) # 101강, OrderMainFood, OrderOptions 컴포넌트로 나눔 - [영상 - 24 10 06, slog 13721, 리액트 수업, 101강, OrderMainFood, OrderOptions 컴포넌트로 나눔](https://youtu.be/LJIrt-zl-_o) - [CODEPEN](https://codepen.io/sangwon7242/pen/ExqywVw?editors=0011) # 102강, React.memo, useCallback 사용하여 각각의 컴포넌트 자체가 필요할 경우에만 리랜더링 되도록 - [영상 - 24 10 06, slog 13721, 리액트 수업, 102강, React.memo, useCallback 사용하여 각각의 컴포넌트 자체가 필요할 경우에만 리랜더링 되도록](https://youtu.be/3xEnmVbHIKk) - [CODEPEN](https://codepen.io/sangwon7242/pen/poMbWyb?editors=0010) # 챕터 15, Promise 개요 # 103강, 동기식 함수의 연속실행 - [영상 - 24 10 06, slog 13721, 리액트 수업, 103강, 동기식 함수의 연속실행](https://youtu.be/7Anen82CgWw) - [CODEPEN](https://codepen.io/sangwon7242/pen/WNVxZpr) # 104강, 비동기식 함수들은 리턴을 통해서 값을 전달한다. - [영상 - 24 10 06, slog 13721, 리액트 수업, 104강, 비동기식 함수들은 리턴을 통해서 값을 전달한다.](https://youtu.be/yihhIVsZvU4) - [CODEPEN](https://codepen.io/sangwon7242/pen/KKOMXWg?editors=0012) # 105강, 비동기식에서는 보통 콜백이라는 개념을 통해서 함수들의 실행 순서를 맞춘다. - [영상 - 24 10 06, slog 13721, 리액트 수업, 105강, 비동기식에서는 보통 콜백이라는 개념을 통해서 함수들의 실행 순서를 맞춘다.](https://youtu.be/_KPQWQ15esI) - [CODEPEN](https://codepen.io/sangwon7242/pen/rNXLGmz?editors=0012) # 106강, 익명함수가 아닌 이름있는 함수를 사용하면 콜백을 안써도, 순차적인 비동기 함수 실행이 가능하다. - [영상 - 24 10 06, slog 13721, 리액트 수업, 106강, 익명함수가 아닌 이름있는 함수를 사용하면 콜백을 안써도, 순차적인 비동기 함수 실행이 가능하다.](https://youtu.be/Ky44QzywNQY) - [CODEPEN](https://codepen.io/sangwon7242/pen/oNKLGwa?editors=0012) # 107강, Promise객체 생성, reject는 then을 실행하고, reject는 catch를 실행한다 - [영상 - 24 10 06, slog 13721, 리액트 수업, 107강, Promise객체 생성, reject는 then을 실행하고, reject는 catch를 실행한다](https://youtu.be/BMS6zQXp4Pc) - [CODEPEN](https://codepen.io/sangwon7242/pen/eYqzGeG?editors=0012) # 108강, Promise객체는 유튜버이고, then을 통해서 여러명의 구독자를 받을 수 있다 - [영상 - 24 10 06, slog 13721, 리액트 수업, 108강, Promise객체는 유튜버이고, then을 통해서 여러명의 구독자를 받을 수 있다](https://youtu.be/R4ZAHaOyXdQ) - [CODEPEN](https://codepen.io/sangwon7242/pen/XWvKezV?editors=0012) # 109강, then을 체이닝하면 동기, 비동기 익명함수들을 순차적으로 실행하도록 만들기 쉽다 - [영상 - 24 10 06, slog 13721, 리액트 수업, 109강, then을 체이닝하면 동기, 비동기 익명함수들을 순차적으로 실행하도록 만들기 쉽다](https://youtu.be/GVfM2o1YWWA) - [CODEPEN](https://codepen.io/sangwon7242/pen/VwojMrg?editors=0012) # 110강, 이름있는 비동기 함수들을의 연속실행에 Promise를 도입하여 구조개선 - [영상 - 24 10 06, slog 13721, 리액트 수업, 110강, 이름있는 비동기 함수들을의 연속실행에 Promise를 도입하여 구조개선](https://youtu.be/zFd3SaYjJ3M) - [CODEPEN](https://codepen.io/sangwon7242/pen/zYgBEpR?editors=0012) # 챕터 16, Fetch 개요 # 111강, 로렘 픽섬 API 소개, JSON VIEWER 소개 - [영상 - 24 10 12, slog 13721, 리액트 수업, 111강, 로렘 픽섬 API 소개, JSON VIEWER 소개](https://youtu.be/KBWXAECznww) - [CODEPEN](https://codepen.io/sangwon7242/pen/abepwvV) # 112강, fetch를 사용해서 외부 데이터 불러오기 - [영상 - 24 10 12, slog 13721, 리액트 수업, 112강, fetch를 사용해서 외부 데이터 불러오기](https://youtu.be/P3DrKUku5zw) - [CODEPEN](https://codepen.io/sangwon7242/pen/OJKWgye?editors=0012) # 113강, fetch를 통해 불러온 데이터를 json화 하기 - [영상 - 24 10 12, slog 13721, 리액트 수업, 113강, fetch를 통해 불러온 데이터를 json화 하기](https://youtu.be/ku3h1toqfLM) - [CODEPEN](https://codepen.io/sangwon7242/pen/NWQdgNP?editors=0012) # 114강, fetch를 통해 간단한 이미지 로드기능 구현 - [영상 - 24 10 12, slog 13721, 리액트 수업, 114강, fetch를 통해 간단한 이미지 로드기능 구현](https://youtu.be/IEMCA2Oz0k0) - [CODEPEN](https://codepen.io/sangwon7242/pen/QWedgKy?editors=1011) # 챕터 17, 리액트에서 Fetch 사용 # 115강, 리액트에서 fetch 사용 - [영상 - 24 10 12, slog 13721, 리액트 수업, 115강, 리액트에서 fetch 사용](https://youtu.be/eRvZwVuXowE) - [CODEPEN](https://codepen.io/sangwon7242/pen/xxvgrqW?editors=0011) # 116강, useEffect를 통해서 쓸데없는 중복통신을 안하도록 - [영상 - 24 10 12, slog 13721, 리액트 수업, 116강, useEffect를 통해서 쓸데없는 중복통신을 안하도록](https://youtu.be/J9N5DEFh2Us) - [CODEPEN](https://codepen.io/sangwon7242/pen/WNVROoQ?editors=0011) # 챕터 18, async, await 개요 # 117강, async를 붙이면 함수는 promise 객체를 리턴한다. - [영상 - 24 10 12, slog 13721, 리액트 수업, 117강, async를 붙이면 함수는 promise 객체를 리턴한다.](https://youtu.be/ZJzMzrza1dA) - [CODEPEN](https://codepen.io/sangwon7242/pen/NWQdgax?editors=0012) # 118강, async, await를 이용하면 then 체이닝에서 벗어날 수 있다. - [영상 - 24 10 12, slog 13721, 리액트 수업, 118강, async, await를 이용하면 then 체이닝에서 벗어날 수 있다.](https://youtu.be/V0tWQ5CSQxE) - [CODEPEN](https://codepen.io/sangwon7242/pen/QWedgqE?editors=0012) # 119강, async, await를 이용하여 이미지 정보 가져오기 - [영상 - 24 10 12, slog 13721, 리액트 수업, 119강, async, await를 이용하여 이미지 정보 가져오기](https://youtu.be/Ha870c3VEnc) - [CODEPEN](https://codepen.io/sangwon7242/pen/jOgywZV?editors=0011) # 리액트 네이티브를 이용한 날씨 APP 만들기 - [리액트 네이티브 수업시작](https://www.slog.gg/p/13770)

리액트 & 리액트 네이티브(안드로이드) 주말오후