Skip to content

Latest commit

 

History

History
87 lines (70 loc) · 4.58 KB

README.md

File metadata and controls

87 lines (70 loc) · 4.58 KB
Raw

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

내용

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

강의 노트

폴더 구성

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

  • 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: 최종 결과물