01. 리액트 기초 편
02. React Router DOM 편
03~08. 그 외
예제 코드 내려받기
01
수업 소개
4
학습목표
리액트를 소개하고 리액트 라이브러리의 필요성을 이해한다.
동영상
https://youtu.be/AoMv0SIjZL8
(1분 11초)
02
실습 환경 구축
7
학습목표
리액트 실습 환경을 구축하는 법을 배우고, 기본 샘플 앱을 구동하는 방법을 익힌다.
동영상
https://youtu.be/txX3bL22esU
(6분 0초)
03
소스 코드 수정 방법
18
학습목표
샘플 리액트 앱을 수정하는 법을 배우고, 애플리케이션을 배포하는 법을 배운다.
동영상
https://youtu.be/XQ-XqLVJBwg
(9분 9초)
예제
【예제 3-1】 리액트 입구 파일에서 <App /> 태그 지우기
【예제 3-2】 리액트 입구 파일에서 <App /> 태그 다시 추가하기
【예제 3-3】 App 함수가 반환하는 코드의 내용 변경하기
【예제 3-4】 App.css 파일에 있는 코드 모두 지우기
【예제 3-5】 App.css 파일에 CSS 코드 추가
【예제 3-6】 index.css 파일에 있는 코드 모두 지우기
【예제 3-7】 index.html 파일의 root 태그에 스타일 추가
04
컴포넌트 만들기
33
학습목표
리액트에서 제공하는 컴포넌트의 역할과 필요성을 이해하고, 리액트 컴포넌트를 작성하는 법을 배운다.
동영상
https://youtu.be/WT58gOl8Eh8
(6분 8초)
예제
【예제 4-1】 root 태그에 스타일 제거
【예제 4-2】 App.css 파일에 추가한 CSS 코드 제거
【예제 4-3】 간단한 HTML 코드 작성
【예제 4-4】 사용자 정의 태그 정의
【예제 4-5】 사용자 정의 태그 정의에 리턴할 HTML 코드 추가
【예제 4-6】 사용자 정의 태그인 <Header> 태그 사용하기
【예제 4-7】 <Header> 태그를 두 개 더 추가하기
【예제 4-8】 Header 함수에서 WEB을 React로 변경
【예제 4-9】 내비게이션 영역, 아티클 영역도 컴포넌트로 변경
05
props
42
학습목표
props를 이용해 리액트 컴포넌트의 재사용성을 높이는 방법을 배운다.
동영상
https://youtu.be/t9e3hMJ_s-c
(11분 46초)
예제
【예제 5-1】 Header 태그에 title props 추가
【예제 5-2】 Header 함수에 props 추가
【예제 5-3】 console.log로 porps.title 출력
【예제 5-4】 <h1*gt; 태그에 WEB 대신 props.title 넣기
【예제 5-5】 props.title을 중괄호로 감싸 표현식으로 만들기
【예제 5-6】 <Article> 태그에 title과 body props 추가
【예제 5-7】 <Article> 태그를 하나 더 추가
【예제 5-8】 다음 실습을 진행하기에 앞서 코드 정리
【예제 5-9】 내비게이션의 목록을 담을 topics 변수 선언
【예제 5-10】 topics 변수에 html, css, javascript 정보를 담은 객체 추가
【예제 5-11】 topics를 props로 전달
【예제 5-12】 내비게이션 영역을 props로 구성
【예제 5-13】 리스트를 링크로 만들기
【예제 5-14】 <li> 태그에 key props 추가
06
이벤트
58
학습목표
컴포넌트 이벤트를 만들고 활용하는 법을 배운다.
동영상
https://youtu.be/s3cDPbcoy_4
(7분 39초)
예제
【예제 6-1】 Header 컴포넌트에 onChangeMode props 추가
【예제 6-2】 Header 함수의 <a> 태그에 onClick 이벤트 추가
【예제 6-3】 <a> 태그의 기본 동작을 방지하는 코드 추가
【예제 6-4】 props로 전달한 onChangeMode 호출
【예제 6-5】 화살표 함수를 이용해 코드를 축약
【예제 6-6】 <Nav> 컴포넌트에 onChangeMode props 추가
【예제 6-7】 Nav 함수의 <a> 태그에 onClick 이벤트 추가
【예제 6-8】 onChangeMode로 id 값 주입
07
state
65
학습목표
state의 역할과 필요성, 사용법을 이해한다.
동영상
https://youtu.be/vmunrKR0uOU
(14분 13초)
예제
【예제 7-1】 mode라는 상수를 추가하고, mode에 따라 다르게 동작하는 조건문 작성
【예제 7-2】 mode에 따라 다르게 출력되도록 content 구성
【예제 7-3】 이벤트가 발생했을 때 mode의 값을 변경
【예제 7-4】 state 임포트
【예제 7-5】 mode를 state로 변경
【예제 7-6】 state를 읽어오기 위한 mode와 변경하기 위한 setMode 선언
【예제 7-7】 setMode를 이용해 mode 값 변경
【예제 7-8】 이름이 id인 state 추가
【예제 7-9】 onChangeMode에서 setId를 이용해 id 값 설정
【예제 7-10】 선택한 id와 일치하는 원소를 찾아서 제목과 본문으로 설정
【예제 7-11】 topics[i]의 id 값과 id state의 값 출력
【예제 7-12】 Number 함수를 이용해 형변환
08
Create
80
학습목표
앱의 CRUD 기능 가운데 Create 기능을 구현한다.
동영상
https://youtu.be/kctNCMFxciQ
(20분 21초)
예제
【예제 8-1】 생성 페이지로 이동하는 링크 추가
【예제 8-2】 mode가 CREATE일 때의 조건문 추가
【예제 8-3】 Create 컴포넌트와 폼 만들기
【예제 8-4】 Create 컴포넌트 만들기 – 제목 입력 폼
【예제 8-5】 Create 컴포넌트 만들기 – 내용 입력 폼
【예제 8-6】 Create 컴포넌트 만들기 – <p> 태그로 감싸기
【예제 8-7】 Create 컴포넌트 만들기 – 전송 버튼
【예제 8-8】 Create 버튼을 눌렀을 때의 후속 작업
【예제 8-9】 <form> 태그에 onSubmit prop 추가
【예제 8-10】 페이지가 리로드되는 것을 방지
【예제 8-11】 폼에 입력한 제목과 내용 가져오기
【예제 8-12】 props를 통해 onCreate 함수 호출
【예제 8-13】 topics를 state로 승격
【예제 8-14】 topics에 들어갈 새로운 원소 만들기
【예제 8-15】 nextId state 추가
【예제 8-16】 setTopics로 topics에 newTopics를 추가
【예제 8-17】 배열을 복제한 다음 setTopic으로 복제본을 전달
【예제 8-18】 글을 추가한 뒤에 추가한 글로 이동하기
09
Update
102
학습목표
앱의 CRUD 기능 가운데 Update 기능을 구현한다.
동영상
https://youtu.be/bW_WOrYzVWw
(20분 44초)
예제
【예제 9-1】 수정 페이지로 이동하는 링크 추가
【예제 9-2】 Create 링크와 Update 링크를 목록으로 감싸기
【예제 9-3】 글의 상세 보기 페이지에서만 Update 링크 표시하기
【예제 9-4】 Update 링크에 글의 id 표시하기
【예제 9-5】 Update 링크에 onClick prop 추가
【예제 9-6】 mode가 UPDATE일 때의 else if 문 추가
【예제 9-7】 Update 함수를 만들고 Create 함수를 복사하여 붙여넣기
【예제 9-8】 Update 함수에 props 추가
【예제 9-9】 onUpdate props 전달
【예제 9-10】 Update 컴포넌트에서 title과 body를 가지고 있도록 코드 변경
【예제 9-11】 mode가 READ일 때의 코드를 복사해서 붙여 넣고, title, body 전달
【예제 9-12】 title과 body state 만들고 props를 state로 전환
【예제 9-13】 onChange 이벤트를 추가하고 로그 출력
【예제 9-14】 setTitle을 이용해 변경된 값을 새로운 title로 설정
【예제 9-15】 setBody를 이용해 변경된 값을 새로운 body로 설정
【예제 9-16】 title과 body 값을 로그로 출력
【예제 9-17】 글 수정 구현
【예제 9-18】 글 수정 후 수정한 글의 상세 페이지로 이동
10
Delete & 수업을 마치며
123
학습목표
앱의 CRUD 기능 가운데 Delete 기능을 구현한다.
동영상
https://youtu.be/OZPRKFqPWG4
(4분 51초)
예제
【예제 10-1】 글 삭제하기
【예제 10-2】 글 삭제 후 WELCOME 페이지로 이동