new TIL. React intro

사실 React를 처음 시작하고 너무나도 막연했다. 어떤 것을 위해 사용하는지 크게 와닿지 않아서 그랬나보다😅 이후 Router를 배우고 그 모호함이 조금씩 사라지는 것 같긴 했다.
앞으로 무시무시한 state와 props가 남았지만, 그 전에 기초를 탄탄하게 잡기 위해 이렇게 정리해본다!

1. React. Why? What?

Application의 발전

다양한 UI & UX를 구현하는 현대 웹. 이러한 복잡하고 규모가 큰 웹을 유지보수하고 많은 양의 데이터 관리와 생산성을 향상시키지 위해 framework/Library가 등장하였다.
Angular/Vue와는 달리 React는 View만을 담당하는 Library이기 때문에 third-party Library가 필요하다.
다수의 사용자로 생태계가 활성화되어있다는 장점이 있다.

사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리

A JavaScript library for building user interfaces
React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time.
[출처_Why did we build React?]

가상 돔(virtual dom)
변화가 많은 UI를 DOM에서 직접 처리하지 않고 Virtual Dom과 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화 하는 프로그래밍 개념. 이를 통해 불필요한 UI 업데이트는 줄고, 성능은 개선되었다.

2. CRA

Node.js & npm & CRA

• Node.js : JS가 브라우저 밖에서도 동작하게 하는 환경(탈 웹). 직접적인 연관은 없지만, 다양한 도구들이 Node.js 기반이고, npm이 자동으로 설치되기 때문에 설치해야 한다.

• npm(node package manager) : 웹 어플리케이션 개발을 위해 필요한 다양한 패키지를 설치하고 버전을 관리할 수 있다.

  터미널에 명령어(node -v, npm -v)로 버전 체크!

• CRA(Create-React-App) : React 프로젝트를 위해 필요한 개발 환경을 직접 세팅하기 어렵기 때문에 CRA라는 toolchain 활용. 다양한 패키지와 개발 환경을 구축해줄 뿐만 아니라 버전 업데이트가 손쉽게 가능하다.

  CRA를 사용한 이유는? 리액트를 처음 배우는 단계였고, 프로젝트 시작 전 빠르게 개발 환경 세팅하기 위해.

Settings

node-modules - package.json - .gitignore

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

• package.json : 기본 패키지 외 추가 설치된 라이브러리/패키지 종류 및 버전이 기록되는 파일

  github에는 작성한 코드와 함께 package.json을 올린다. node modules는 불필요한 용량을 차지하기 때문에 package.json에 기록되어있는 패키지 이름과 버전 정보를 확인하여 자동으로 설치하도록 한다. (node.modules는 .gitignore)

  dependencies : 리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인 가능(실제 코드는 node.modules에 있음)
  scripts defines a set of node scripts you can run.

• .gitignore : github에 올리지 않을 폴더와 파일을 작성

index.html - index.js - App.js

• index.html : public 폴더 내 위치. <div id="root"></div>
• index.js : src 폴더 내 위치. 리액트의 entry point.

  ReactDOM.render( <APP />, document.getElementById('root') )
  ReactDOM.render 함수는 두 개의 인자가 필요하다. 1. 화면에 보이고 싶은 컴포넌트, 2. 화면에 보이고 싶은 컴포넌트의 위치

• App.js : src 폴더 내 위치. 현재 화면에 보여지고 있는 최상위 컴포넌트.

3. Component & JSX

Component = 재활용 가능한 UI 구성 단위

웹 어플리케이션 내에서 재활용하여 사용할 수 있으며, 수정사항이 발생한 경우 컴포넌트를 수정하면 되기 때문에 코드 유지보수에 좋다. 또한 구성을 한 눈에 파악할 수 있어 코드 가독성 측면에서도 좋다.

• class형 컴포넌트 / 함수형 컴포넌트
  class는 함수가 아니기 때문에 render 함수가 꼭 필요하다!
  

  리액트를 처음 배우는 지금 단계에서는 class형 컴포넌트를 추천하셨지만, Hooks의 등장으로 리액트 공식 문서에서는 함수형 컴포넌트와 Hooks의 조합을 추천한다고 한다. 이에 대한 공부는 리액트가 보다 익숙해지면 하도록 하자!
  "Hooks are a new addition in React 16.8. They let you use state and other React features(lifecycle method) without writing a class."

JSX(JavaScript Syntax Extension)

JSX로 작성한 코드는 바벨(Babel)을 사용하여 JS 코드로 변환된다.
처음 헷갈렸던 부분은 파일 확장자가 js이라 JS 코드를 넣어야 하나... 했었는데 html 태그를 사용하는 동시에 JS도 동작하게 할 수 있는 것이였다.

[JSX의 특징]

• 자바스크립트 표현은 { ... }
• class => className
• self closing tag
• 모든 요소를 감싸는 최상위 태그가 있어야 함
  (컴포넌트 이름를 최상위 태그의 className으로 지정하게 되면 다른 scss 파일이 적용될 가능성을 방지할 수 있다.)
  (혹은 Fragments 사용)