[React] Intro

리액트

: 리액트는 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리이다.

특징

• 선언형 : 코드의 의도를 분명히 알 수 있다. (JSX 활용)
• 컴포넌트 기반 : 독립적이며, 재사용이 가능하다
  기능 자체에 집중하여 개발이 가능하며, 유지보수, 유닛테스트하기에 편하다.
  *컴포넌트 : 하나의 기능구현을 위하 여러종류의 코드를 묶어 놓은 것
• 범용성 : 리액트는 라이브러리이기 때문에 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있다.
  리액트 네이티브로 모바일 개발이 가능하다.

JSX

• JSX, JavaScript XML : React에서 UI를 구성할 때 사용하는 문법으로, JavaScript를 확장한 문법이다.
  JSX를 통해 React 엘리먼트를 만들 수 있다.
  (브라우저에서 바로 실행이 불가해 JavaScript로 컴파일 해줘야함.)

• Babel : JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일

React DOM	DOM
JSX, CSS	HTML, JavaScript, CSS

DOM코드보다 명시적으로 코드작성이 가능하고, JavaScript문법과 HTML문법을 동시에 이용해 기능과 구조를 한눈에 확인 가능하다.
이렇게 구조와 동작에 대한 코드를 한 번에 묶은 코드셋을 컴포넌트라고 한다.

JSX활용

• 하나의 엘리먼트 안에 모든 엘리먼트가 포함
• 클래스 사용시 ClassName으로 표기
• JavaScript표현식 사용시 중괄호{} 사용
• 사용자 정의 컴포넌트는 대문자로 시작 (소문자 시작시 일반적인 HTML엘리먼트로 인식)
• 조건부 렌더링에서는 if문이 아닌 삼항연산자 사용
  ex) fetch ? Data : 로딩화면
• 여러개의 HTML엘리먼트 표시할 때에는 'map()'함수 사용하고, 반드시 'key'속성 입력해야함

Component-Based

• 컴포넌트 : 하나의 기능 구현을 위한 여러 종류의 코드 묶음

리액트 어플리케이션은 컴포넌트들의 관계를 트리 구조로 형상화해서 표현할 수 있다.
기술적인 특징이 아닌, 실제 사용자가 사용하는 기능을 기준으로 코드를 모아 개발한다.

컴포넌트 기반 개발은 웹 애플리케이션에서 각 기능별로 하나의 컴포넌트를 작성하도록 권장한다.
그래서 컴포넌트 사이의 의존성이 낮아지고, 독립적으로 작동한다. -> 독립성, 재사용성

컴포넌트를 먼저 완성시키고, 레이아웃에 따라 유동적으로 컴포넌트의 위치를 변경할 수 있는 상황식 개발 (Bottom-up)방식에 적합하다.

Create React App

리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인

# 필요한 프로그램 버전확인하기
git --version
node --version (LTS사용하기)
npm --version 

# 리액트를 사용하고 싶은 디렉토리에 설치한다.
npx create-react-app 프로젝트이름

'package.json' 파일에서 설치된 패키지 목록등을 확인할 수 있다.