[React] 리액트 이해 & 초기 셋팅

✅ 1. Why React ?

1-1. Web Application의 발전

웹 애플리케이션(웹 페이지)의 규모가 커지고 다양한 UI, UX를 구현하기 위해서는 이전의 방법(DOM, jQuery)으로는 애플리케이션을 개발하고 코드를 유지보수 하는 것이 어려워졌다.

규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework(Library)가 등장하게 된다. 그 중 가장 많이 쓰이는 세 가지가 Angular, Vue, React 이다.

1-2. Frontend Framework(Library)

⏩ React vs. Angular/Vue

• React 는 “지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것” 을 목표로 2013년 Facebook에서 개발한 Library
• MVC(Model-View-Controller) Architecture (ex. Angular, Vue)와는 다르게 리액트는 오로지 View만 담당. 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리(ex. React-router, Redux)를 함께 사용
• 페이스북의 지속적인 관리와 함께 생태계가 활성화 되어 있으며, React Native의 사용으로 인해 사용자가 꾸준히 증가

✅ 2. What is React ?

✨ React는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리다.

• React와 같은 프론트엔드 라이브러리 or 프레임워크는 UI를 자동으로 업데이트
• 리액트는 가상 돔(Virtual Dom)을 통해 UI를 빠르게 업데이트
• 가상 돔(Virtual Dom): 이전 UI 상태를 메모리에 유지해서 변경될 UI의 최소 집합을 계산하는 기술
• 가상 돔(Virtual Dom) 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아짐

✅ 3. 작업 환경 셋팅

3-1. Node.js & npm

⏩ Node

Node.js 는 자바스크립트가 브라우저 밖(ex. 서버)에서도 동작하게 하는 환경을 의미한다.

❓ 리액트는 오로지 view만 신경쓰는 UI 라이브러리인데 왜 Node.js가 필요한걸까?

• 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들(ex. 바벨, 웹팩)이 Node.js 기반이기 때문에 반드시 설치해야 한다. Node.js를 설치하면 npm(node package manager) 이 자동으로 설치 된다.
• npm은 노드 기반의 패키지를 관리해주는 도구로 npm을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있다

터미널에서 아래의 명령어를 실행 함으로써 Node.js 의 버전을 확인할 수 있다. 노드 버전이 정상적으로 확인되면 설치도 정상적으로 이루어진 것이다.

  $ node -v
  $ npm -v

3-2. CRA(Create-React-App)

⏩ What is CRA ?

리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구
(toolchain)

• 리액트는 UI기능만 제공, 따라서 개발자가 직접 구축해야하는 것들이 많음
• 처음 시작하는 단계에서는 직접 개발 환경을 구축하기 어려움
• if you're learning React or creatng a new sinle-page app, use Create React App
• CRA는 리액트로 웹 어플리케이션을 만들기 위한 환경을 제공
• CRA를 이용하면 하나의 명령어로 리액트 개발환경 구축이 가능
• 내가 코드를 짠 것도 아닌데 무언가 알아서 작동이 된다면 CRA 덕ㅎ

⏩ CRA-Settings

// 1. Desktop - wecode 폴더 진입
cd Desktop/wecode
// 2. westagram-react 프로젝트 설치
npx create-react-app westagram-react
// 3. westagram-react 프로젝트 진입
cd westagram-react
// 4. 로컬 서버 띄우기
npm start

✨ CRA 초기 폴더 및 파일 세팅 구성
1) node_modules

• CRA 를 구성하는 모든 패키지 소스 코드가 존재하는 폴더

2) package.json

• CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일
• 모든 프로젝트마다 package.json 하나씩 존재
• "dependencies"
  - 리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인 가능
  - 실제 코드는 node.modules 폴더에 존재
  ❓ 왜 node.modules 와 package.json 에서 이중으로 패키지 관리❓
      - 실제 내가 작성한 코드, 내가 설치한 패키지는 내 로컬에만 존재
      - github 에 올릴 때 내가 작성한 코드와 함께 package.json(추가로 설치한 패키지 정보) 넘긴다.
      - 다른 사람이 그것을 (pull) 받아서 npm install 만 입력하면 package.json 에 기록되어 있는 패키지의 이름과 버전 정보를 확인하여 자동으로 설치한다.
      - 이때, github 에 올릴 때, node.modules 는 올리면 안 되는데 (불필요한 용량 차지),
      - .gitignore 파일에 github 에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다.

3) gitignore

• 깃허브에 올리고 싶지 않은 파일을 작성
• push 를 해도 .gitignore 파일에 작성된 폴더와 파일은 올라가지 않는다.

✅ 4. Components

4-1. Components 정의

component : 재활용 가능한 UI 구성 단위

4-2. Components 특징

• 재활용하여 사용할 수 있다.
• 코드 유지보수에 좋다.
• 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.
• 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)

4-3. Components를 선언하는 2가지 방식

⏩ Class형 컴포넌트(Class Component)

import React from 'react'
class Component extends React.Component {
  render() {
    return (
	<div>
		<h1>This is Class Component!</h1>
	</div>
	)
  }
}
export default Component

• 클래스형 컴포넌트에서는 render 함수가 꼭 있어야 한다.

⏩ 함수형 컴포넌트(Functional Component)

import React from 'react'
const Component = () => {
  return (
	<div>
		<h1>This is Functional Component!</h1>
	</div>
  )
};
export default Component

• 함수형 컴포넌트가 보기에는 훨씬 간단하고 작성하기 편리한 장점이 있다.

✅ 5. JSX

• JavaScript Syntax Extension
• JSX란 리액트에서 사용하는 자바스크립트 확장 문법
• JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환

⏩ 장점

• HTML 태그를 그대로 사용하기 때문에 보기 쉽고 익숙
• HTML 태그를 사용하는 동시에 자바스크립트도 JSX 안에서 동작하게 할 수 있음

⏩ 특징

• 자바스크립트 표현 : { ... javascript... }
• class 는 className으로
• Inline Styling : <div style={{color : "red"}}>Hello React</div>
• Self Closing tag : <div></div> 는 <div />로
• 모든 요소를 감싸는 최상위 요소 (cf. React Fragments : <> ... </>)