코딩 자율학습 리액트 프런트엔드 개발 입문

김기수

저자:김기수
비전공자출신으로안드로이드/iOS개발로커리어를시작해10년이넘는시간동안프런트엔드,백엔드분야의다양한언어를접하고활용하며여전히개발자의길을걷고있습니다.현재는코딩유튜브채널인‘수코딩’을운영하며많은사람이코딩을쉽게배울수있도록끊임없이연구하며노력하고있습니다.
유튜브채널:youtube.com/@sucoding
수코딩사이트:sucoding.kr

1장리액트시작하기

1.1리액트개요
1.1.1리액트의핵심철학
1.1.2리액트의특징
1.1.3리액트를배워야하는이유
1.1.4리액트의발전

1.2개발환경설정하기
1.2.1Node.js설치
1.2.2VSCode설치
1.2.3VSCode익스텐션설치
1.2.4웹브라우저설치

1.3리액트애플리케이션만들기
1.3.1Vite로프로젝트생성하기
1.3.2불필요한폴더와파일삭제및수정하기
1.3.3기본구조살펴보기

2장JSX개요

2.1JSX란

2.2JSX의문법적특징
2.2.1하나의루트요소로반환하기
2.2.2모든태그닫기
2.2.3태그속성은카멜케이스로작성하기
2.2.4표현식은중괄호안에서사용하기
2.2.5인라인스타일은객체로지정하기
2.2.6중괄호안에주석작성하기

3장컴포넌트

3.1컴포넌트란

3.2컴포넌트의종류
3.2.1클래스컴포넌트
3.2.2함수형컴포넌트
3.2.3클래스컴포넌트와함수형컴포넌트사용

3.3컴포넌트기초
3.3.1컴포넌트확장자
3.3.2컴포넌트정의
3.3.3컴포넌트추가
3.3.4컴포넌트트리

3.4컴포넌트와props객체
3.4.1props객체란
3.4.2props객체타입알아내기
3.4.3props객체의구조분해할당과타입정의
3.4.4props와전개연산자
3.4.5children

3.5컴포넌트와이벤트
3.5.1이벤트속성
3.5.2이벤트핸들러
3.5.3이벤트객체
3.5.4이벤트전파

4장컴포넌트상태

4.1컴포넌트의상태란

4.2useState훅:기본상태관리
4.2.1useState훅의기본문법
4.2.2useState훅사용하기
4.2.3useState훅여러번사용하기
4.2.4useState훅사용시주의사항

4.3useReducer훅:복잡한상태관리
4.3.1useReducer훅기본문법
4.3.2useReducer훅사용하기
4.3.3useReducer훅여러번사용하기

4.4상태관리패턴
4.4.1상태전달하기
4.4.2상태끌어올리기

4.5개발자도구로상태값확인하기

5장컴포넌트스타일링

5.1전통적인방법으로스타일링하기
5.1.1인라인스타일
5.1.2글로벌스타일
5.1.3CSS모듈
5.1.4classnames라이브러리

5.2CSS-in-JS로스타일링하기
5.2.1styled-components
5.2.2emotion
5.2.3vanilla-extract

5.3TailwindCSS로스타일링하기
5.3.1설치및기본사용법
5.3.2tailwlind-merge라이브러리

5.4이미지렌더링하기
5.4.1이미지리소스준비하기
5.4.2public폴더에서이미지렌더링하기
5.4.3src폴더에서이미지렌더링하기

5.5폰트적용하기
5.5.1구글폰트적용하기
5.5.2@font-face로웹폰트적용하기

6장실습:계산기만들기

6.1실습내용소개

6.2리액트애플리케이션의기본구조설정하기
6.2.1프로젝트생성하기
6.2.2불필요한폴더와파일정리하기

6.3UI구성하기
6.3.1HTML작성하기
6.3.2CSS작성하기

6.4데이터바인딩하고이벤트연결하기
6.4.1데이터와이벤트핸들러정의하기
6.4.2이벤트핸들러정의하고연결하기

6.5로직구현하기
6.5.1숫자입력로직구현하기
6.5.2연산로직구현하기
6.5.3초기화로직구현하기
6.5.4소수점로직구현하기
6.5.5예외처리하기

7장조건부렌더링과반복렌더링

7.1조건부렌더링
7.1.1if문을사용한조건부렌더링
7.1.2삼항연산자를사용한조건부렌더링
7.1.3AND연산자를사용한조건부렌더링

7.2반복렌더링
7.2.1반복렌더링의기본개념이해하기
7.2.2map()메서드사용하기
7.2.3그밖의사용법

8장폼다루기

8.1폼정의하기

8.2폼제어하기
8.2.1제어컴포넌트
8.2.2비제어컴포넌트

8.3폼제어한단계더나아가기
8.3.1useRef훅활용하기
8.3.2커스텀훅사용하기
8.3.3커스텀훅심화

8.4폼밸리데이션
8.4.1기본밸리데이션사용하기
8.4.2커스텀밸리데이션로직추가하기
8.4.3라이브러리사용하기

