01. 리액트 소개

01-01. React란
01-02. 리액트는
01-03. React.js 역사

02. 리액트시작

02-01. 무설치로 리액트 시작
02-02. Node.js를 설치하고 리액트시작

03. 리액트 환경설정

03-01. 명령 프롬프트 열기
03-02. React 앱 생성
03-03. 디렉토리 이동
03-04. React 앱 실행
03-05. npm 설치 완료

04. 리액트 앱 수정

04-01. App.js 수정
04-01-01. App.js 열기
04-01-02. 앱 실행
04-01-03. App.js 수정
04-02. index.js 수정
04-02-01. src 폴더 안에 있는 index.js열기
04-02-02. index.js 수정
04-03. index.js 한번 더 수정

05. 리액트 HTML 렌더링

05-01. Render() 함수
05-01-01. 두 개의 지역변수
05-01-02. public 폴더
05-01-03. 렌더링 되는 곳
05-01-04. 'root'라는 아이디 명은 표준 규칙
05-02. HTML Code
05-02-01. JSX
05-03. Root Node

06. 리액트 JSX

06-01. 리액트 JSX 란
06-02. JSX 코딩하기

07. 리액트 JSX 표현식

07-01. React JSX 표현식이란
07-02. JSX 표현식 예
07-03. 최상위 요소는 '하나'
07-03-01. 최상위 요소가 〈main〉 일때
07-03-02. 최상위 요소가 〈〉 일 때
07-03-03. 빈 요소 닫기

08. 리액트 JSX className 속성

08-01. JSX에서 className 속성

09. 리액트 JSX 조건문

09-01. if 문과 삼항 표현식
09-01-01. JSX 코드 외부에 if 문을 작성하는 방법
09-01-02. if 문 대신에 삼항 표현식을 사용하는 방법

10. 리액트 컴포넌트

10-01. 컴포넌트 (Components)란
10-02. 컴포넌트 생성
10-02-01. 클래스 컴포넌트 생성
10-02-02. 함수 컴포넌트 생성
10-03. 컴포넌트 렌더링
10-04. 컴포넌트와 Props
10-04-01. Props를 사용한 컴포넌트 문자열 전달
10-05. 컴포넌트 안의 컴포넌트
10-06. 컴포넌트 합성
10-06-01. props.children
10-06-02. 특별한 컴포넌트 속의 일반적인 컴포넌트
10-07. 별도 파일에 있는 컴포넌트

11. 리액트 클래스 컴포넌트

11-01. Class 컴포넌트 만들기
11-01-01. 클래스 컴포넌트를 생성
11-02. Class 컴포넌트에 있는 Constructor
11-03. class 컴포넌트에 있는 Props
11-04. class 컴포넌트에 있는 생성자 함수
11-05. class 컴포넌트 속의 class 컴포넌트
11-06. 별도 파일에 있는 class 컴포넌트를 참조
11-07. Class 컴포넌트에서 State 객체
11-07-01. State 객체 생성
11-07-02. State 객체 사용
11-07-03. State 객체 변경
11-08. 콤포넌트의 3단계 라이프싸이클
11-08-01. 마운트 (연결 Mounting)
11-08-01-01. constructor (생성자)
11-08-01-02. getDerivedStateFromProps
11-08-01-03. render
11-08-01-04. componentDidMount
11-08-02. 업데이트 (갱신 Updating)
11-08-02-01. getDerivedStateFromProps()
11-08-02-02. shouldComponentUpdate()
11-08-02-02-01. shouldComponentUpdate() false
11-08-02-02-02. shouldComponentUpdate() true
11-08-02-03. render()
11-08-02-04. getSnapshotBeforeUpdate()
11-08-02-05. componentDidUpdate()
11-08-03. 언마운트 (Unmounting)

12. 리액트 Props

12-01. 리액트 Props 란
12-01-01. 리액트에서 데이터 전달하기
12-01-01-01. 매개변수로 데이터 전달하기
12-01-01-02. 변수를 생성하여 값 전달하기
12-01-01-03. 오브젝트를 생성하여 값 전달하기

13. 리액트 이벤트

13-01. React Events
13-01-01. 이벤트 추가
13-01-02. 인수 전달 (Passing Arguments)
13-01-03. React 이벤트 객체 (React Event Object)

