[React] 1. Intro

wecode 3주 차, 이제 조금 자바스크립트를 알게 되어 갈 즘 React를 만났다. 세션에서 배운내용을 정리 해 보려한다.

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

1. 어떠한 흐름으로 오늘날 React가 많이 사용되고 있는가?

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

🖐 잠깐) Frontend Framework(Library)에 대해 알고 넘어가자.

:: Angular
2010년 Google에서 개발한 Framework.
-장점: TypeScript 기반으로 안정적인 Frontend App 개발이 가능하며, 다양한 기능이 내장되어있다.
-단점: 무겁고 배우기 어렵다.

:: Vue
2014년 Evan You라는 개인이 개발한 Framework.
-장점: 코드가 깔끔하고 배우기 쉽다. 가장 나중에 생겼지만 성장 속도가 정말 빠르다.
-단점: 인지도가 낮으며, 업데이트 주기가 일정하지 않다.

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

🧐 Library? Framework?

• Library?
  개발시 활용가능한 도구들을 모아 모듈화한 것이다.

• Framework?
  기본적인 뼈대가 이미 완성되어있고 규칙이 존재하는 개발환경이다. 필수적인 코드, 알고리즘 등 어느 정도의 구조를 제공함.
  (node.js, django 등등..)

2. React의 정의

페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리다.
리액트와 같은 프론트엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유 중 하나는 가상 돔을 통해UI를 자동으로 빠르게 업데이트해 준다는 점이다.
가상 돔(Virtual Dom)은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다. 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아진다.

3. 작업 환경 설정

(CRA를 설치, 폴더와 파일의 구성)

:: Node.js

Node.js 는 자바스크립트가 브라우저 밖(ex. 서버)에서도 동작하게 하는 환경을 의미한다. 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들(ex. 바벨, 웹팩)이 Node.js 기반이기 때문에 반드시 설치해야 한다.
Node.js를 설치하면 npm(node package manager) 이 자동으로 설치 되는데 npm을 사용하기 위해서는 노드(Node.js)가 설치되어 있어야 한다. 터미널에서 아래의 명령어를 실행 함으로써 Node.js 의 버전을 확인할 수 있다. 노드 버전이 정상적으로 확인되면 설치도 정상적으로 이루어진 것이다.

$ node -v

:: npm

Node 기반의 패키지를 사용하려면 npm(node package manager)이라는 패키지 도구가 필요하다. npm 을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있다. 마찬가지로 npm 버전을 확인하는 명령어를 통해 설치가 정상적으로 이루어졌는지 확인해볼 수 있다.

$ npm -v

:: CRA(Create-React-App)

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

리액트는 UI 기능만 제공한다. 따라서 개발자가 직접 구축해야하는 것들이 많다. 전반적인 시스템을 직접 구축할 수 있으니 원하는 환경에 맞게 최적화할 수 있지만, 반대로 신경쓸 것이 많기 때문에 처음 시작하는 단계에서는 직접 개발 환경을 구축하기 어려울 수 있다.

리액트 팀에서는 이러한 문제를 해결하기 위해 CRA(Create-React-App)을 만들었다. CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다. CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있다.

CRA를 이용하면 개발 환경 세팅을 해주기 때문에 기존 기능을 개선하거나 새로운 기능을 추가했을 때 패키지 버전만 올리면 된다.

:: CRA 설치

// 1. Desktop - wecode 폴더 진입
cd Desktop/wecode

// 2. westagram-react 프로젝트 설치
npx create-react-app westagram-react

// 3. westagram-react 프로젝트 진입
cd westagram-react

// 4. 로컬 서버 띄우기
npm start

4. Component의 개념과 종류

💡 Component란?
- 재활용 가능한 UI 구성 단위이다.

ex) instagram 메인 페이지
- instagram main 페이지를 Component로 나눈다면,
- 크게 Nav 컴포넌트와 Main 컴포넌트, 그리고 Main 컴포넌트 안에는 Feed 컴포넌트와 MainRight 컴포넌트로 나눌 수 있다.
- 이와 같이 화면의 구성 요소들을 컴포넌트로 나눌 수 있다.

:: 컴포넌트의 특징

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

:: Class vs Functional Component

컴포넌트의 종류, 즉 컴포넌트를 선언하는 방식에는 두 가지가 있다.

• Class형 컴포넌트(Class Component)
• 함수형 컴포넌트(Functional Component)

1) 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 함수가 꼭 있어야 하고, 그 안에 보여 주어야 할 JSX를 반환합니다.

2) Functional Component

import React from 'react'

const Component = () => {
  return (
    <div>
      <h1>This is Functional Component!</h1>
    </div>
  )
};

export default Component

- 함수형 컴포넌트가 보기에는 훨씬 간단하고 작성하기 편리하다다.
- lifecylce, state, props 등 주요 개념들을 익히기에는 class형 컴포넌트가 훨씬 직관적이고 배우기 쉽다.

5. JSX 를 정의와 특성

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

:: JSX 장점

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

:: JSX 특징

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

<> //JSX의 큰 특징, 내부 요소들을 감싸는 최상위 요소
  <div className="loginBtn" onClick={() => console.log("click")}>Login</div>
  <br />
  <div style={{backgroundColor: "grey", height: "10px"}} />
</>