[React 톱아보기] React 톺아보기 시리즈 소개

React 톺아보기 시리즈에서는 React 공식 문서를 바탕으로 기초부터 심화까지의 내용을 정리하도록 하겠습니다.

프로그래밍 공부는 프로젝트에 실전적으로 적용하면서 배우는 Project Based Learning이 정말 중요합니다. 따라서 공식 문서의 틱 택 토, To Do List를 만들어 보면서 React의 주요 내용들을 적용해 보도록 하겠습니다.

 

참고 자료들

React 공식 문서

리액트의 공식 사이트에 있는 문서입니다. React의 기본부터 심화까지 다룹니다.

 

CRA

CRA는 페이스북에서 만든 공식 React 개발용 Boilerplate입니다. 간단히 말해서 React 개발 환경 구축 툴입니다. React를 공부하면서 CRA를 굉장히 많이 사용할 텐데, 이 문서는 CRA에 대한 설명 뿐만 아니라 CRA를 사용하면서 같이 사용하면 좋도록 라이브러리 접목하는 법이나 API 사용법 테스팅, 백엔드, deploy 등등 여러 팁이 있습니다.

 

Velopert React 강의

Velopert님은 Velog의 창시자로 프론트엔드 분야에서 많은 업적을 쌓으신 분입니다. 프론트엔드 개발자라면 한 번쯤은 들어봤을 정도로 여러 강의와 오픈소스에 기여하고 있습니다. Velopert님의 강의를 통해 React를 응용하는 법을 쉽게 배울 수 있습니다.

 

Contents

0. React란?(Introducing React)

1. React 설치 및 개발 환경 설정하기

2. React의 엘리먼트 렌더링(JSX문법, 엘리먼트 렌더링, 컴포넌트와 프랍스)

3. JSX란?

4. 컴포넌트, 컴포넌트 렌더링

5. State(React의 상태 관리)

6. 입력 데이터 관리하기

4. React의 이벤트 핸들링

5. React의 랜더링(랜더링, 조건부 랜더링)

6. React의 map, slice, contact, spread 사용

7. React에서 입력 데이터 관리하기(Form)

8. React Hook 1: useState

...

9. 

10. React 테스트하기

11. React의 3rd party library들

 

스펙

React를 다루면서 기본적으로 사용할 것들입니다. 웹페이지를 간단하게라도 만들어본 경험이 있는 것이 이해하기 수월할 것입니다.

개발 환경

• vscode
• 터미널

웹 페이지 설계 기본

• HTML
• CSS

 

프로그래밍 언어

• javascript