React Intro

React란?

프론트엔드 개발을 위한 javascript 라이브러리

특징

• 선언형 (declarative)
  • 선언형이란 코드를 명시적으로 보여주는 프로그래밍 방식
  • JSX문법을 기반으로 HTML / CSS / JS를 하나의 파일에 작성한다
• 컴포넌트
  • 하나의 기능을 구현하는 단위
  • UI의 필수 요소
  • 구조(html)와 동작(javascirpt)에 대한 코드 묶음
  • 독립적이고 재사용이 가능하다
  • 유지 보수에 유리하다
  • 트리 구조를 갖는다(최상위 컴포넌트는 <App>)
• 범용성
  • 프레임워크는 생태계에 종속되지만, 라이브러리인 리액트는 일부만으로도 적용이 가능하다

JSX (JavaScript XML)

• react에서 사용하는 문법
• javascript를 확장한 문법
• Babel이 JSX를 컴파일해서 javascript로 변환한다
• html과 javascript 문법을 혼합해 사용

문법

• 엘리먼트가 다수일 경우 반드시 최상위에 감싸는 태그가 존재해야 함
• class가 아닌 className으로 클래스를 지정해주어야 함
• javascript는 반드시 중괄호 {}로 감싸주어야 함
• 컴포넌트 이름은 대문자로 시작해야 함
• 조건부 렌더링에는 삼항 연산자를 사용해야 함
• map()을 사용할 때는 반드시 key JSX 속성을 넣어야 함(key에는 데이터의 id값을 지정)

---

참고:
-코드스테이츠 유어클래스