[React] 리액트 배경, 작업 환경 설정, 컴포넌트

리액트 등장 배경

웹 애플리케이션이 발전하면서, 규모가 커지고 복잡한 애플리케이션을 개발하며

많은 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 프론트앤드 프레임워크가 등장

(그 이전의 것으로는 어려움..?)

 

- JavaScript로 규모가 크고 빠른 웹 애플리케이션을 만드는 가장 좋은 방법

- React의 가장 멋진 점 중 하나는 앱을 설계하는 방식

 

*Frontend Framework(Library) 

1) Angular

- 2010년 Google에서 개발한 Framework

- TypeScript 기반으로 매우 안정적이고 탄탄한 Frontend App 개발이 가능

- Framework답게 다양한 기능이 내장되어 있음, but 무겁고 배우기 어려움

 

2) Vue

- 2014년 Evan You라는 개인이 개발한 Framework.

- 코드가 깔끔하고 배우기 쉽기 때문에 가장 나중에 생겼지만, 성장 속도가 정말 빠름

 

3) React

- 2013년 Facebook에서 개발한 Library

- 리액트는 오로지 View만 담당,

  그만큼 내장되어있는 기능이 부족해 third-party 라이브러리(ex. React-router, Redux)를 함께 사용

 

---

[React]

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

 

사용 이유(장점)

- UI를 자동으로 업데이트해 줌(자동으로 변화 감지)

   -> 가상 돔(Virtual Dom)을 통해 UI를 빠르게 업데이트

   (이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술

- 생태계가 큼, 커뮤니티 활발

 

---

[작업 환경 설정]

#CRA(Create-React-App)

리액트 앱 어플리케이션 시작할 때, 필요한 개발 초기 환경을 세팅 해주는 도구

리액트로 웹 애플리케이션을 만들기 위한 환경을 제공

하나의 명령어로 리액트 개발환경을 구축할 수 있음

 

*개발 환경 세팅 종류가 여러가지인데 CRA로 한 이유?
- 리액트 공식 홈페이지 참고 
- 리액트를 배우고 있거나, 새로운 싱글 페이지& 새 프로젝트를 빨리 진행하기 위해 CRA 설치함

#Node.js

자바스크립트(브라우저) 탈 웹

-> 자바스크립트가 브라우저 밖(ex. 서버)에서도 동작하게 하는 환경

-> Node.js를 설치하면 npm(node package manager)도 자동으로 설치된다.

 

#npm (node package manager)

nodejs 패키지 매니저

 

- node-modules: 패키지, 소스 담겨 있음

- package.json: 패키지들의 리스트, 정보 담겨 있음

 

- node-modules는 git에 올리지 않음 -> git에 올리기에는 너무 무거워서

 

[index.js] 

• import

• render(두가지 인자 받음)

[App.js]

• 앱 컴포넌트(구성요소)

• 실제로 구현될 것

• 불러올 파일 / 불러올 파일의 위치..

---

컴포넌트

: 재사용 가능한 UI 단위

 

사용

- 리액트에서 제공하는 컴포넌트라는 클래스 상속(extends Component)

#state : 이 컴포넌트 안에 들어있는데 데이터를 나타내는 object

#render : 사용자에게 어떻게 UI를 표기할건지 나타내는 함수 (JSX 사용)

 

-> state라는 오브젝트에 데이터가 변경이 되면, render 함수가 자동적으로 다시 호출되면서

업데이트 된 내용이 사용자에게 표기됨

(ex. 최상위 컴포넌트 안에 state가 변경되면, 그 안에 자식 요소의 render 함수까지 호출이 되어서,

사용자에게 업데이트 된 내용이 보여짐)

 

*클래스형 함수

render -> jsx(html) 반환
jsx =  자바스크립트 확장 문법(자바스크립트 문법 아님)

(-> 바벨 기능: 자바스크립트 문법으로 컴파일 해줘서 브라우저에서 읽을 수 있음)

*컴포넌트(함수형) 함수
훅스형 기술 나옴 -> 함수형 컴포넌트에서도 쓸수있게 됨
state 
 

현재 클래스형 -> 함수형으로 넘어가는 추세 (함수형이 더 가벼움)