14. 리액트 조건문

14-01. React 조건부 렌더링
14-01-01. if 문
14-01-01-01. if 문이 false일 때
14-01-01-02. if 문이 true일 때
14-01-02. React 논리 연산자 &&
14-01-02-01. JSX 표현식이 true 일 때
14-01-02-02. JSX 표현식이 false 일 때
14-01-03. React 삼항 연산자 (Ternary Operator)

15. 리액트 목록

15-01. React 목록
15-02. React 목록 키 (React Lists keys)

16. 리액트 폼

16-01. React Forms 핸들링
16-02. React Forms 처리
16-02-01. useState 훅(Hook)을 사용한 입력 관리
16-02-02. 리액트 폼 제출 (Form submit)
16-02-03. 리액트 다중 입력 폼 필드
16-02-04. 리액트 폼 textarea
16-02-05. 리액트 폼 select 태그에서 selected 속성
16-02-05-01. HTML 방식
16-02-05-02. React 방식

17. 리액트 라우터 (React Router)

17-01. 리액트 라우터란
17-02. 리액트 라우터 추가하기
17-03. 폴더와 파일 구조
17-03-01. 폴더구조 및 생성
17-03-02. pages 폴더 내에 3개의 js 파일 넣기
17-03-03. pages 폴더 내에 layout. js 파일 넣기
17-03-04. index.js 파일 작성하여 src 폴더에 넣기
17-03-05. 디자인 스타일 설정하기 (메뉴 활성화 유지)

18. 리액트 메모 (React Memo)

18-01. React.memo를 이용한 카운트

19. 리액트 CSS 스타일링 (React CSS Styling)
19-01. 리액트 스타일
19-01-01. 인라인 스타일
19-01-01-01. 인라인 스타일 카멜케이스
19-01-01-02. 인라인 스타일에서 자바스크립트 객체 참조
19-01-02. CSS 스타일시트
19-01-03. CSS 모듈

20. 리액트 Sass 스타일링

20-01. Sass 란
20-02. Sass 파일 생성

21. 리액트 훅 (React Hooks)

21-01. 리액트 훅이란?
21-01-01. 버튼 클릭으로 코트 (텍스트) 색상 변경하기
21-01-02. 클릭한 버튼의 배경 색상도 변경하기
21-02. 리액트 useState 훅
21-02-01. useState 가져오기
21-02-02. useState 초기화
21-02-03. State 읽기 (Read State)
21-02-04. State 업데이트 (Update State)
21-02-04-01. 기초 예제
21-02-04-02. 응용 예제
21-02-05. State 유지 (State Hold)
21-02-05-01. 여러 state Hooks 만들기
21-02-05-02. 오브젝트가 포함 된 단일 Hook
21-03. 리액트 useEffect 훅
21-03-01. 1초씩 증가하는 타이머 만들기
21-03-02. 버튼을 클릭할 때마다 증가/감소하는 카운트
21-04. 리액트 useContext 훅
21-04-01. 3개의 컴포넌트에서 context 이용하기
21-05. 리액트 useRef 훅
21-05-01. 버튼을 클릭한 횟수를 경고창에 표시하기
21-05-02. 클릭한 횟수를 경고창과 웹문서에 표시하기
21-06. 리액트 useReducer 훅
21-06-01. 만보걷기 실천한 걸음 횟수 입력하기
21-06-02. 증가/감소 클릭하여 출석 일수 표시하기
21-07. 리액트 useCallback 훅
21-07-01. 입력하는 숫자로 실시간 계산하기
21-07-02. 토글버튼으로 디자인 적용/삭제하기
21-08. 리액트 useMemo 훅
21-08-01. [+] 클릭 횟수만큼 카운트 수와 합계 증가하기
21-08-02. 어제 식사한 칼로리는 몇 칼로리 입니까?
21-09. 리액트 사용자 훅 (React Custom Hooks)
21-09-01. JSONPlaceholder로 photo URL 표시하기
21-09-02. JSONPlaceholder로 album Title 표시하기

22. 리액트 포트폴리오 (React Portfolio Page)

22-01. sass와 목록 key와 useState를 사용한 웹페이지