44,000원
초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.
넓고 깊으면서 자세하게 React의 state와 hook을 배울 수 있습니다. React 공식 문서의 95% 이상을 다룹니다. 본 강좌로 React를 끝낼 수 있습니다.
✍️
이런 걸
배워요!
이런 걸
배워요!
React state(상태)
React hook
컴포넌트를 만드는 방법
React 패러다임
React 코드 리팩터링 방법
React와 외부 시스템 연결
시나리오로 개발하는 방법
이런 분들께 추천드려요!
🎓
학습 대상은
누구일까요?
학습 대상은
누구일까요?
React state와 hook을 완전하게 배우려는 개발자
React의 모든 것을 빠짐없이 배우려는 개발자
React 개발 응용력을 향상시키려는 개발자
React 환경의 기획자
컴포넌트 개념 정립을 원하는 개발자, 기획자
📚
선수 지식,
필요할까요?
선수 지식,
필요할까요?
자바스크립트, HTML, CSS
DOM 이해도 필요하지만 필수는 아닙니다
강의자의 "React 비기너" 강좌 추천
안녕하세요
김영보 입니다.
김영보 입니다.
40년 넘게 소프트웨어를 개발했으며, 지금도 개발하고 있습니다.
23년 넘게 JavaScript 중심으로 개발했습니다.
동영상: 10개
자바스크립트 비기너, 자바스크립트 중고급
모던 자바스크립트(ES6+) 기본, 모던 자바스크립트(ES6+) 심화
DOM 기본, DOM 인터랙션
React 비기너, React 완전 끝내기
요구분석 구현 방법
자바스크립트 머신러닝 TensorFlow.js
저서: 9권
몰입! 자바스크립트, ECMAScript 6, HTML5, DOM 스크립팅
자바스크립트 정규표현식, 요구분석을 위한 Event Process 모델링
머신러닝 TensorFlow.js JavaScript, Ajax 활용, prototype.js 완전분석
9권 중에서 8권은 국내 최초 저자입니다.
특히, "머신러닝 TensorFlow.js JavaScript"는 출판하는 시점에 amazon.com에 관련된 책이 없었습니다.
커리큘럼
총 95 개
˙ 10시간 25분의 수업
이 강의는 영상, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강좌 소개
4 강
∙ 12분
1. 강좌 범위, 사전 지식, 강좌의 용어 사용 기준, 강의 진행 기준
미리보기
02:36
2. React 개발 환경 설정, 확인
03:32
3. 강의 소스 파일 다운로드
00:15
4. 다운로드 파일 설치, 사용 방법
05:56
섹션 1. 명령형, 선언형 프로그래밍
2 강
∙ 19분
섹션 2. React UI 선언형 방법
9 강
∙ 1시간 22분
1. React UI 선언형 방법: UI를 선언적으로 생각하기
미리보기
06:18
2. 컴포넌트의 시각적 상태 정의: 목업, 프로토타입을 만든다
미리보기
09:04
3. 상태 변화 트리거 정의: 상태 변화를 트리거하는 유형, 상태 관련 다이어그램
미리보기
14:54
4. useState로 상태 정의-1: useState로 상태 정의, 프로그램 개발 방법
미리보기
09:40
5. useState로 상태 정의-2: UI 시나리오 단계별 useState로 상태 정의
미리보기
11:04
6. 상태 리팩터링-1: 초기화 처리 단계, <input>에 값 입력
미리보기
07:41
7. 상태 리팩터링-2: 확인 <button> 클릭, <input>에 입력한 값을 지운다
미리보기
08:17
8. 상태 변수 리팩터링: 상태 변수 정리, 상태 변수 리팩터링
미리보기
08:05
9. 이벤트 핸들러 연결: 이벤트 핸들러 연결, React UI 선언형 방법
미리보기
07:37
섹션 3. Object, Array 형태의 상태 변경
8 강
∙ 57분
1. Object 형태의 상태 변경-1: 상태에 Object 할당, 상태 값 업데이트
09:17
2. Object 형태의 상태 변경-2: 상태 값 업데이트, mutation
05:00
3. Array 형태의 상태 변경: 상태 변수에 Array 할당, 상태 업데이트
09:40
4. 코드 리팩터링: 코드 형태, 리팩터링 필요
04:15
5. Array 엘리먼트 삭제: 코드 형태, 삭제 조건
07:03
6. Array 엘리먼트 변경: 코드 형태, 변경 방법
07:00
7. Array에 엘리먼트 추가, 코드 형태, 추가 방법, slice() 사용 방법
09:22
8. 다수의 컴포넌트에서 상태 공유
06:14
섹션 4. 상태 구조화
8 강
∙ 49분
1. 상태 구조화 원칙
03:44
2. 관련된 상태를 그룹화한다
07:00
3. 상태 모순 형태
04:34
4. 상태 모순을 피한다
07:17
5. 불필요한 상태를 사용하지 않는다
04:33
6. 상태 값 중복 형태
07:00
7. 상태 값의 중복을 피한다
07:31
8. 상태를 깊게 계층화하지 않는다
07:35
섹션 5. 컴포넌트 상태 공유
4 강
∙ 25분
1. 자식 컴포넌트에 상태를 작성한 형태
08:12
2. 미션 시나리오
04:52
3. 상태를 부모 컴포넌트로 올리기-1: 자식 컴포넌트의 상태 변수 삭제, 자식 컴포넌트로 값 넘기기
04:58
4. 상태를 부모 컴포넌트로 올리기-2: 부모 컴포넌트에 상태 변수 작성, 상태 변수에 값 설정
07:02
섹션 6. 상태 유지, 초기화-1
5 강
∙ 35분
1. React의 UI Tree, Render Tree: UI Tree, Render Tree, 컴포넌트 위치 변경
06:50
2. 상태 유지 조건
07:27
3. 컴포넌트를 삭제하면 상태를 초기화: 컴포넌트 렌더링 형태
08:35
4. 위치와 컴포넌트가 같으면 상태 유지
07:08
5. 위치와 컴포넌트가 같더라도 상태 초기화
05:35
섹션 7. 상태 유지, 초기화-2
5 강
∙ 38분
1. 변경 체크 기준은 UI Tree 위치
08:36
2. UI Tree 위치 변경, 상태 초기화
08:41
3. 컴포넌트 이름이 다르면 상태 초기화
06:13
4. 다른 위치에 컴포넌트 렌더링
08:15
5. key로 상태 초기화
06:17
섹션 8. useReducer Hook
7 강
∙ 36분
1. useState 형태와 요구사항
04:00
2. useReducer Hook 형태
04:34
3. useReducer 플로우
08:40
4. useState를 useReducer로 바꾸기 3단계: 바꾸기 1단계
04:20
5. useState를 useReducer로 바꾸기 2단계
05:08
6. useState를 useReducer로 바꾸기 3단계
04:11
7. useState와 useReducer 비교
05:22
섹션 9. useContext Hook
7 강
∙ 30분
1. React Context 용도: props와 context
04:55
2. Context 사용 3단계: props로 전달한 형태, Context 사용 3단계
05:45
3. 1단계 Context 생성: createContext()
01:24
4. 2단계 컴포넌트에서 context 값 사용
03:35
5. 3단계 컴포넌트에서 Context 제공
05:11
6. Context 업데이트
06:50
7. Context 사용 고려 사항
02:42
섹션 10. useRef Hook
4 강
∙ 24분
1. useRef로 하려는 것: Escape Hatch
04:08
2. useRef 작성
05:13
3. useRef 사용
05:43
4. useRef 활용 형태(타이머): setInterval(), clearInterval()
09:08
섹션 11. Ref 오브젝트와 DOM
6 강
∙ 43분
1. Ref 오브젝트로 엘리먼트 접근
08:16
2. Ref 오브젝트로 엘리먼트 참조
05:31
3. Ref 오브젝트와 DOM 인터페이스
08:01
4. 엘리먼트 스크롤
06:46
5. ref 콜백 함수
03:46
6. ref 콜백 함수 활용
10:48
섹션 12. Ref 관련 API, Hook
3 강
∙ 23분
1. 다른 컴포넌트의 DOM 엘리먼트에 접근
08:13
2. forwardRef API
05:49
3. useImperativeHandle Hook
09:36
섹션 13. useEffect Hook
8 강
∙ 57분
1. 컴포넌트에 Effect 선언: Effect 작성 방법, useEffect를 반영하지 않은 시나리오
07:55
2. useEffect 사용 형태-1: 하려는 것, 에러 발생
04:48
3. useEffect 사용 형태-2: <video>
05:55
4. Effect 의존성 작성
06:24
5. Effect 의존성 지정
09:06
6. 외부 시스템 동기화
06:09
7. 클린업 함수
05:22
8. React 패러다임과 클린업
11:56
섹션 14. useMemo Hook
7 강
∙ 39분
1. useMemo 사용 배경
05:07
2. useMemo 문법, 캐싱
03:45
3. useMemo 사용 형태
06:43
4. 리액티브 값 사용
07:50
5. useMemo 용도
03:22
6. 컴포넌트 렌더링 효율
07:06
7. memo API
06:03
섹션 15. useCallback Hook
3 강
∙ 23분
1. useCallback 사용 배경
07:46
2. useCallback으로 함수 캐싱
07:49
3. useCallback 의존성, bind()
07:30
섹션 16. Custom Hook
3 강
∙ 16분
1. Custom Hook 사용 배경
02:32
2. Custom Hook으로 분리
03:56
3. Custom Hook 분리 형태, 목적
09:42
섹션 17. useSyncExternalStore Hook
2 강
∙ 10분
1. useSyncExternalStore 사용 배경
04:22
2. useSyncExternalStore 사용 방법
06:19
강의 게시일 : 2024년 03월 20일
(마지막 업데이트일 : 2024년 03월 20일)
수강평
수강생분들이 직접 작성하신 수강평입니다.
아직 평가를 충분히 받지 못한 강의 입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!😄️️
모두에게 도움이 되는 수강평의 주인공이 되어주세요!😄️️
