React.js 개발환경 구축 및 component,props

리액트의 장점 : 빠른 업데이트 & 렌더링 속도

Virtual DOM : 가상의 DOM으로 Browser DOM을 전부 수정하지 않고 바뀐 부분만 re-render
Component-Based : 컴포넌트를 정의하고 재사용한다. (Reusability)

리액트에서 쓰이는 언어는 페이스북에서 만든 유사 자바스크립트 언어인 JSX 이다.

JSX = JavaScript + XML/HTML

but, 필수로 JSX를 써야하는건 아니지만 쓰면 편하다.

HTML 태그 안에 { 중괄호 } 안에 Javascript 코드를 쓴다.

Component
- 리액트에서는 컴포넌트화가 중요
- 가독성
- 재사용성
- 유지보수성
- function component
- class component
- 컴포넌트명은 항상 대문자로 시작해야한다. 소문자는 html 태그로 인식하기 때문

개발환경 구축 (Windows 기준)
- reactjs.org - 공식사이트
- create React App - Toolchain 개발 도구 모음
- node.js의 npm으로 설치
- npm install -g create-react-app
- 공식 메뉴얼 npx 설치방법
- npx : 임시로 설치해서 한 번만 실행하고 삭제하는 방법, 사용시마다 최신버젼 설치
- npx create-react-app
- create-react-app을 이용한 개발환경 구축
- cmd 상에서 workspace 경로로 이동 후 create-react-app .
- npm run start 시작
- ctrl + c 종료
- npm run build 빌드하기
- npm install -g serve serve 설치
- npx serve -s build 빌드한 build 폴더를 root로 웹서버 배포
컴포넌트 제작
- 함수 형태와 클래스 형태로 컴포넌트를 만들지만 수업에서는 클래스 이용
- class 안의 함수는 function 생략 가능
- Component를 상속받은 클래스 생성 후 render() 메소드 호출
- Component 클래스를 사용하려면 import React, { Component } from ‘react’; 명시적으로 import를 시켜주어야 한다.
- return (); 안에 컴포넌트화할 HTML 태그를 넣는데 하나의 최상위 태그만 써야한다.
props
- HTML의 태그 속성(attribute)을 리액트에서는 props라 한다.
- props는 Read-only 속성으로 props를 직접 바꿀 수 없고 같은 props에 대해서는 같은 결과만을 보여주어야 한다.
- js의 function처럼 리액트의 component는 props를 입력받아 element를 출력한다.
- APP에서 컴포넌트 호출시 컴포넌트에 사용자가 정의한 속성을 부여하고자 할 때, 컴포넌트에서 ‘{this.props.속성명}’으로 사용 -> 컴포넌트의 재사용성
React Developer Tools
- 크롬 확장앱
- 리액트의 각 컴포넌트 및 props 열람 가능
- 개발자 모드 상에서 수정도 가능
컴포넌트 파일로 분리하기
- 컴포넌트에서 ‘export default 컴포넌트클래스명’
- APP(컴포넌트를 사용할 곳)에서 ‘import 클래스명 from ‘컴포넌트path(확장자 생략)’‘