• [React 공식문서]
• [React 공식문서 합성, 상속 정리]
  이번 스프린트 목적

1. Start React
   react개념 보고 react작성 (솔로)
2. Recast.ly
   react를 이용하여 유투브 만들기 (페어?)
3. Todo.List
   나만의 todolist만들기 (솔로)

React란?

웹사이트를 만드는 방법(프론트엔드 구현)을 크게 2가지로 나누면
1. HTML, CSS, 바닐라 Javascript를 이용해 구현
2. 라이브러리 이용(React, Vue, Angular, 등등...)
으로 나뉘며 그 중 React는 현 프론트엔드 개발자에게 인기있는 Componet 기반 라이브러리이다.

ES6

react는 기본적으로 ES6형식을 이용하기 때문에 react를 사용하기 위해서는 ES6를 사용할 줄 알아야 한다. [ES6 Syntax 정리]
브라우저는 ES6 문법을 이해할 수 없기 때문에 babel-loader(웹팩로더 종류 중 하나)를 이용해 ES6문법을 적용시킨다.

JSX

JSX는 react를 이용한 코드 작성시 복잡도를 줄이고 가독성을 높히이 위한 JavaScript의 확장 문법이다.

JSX를 이용하려면 몇가지 규칙을 지켜야 한다.
1. 태그가 비어있다면 /> 를 이용해 꼭 닫아주어야 하며, 여러개의 element가 있으면 반드시 하나의 element로 모든 element가 감싸져 있어야 한다.
2. jsx에서 javascript 코드를 적용할 때에는 {}(중괄호)안에 작성한다.
3. 조건부 렌더링을 할 때에는 if문을 사용 할 수 없다. 대신 삼항연산자와 AND 연산자를 사용한다.
4. camelCase: javascript에서 class는 예약어이므로 클래스네임을 지정할 때 class가 아닌 className으로 작성한다. 마찬가지로 클릭이벤트에서는 onclick이 아니라 onClick으로 작성한다.

Key Concept

1. Data Flow
   react는 단반향 흐름을 가지고 있다. 역순으로 흘러 갈 수 없으면 반드시 자식 컴포넌트는 부모 컴포넌트를 가진다. 리액트 컴포넌트에서 다루는 데이터는 두개로 나뉜다.

   1.1. Props
   상위 컴포넌트가 하위 컴포넌트에게 내려주는 데이터이다. 따라서 하위 컴포넌트는 단순히 상위 컴포넌트를 사용만 할 수 있고 수정,변경은 할 수 없다.

   1.2 State
   컴포넌트가 갖는 특정 상태를 말한다. 객체의 형태로 컴포넌트 내에서 보관하고 관리한다. state를 사용하기 위해서는 class형태로 작성해야하고 값을 변경할 땐 반드시 setState 메서드를 사용해야 한다.(state값을 변경하면 render()함수가 다시 호출된다.)

2. Life Cycle
   컴포넌트가 브라우저에 보여질 때, 업데이트 될때, 사라질 때 각 전 단계, 전 후로 특정 메서드가 호출된다