8.5리액트19에서ref변경사항
8.5.1ref객체의컴포넌트전달방식
8.5.2클린업함수

9장실습:할일관리애플리케이션만들기

9.1실습내용소개

9.2UI구성하기
9.2.1기본구조설정하기
9.2.2HTML작성하기
9.2.3CSS작성하기

9.3컴포넌트분리하기
9.3.1복잡한
9.3.2버튼요소컴포넌트로분리하기
9.3.3텍스트입력요소컴포넌트로분리하기
9.3.4체크박스요소컴포넌트로분리하기
9.3.5레이아웃요소컴포넌트로분리하기

9.4기능구현하기
9.4.1할일목록입력받기
9.4.2할일목록출력하기
9.4.3할일완료처리하기
9.4.4할일삭제하기
9.4.5할일수정하기

10장고유아이디와사이드이펙트

10.1useId훅

10.2useEffect훅
10.2.1컴포넌트의생명주기
10.2.2useEffect훅사례

10.3할일관리애플리케이션개선하기
10.3.1폼요소연결하기
10.3.2할일저장하기

11장컴포넌트최적화

11.1컴포넌트최적화개요
11.1.1성능최적화방법
11.1.2불필요한리렌더링
11.1.3메모이제이션

11.2컴포넌트메모이제이션
11.2.1React.memo사용하기
11.2.2React.memo사용시주의사항

11.3함수메모이제이션
11.3.1함수를props로전달하는경우
11.3.2useCallback훅사용하기
11.3.3useCallback훅사용시주의사항

11.4값메모이제이션
11.4.1연산비용이큰작업의성능저하문제
11.4.2useMemo훅사용하기
11.4.3useMemo훅사용시주의사항

11.5로딩성능최적화
11.5.1React.lazy()를사용한코드스플리팅
11.5.2Suspense
11.5.3ErrorBoundary

11.6상태업데이트최적화
11.6.1useDeferredValue훅(리액트19이후)
11.6.2useTransition훅

11.7리소스로딩최적화(리액트19이후)

11.8할일관리애플리케이션개선하기
11.8.1불필요한리렌더링코드찾기
11.8.2불필요한리렌더링최적화하기

12장전역상태관리

12.1상태관리이해하기
12.1.1로컬상태관리
12.1.2전역상태관리

12.2ContextAPI로전역상태관리하기
12.2.1컨텍스트객체생성하기
12.2.2Provider로컨텍스트범위지정하기
12.2.3useContext커스텀훅만들기
12.2.4컨텍스트로공유되는전역상태사용하기
12.2.5렌더링최적화하기
12.2.6컨텍스트중첩사용하기
12.2.7ContextAPI사용시주의사항
12.2.8use훅으로ContextAPI사용하기(리액트19이후)

12.3Redux로전역상태관리하기
12.3.1Redux와ReduxToolkit설치하기
12.3.2Redux스토어생성하기
12.3.3Redux스토어리액트에제공하기
12.3.4Redux상태슬라이스만들기
12.3.5슬라이스를스토어에추가하기
12.3.6스토어사용하기
12.3.7값을전달해상태변경하기
12.3.8개발자도구활용하기

12.4Zustand로전역상태관리하기
12.4.1Zustand설치하기
12.4.2Zustand스토어생성하기
12.4.3Zustand스토어사용하기
12.4.4Zustand의고급기능

12.5할일관리애플리케이션에전역상태관리적용하기
12.5.1Zustand설치하기
12.5.2스토어생성하기
12.5.3스토어사용하기

13장리액트라우터로라우팅기능사용하기

13.1라우팅방식이해하기
13.1.1SPA와CSR
13.1.2MPA와SSR
13.1.3리액트와리액트라우터

13.2리액트라우터다루기
13.2.1리액트라우터설치하기
13.2.2라우팅컴포넌트만들기
13.2.3라우팅범위지정하기
13.2.4라우트설정하기

13.3리액트라우터기능사용하기
13.3.1중첩라우트
13.3.2레이아웃라우트
13.3.3라우트프리픽스
13.3.4동적세그먼트
13.3.5옵셔널세그먼트
13.3.6스플랫
13.3.7문서메타데이터설정하기(리액트19이후)

13.4내비게이션기능사용하기
13.4.1링크를통한이동
13.4.2프로그래밍방식라우팅

14장비동기데이터통신과처리기법

14.1데이터통신의기초개념
14.1.1HTTP와메서드
14.1.2API

14.2Node.js로API서버만들기
14.2.1API서버실행하기
14.2.2API서버코드확인하기

14.3FetchAPI로데이터통신하기
14.3.1기본문법
14.3.2HTTP메서드사용법
14.3.3리액트에서사용하기

14.4Axios로데이터통신하기
14.4.1Axios라이브러리설치및기본문법
14.4.2HTTP메서드사용법
14.4.3리액트에서사용하기

14.5데