1장 리액트 시작
__1.1 왜 리액트인가?
____1.1.1 리액트 이해
__1.2 리액트의 특징
____1.2.1 Virtual DOM
____1.2.2 기타 특징
__1.3 작업 환경 설정
____1.3.1 Node.js와 npm
____1.3.2 yarn
____1.3.3 에디터 설치
____1.3.4 Git 설치
____1.3.5 create-react-app으로 프로젝트 생성하기
2장 JSX
__2.1 코드 이해하기
__2.2 JSX란?
__2.3 JSX의 장점
____2.3.1 보기 쉽고 익숙하다
____2.3.2 더욱 높은 활용도
__2.4 JSX 문법
____2.4.1 감싸인 요소
____2.4.2 자바스크립트 표현
____2.4.3 If 문 대신 조건부 연산자
____2.4.4 AND 연산자(&&를 사용한 조건부 렌더링
____2.4.5 undefined를 렌더링하지 않기
____2.4.6 인라인 스타일링
____2.4.7 class 대신 className
____2.4.8 꼭 닫아야 하는 태그
____2.4.9 주석
__2.5 ESLint와 Prettier 적용하기
____2.5.1 ESLint
____2.5.2 Prettier
__2.6 정리
3장 컴포넌트
__3.1 클래스형 컴포넌트
__3.2 첫 컴포넌트 생성
____3.2.1 src 디렉터리에 MyComponent.js 파일 생성
____3.2.2 코드 작성하기
____3.2.3 모듈 내보내기 및 불러오기
__3.3 props
____3.3.1 JSX 내부에서 props 렌더링
____3.3.2 컴포넌트를 사용할 때 props 값 지정하기
____3.3.3 props 기본값 설정: defaultProps
____3.3.4 태그 사이의 내용을 보여 주는 children
____3.3.5 비구조화 할당 문법을 통
리액트, 현장 밀착 입문서는 따로 있다!
자바스크립트의 기본 기능과 문법을 숙지한다
리액트의 기본기를 익히려면 자바스크립트는 필수! 잘 모르는 자바스크립트 문법이 나오면 반드시 체크하자. 리액트 개발에 필요한 ES6 문법은 적재적소에 배치했다.
원리를 알면 더 효율적으로 사용할 수 있다
동작 원리를 이해하면 리액트를 왜 사용해야 하는지, 어떻게 사용하면 좋은지 큰 그림을 그릴 수 있다. 작은 프로젝트를 해보면서 리액트를 통해 개발자 경험을 향상시키는 방법을 배우자.
웹 애플리케이션에 리액트를 적용해본다.
리액트를 적용해보면서 실전 감각을 익힌다. UI 업데이트 과정을 간결하게, 복잡한 애플리케이션 개발도 컴포넌트 기반으로 쉽게, 자바스크립트 개발을 손쉽게.
리액트를 이해하기 위한 핵심 개념은 물론이고 어떤 상황에서 어떻게 사용해야 하는지, 왜 이렇게 사용하는 것이 효과적인지, 공식 문서에는 나오지 않는 실전 노하우와 팁을 풍부하게 담았다.
또한, 프로젝트 생성부터 코드를 작성 및 개선하고, 배포하기까지 실무에 바로 응용할 수 있도록 예제를 준비했다. 먼저 일정 관리 애플리케이션을 만들면서 리액트의 기본기를 다지고, 다음으로 여러 실습 예제를 진행하면서 컴포넌트 스타일링, 상태 관리, API 연동, 라우팅, 코드 스플리팅, 서버사이드 렌더링 등 리액트를 활용한 다양한 기술을 사용해본다. 마지막으로 프런트엔드 프로젝트를 통해 배운 지식을 종합적으로 활용해본다.
