"[리액트 1부] 만들면서 학습하는 리액트" 수업 자료입니다.

내용

리액트의 핵심이 되는 진짜 기본 개념. 컴포넌트, 상태, 이벤트 처리, 조건부/리스트 렌더링, 컴포넌트 생명주기 등 리액트를 사용하는 개발자라면 반드시 알고 넘어가야하는 개념을 배웁니다. 컴포넌트 역할 분담, 상태 끌어올리기 컴포넌트 재사용, 조합하는 방법을 통해 리액트 컴포넌트 설계 방법을 준비했습니다.

강의 노트

• 1편 준비편
• 2편 소개편
• 3편 사용편 1
• 4편 사용편 2 (컴포넌트편)

폴더 구성

수업 실습을 위한 폴더는 다음과 같이 구성했습니다.

• 1-vanilla: 1편에서 만든 어플리케이션(자바스크립트만 사용)
• 2-react: 2편에서 다시 만든 어플리케이션(리액트 사용)
• 3-component: 3편에서 다시 만든 어플리케이션(리액트 컴포넌트 사용)

브랜치

강의 중 실습은 아래 브랜치 중 하나로 이동하여 진행합니다. 브랜치를 이용하면 각 실습에서 풀어야하는 문제를 준비되어 있습니다.

1편 준비편

• ready/scaffoding: 순수JS 1 - 폴더 구조
• ready/search-form-1: 순수JS 1 - 검색폼 2
• ready/search-form-2: 순수JS 1 - 검색폼 3
• ready/search-form-3: 순수JS 1 - 검색폼 4
• ready/search-form-4: 순수JS 1 - 검색결과 1
• ready/search-result-1: 순수JS 1 - 검색결과 2(실습)
• ready/search-result-2: 순수JS 1 - 탭 1
• ready/tab-1: 순수JS 1 - 탭 2
• ready/tab-2: 순수JS 1 - 탭 3 (실습)
• ready/tab-3: 순수JS 1 - 추천 검색어 1
• ready/keyword-list-1: 순수JS 1 - 추천 검색어 2
• ready/keyword-list-2: 순수JS 1 - 추천 검색어 3(실습)
• ready/keyword-list-3: 순수JS 1 - 최근 검색어 1
• ready/history-list-1: 순수JS 1 - 최근 검색어 2
• ready/history-list-2: 순수JS 1 - 최근 검색어 3(실습)

2편 소개편

• intro/hello-world: 헬로 월드 - Hello world
• intro/jsx: 실습에 맞게 개선하기 - 시작점
• intro/scaffolding: 실습에 맞게 개선하기 - 헤더 구현
• intro/header: 검색폼 1 - Input 요소 사용하기

3편 사용편 1

• react/search-form-1: 검색폼 1 - 리액트 컴포넌트
• react/search-form-2: 검색폼 1 - 입력값을 기억하기: State
• react/search-form-3: 검색폼 1 - 상태를 갱신하기: 이벤트 처리
• react/search-form-4: 검색폼 2 - 조건부 렌더링
• react/search-form-5: 검색폼 2 - 폼 제출
• react/search-form-6: 검색폼 2 - 폼 초기화(실습)
• react/search-form-7: 검색 결과 - 검색 결과가 없을 경우
• react/search-result-1: 검색 결과 - 검색 결과가 있을 경우
• react/search-result-2: 검색 결과 - 리스트와 키
• react/search-result-3: 검색 결과 - 검색겨로가 초기화(실습)
• react/search-result-4: 탭 - 탭 보여주기
• react/tab-1: 탭 - 기본 탭 설정과 탭 선택(실습)
• react/tab-2: 추천/최근 검색어 - 추천 검색어 1
• react/keyword-1: 추천/최근 검색어 - 추천 검색어 2(실습)
• react/keyword-2: 추천/최근 검색어 - 최근 검색어 1
• react/history-1: 추천/최근 검색어 - 최근 검색어 2
• react/history-2: 추천/최근 검색어 - 최근 검색어 3(실습)

4편 사용편 2 (컴포넌트 편)

• component/scaffolding: 소개 - 프로젝트 구조 변경하기
• component/app: 소개 - Header - 함수 컴포넌트
• component/header-1: 소개 - 재활용 가능한 컴포넌트로 개선하기: Props
• component/header-2: 구현하기 1 - SearchForm 1
• component/search-form-1: 구현하기 1 - SearchForm 2
• component/search-form-2: 구현하기 1 - State 끌어올리기
• component/search-form-3: 구현하기 1 - SearchResult
• component/search-result: 구현하기 1 - Tabs
• component/tab: 구현하기 2 - 상속 1
• component/inheritance-1: 구현하기 2 - 상속 2(실습)
• component/inheritance-2: 구현하기 2 - 조합: 컴포넌트 담기 1
• component/composition-1: 구현하기 2 - 조합: 컴포넌트 담기 2(실습)
• component/composition-2: 구현하기 2 - 조합: 특수화 1
• component/composition-3: 구현하기 2 - 조합: 특수화 2(실습)
• master: 최종 결과물