1. React

User Interface를 만들기 위한 JavaScript Library

페이스북에서 나온 자바스크립트 라이브러리 중 하나로 2013년도에 세상에 나온 후에 지속적인 사랑을 받고있다! 페이스북, 에어비앤비, 우버, 넷플릭스, 인스타그램도 대체적인 웹 어플리케이션도 React로 만들어졌다!

즉, 사용자에게 보여지는 UI를 만들고 그 위에서 사용자가 클릭을 하거나 다양한 이벤트가 발생 하게되면 그 이벤트에 맞게 반응하도록 만들어진 라이브러리이다. 조금 복잡한 라이브러리 만들 때 MVC(model view controller) 패턴을 이용하고 있는데, 디자인 패턴 중 하나로 어플리케이션을 모델, 뷰, 컨트롤러 각각의 레이어로 나누어 코딩해 나갈 수 있는 것이다. 앵귤러와 뷰와 다르게 리액트는 오로지 View만 담당한다.

그렇다면 나는 왜 React를 배우는가 ?

웹의 1세대 HTML, CSS의 출현 2세대는 자바스크립트의 발전, 현재는 3세대로 웹에 데이터가 더욱 많아지고 복잡해지고 이용하는 유저도 많아졌다.

React는 대표적인 UI를 위한 라이브러리로 우리가 필요한 기능에 따라 라이브러리를 골라서 사용할 수 있다는 장점이 있다.

기존의 Frameworks와 Libraries의 차이점은?

이미 만들어 진 것 vs 골라서 만드는 것
내장 기능이 적다 vs 많다
개발자가 능동적 vs 주체적

프레임워크는 이미 집의 구조나 이런 철제들이 완성된 상태의 완성품이다.

라이브러리는 UI를 관리하는 라이브러리, 라우팅에 관련된 라이브러리들, 스테이트를 관리할 수 있는 라이브러리 등. 프레임워크와는 다르게 따로 정해진 골격이 없기 때문에 우리가 원하는 구조의 집을 만들 수 있고, 필요한 기능에 따라 라이브러리를 골라서 사용할 수 있다. UI를 담당하는 것 중에 대표적인 것이 React이다. 개발자가 주체적으로 third-part library를 이용해서 만든다. routing, sass 그래서 필요해서 쓰는 라이브러리이다.

앵귤러와 뷰?

프레임워크에서 대표적인 것은 앵귤러이다. 앵귤러는 UI뿐만 아니라 라우팅, 스테이트를 관리할 수 있는 방식, HTTP Clients 등 한번에 묶어져서 제공된다. 앵귤러를 이용해서 웹 어플리케이션 만들려져면 이런 제공하는 것들을 이용해서 만들어야한다. 모바일 앱 만들때도 프레임워크 정해진 골격위로 만들어야한다.

뷰는 엄밀히 말하면 프레임워크인데, 앵귤러만큼 제공하는 기능들이 많이 없다. 뷰는 스테이트 관리하는거, HTTP Clients가 포함되어 있지 않다. 그 중간 상태라고 볼 수 있다. 둘 중 어떤게 더 좋냐, 각각 장단점이 있는데 우리가 웹에서 만날 수 있는 두개만 비교하자면, 앵귤러는 배우는데 시간이 매우 많이 걸리지만 리액트는 단순하기에 배우는 시간이 상대적으로 짧다.

2. Settings

2-1. Node.js & npm

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

왜 Node.js가 필요한가?

리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들(ex.babel, webpack)이 Node.js 기반이기 때문에 반드시 설치해야 한다.

npx는 npm과 다르게 설치하는 것이 아니라 우리가 원하는 라이브러리를 실행할 수 있게 도와준다. npm은 실행하게 할 순 없지만, npx는 실행할 수 있도록 도와주는 틀.

라이브러리를 쉽게 관리할 수 있도록 도와준 것이, npm이다.
간단하게 명령어 하나로 라이브러리를 설치하거나 업데이트 ,삭제할 수 있다.

2-2. CRA(create-react-app) :

리액트를 개발하는 수많은 개발자들이 공통적으로 사용하는 유용한 틀들을 한번에 자동적으로 설치할 수 있게 도와주는 틀

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

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


설치 후 생성되는 환경들, 두 가지의 트라이앵글을 생각하자!

1) node-modules - package.json - .gitignore
2) index.html - index.js - App.js

node_modules :

우리 외부라이브러리들을 추가했을 때 여기 자동적으로 추가가 된다. 우리가 package.json에서 쓴 라이브러리들이 다 추가 되어있다. 우리가 나중에 라이브러리를 썼는데 뭔가 이상하거나 라이브러리의 구조를 알고 싶을 때 여기에 들어와서 확인할 수가 있다.

package.json :
npm에서 버전을 관리할 때, 즉, 프로젝트에서 외부적으로 쓰이고 있는 라이브러리와 그 라이브러리의 버전들이 명시되어져 있다. 우리가 직접적으로 수정할 일은 없다. 우리의 어플리케이션 이름, 버전, private인지 public인지, 우리 프로젝트가 쓰고 있는 외부라이브러리.

.gitignore :
git 에 tracking 하고 싶지 않을 때, 부수적으로 생기는 아이들을 .gitignore에 추가한다.

public : 우리가 사용자에게 배포할 때 외부적으로 보여지는 대표적인 예가 들어있다. favicon, index.html, 관련된 이미지 로고 이미지들.

manifest.json 웹 어플리케이션에서 필요한 건 아닌데 PWA, 즉 모바일에서 저장하는 웹 어플리케이션을 만들 때 필요한것(지금 우리에게는 필요하지않음)

robots.txt : 나중에 웹 크롤링을 위해서 이용된다.

src : 핵심. 소스코드는 source(src)안에 있는데, 우리가 보고 있는 리액트 처음 화면에 나오는 것

3. Components

재사용가능한 UI 구성단위

리액트는 컴포넌트들이다. 그럼 왜 컴포넌트가 필요할까?

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

컴포넌트를 만드는 방법

1. class : react에서 제공하는 컴포넌트라는 클래스를 extends, 상속해서 만들 수도 있고 function은 간단하게 함수로 만들 수 있다. 클래스형 컴포넌트에서는  render 함수가 꼭 있어야 하고, 그 안에 보여 주어야 할 JSX 를 반환해야 한다.

데이터가 있어야한다면 class, 데이터가 없고 정적으로 데이터가 표기가 된다면 function 컴포넌트를 이용해서 간단하게 만들 수 있다. 두 가지 방법으로 컴포넌트를 만들 수 있는데, 차이점은 관련된 함수들이 묶여져 있는 것을 클래스라고 한다.

그래서 클래스에는 컴포넌트에서 가지고 있는 상태, 데이터를 담을 수 있는 state라는 오브젝트가 들어있다. 그래서 스테이트가 변경이 되면 render 함수가 호출이 되면서 업데이트 된 내용이 사용자에게 보여진다. 뿐만 아니라 lifecycle methods라는 컴포넌트가 사용자에게 보여질 때 DOM Tree에 올라갔을 때 DOM Tree에서 나왔을 때, 그리고 컴포넌트가 업데이트 되었을 때 등등 이런 다양한 컴포넌트의 상태에 따라서 우리가 함수를 구현해 놓으면 리액트가 알아서 불러주는 이런 lifecycle methods가 있다.

2. 반대로 함수 function 에는 이런 state가 없고, lifecycle method도 없다. 함수는 한 가지의 행동을 수행하는 단위.
   
   

리액트도 자신만의 v-dom을 가지고 있다

각각의 독립적인 컴포넌트를 조립해서 만든 것을 리액트 어플리케이션이라 한다. 사용자가 우리의 웹 페이지를 보기 위해서는 우리가 작성한 웹페이지가 DOM Tree로 변한다고 배웠는데, 마찬가지로 리액트도 Tree로 이루어져있다.

레고처럼 조립하여 우리가 원하는 웹 어플리케이션을 만들 수도 있다. 그 컴포넌트에 해당하는 로직과 state(상태)가 들어있다. 재사용이 가능하고 독립적인 단위로 나누는 것이 중요하다.

Components -> state,render() -> virtual
                                     Re-render           VDOM

4. JSX

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

HTML 태그를 사용하는 동시에 자바스크립트도 JSX 안에서 동작하게 할 수 있다.

JSX 특징

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

리액트를 개발 할 때는, 바벨 그리고 테스팅에 관련된 것들, 타입스크립트 그리고 eslint, postCSS, 제스트, 웹펙 등이 많이 쓰이는 걸 볼 수 있다
React Project를 할 때 쓰는 유용한 중요한 툴들!

BABEL

JavaScript transcompiler
바벨은 ECMAScript2015+버전을 옛날 버전으로 변환해주는것

그래서 개발자들이 최신 버전의 정말 깔끔하고 쿨한 자바스크립트 문법을 사용하면서 배포할 때는 예전 브라우저도 이해할 수 있는 예전버전의 자바스크립트 코드로 변환해준다. 뿐만 아니라 TS나 리액트에서 작성하게 될 JSX 순수 자바스크립트가 아닌 아이들을 자바스크립트로 변환해주는 멋진 일을 하고 있다^^ 즉 바벨이라는 것은 브라우저나 예전 버전의 브라우저가 이해할 수 있도록 소스코드로 변환해주는 것. 그리고 어느수준의 버전까지 변환해줄 지도 세부적으로 변환해줄 수 있다.

Webpack

우리의 코드를 번들링해서, 우리가 작성하는 소스코드나 리소스 이미지들을 한번에 묶어서 번들단위로 사용자에게 제공할 수 있도록 도와준다. 사용자가 다른 페이지를 열어서 또 그 새로운 페이지에서 필요한 js나 이미지가 있다면 또 모아서 번들링해주는 것. 이거 말고도 우리가 자바스크립트를 작성하는 걸 소스코드를 좀 줄여주고 긴 변수나 함수의 이름을 다른 사람들, 해커들이 알 수 없게 하게 이름을 이상하게 만들어놓는 일도 하고 있다. 우리가 멋지게 만든 소스코드를 사용자에게 간편하게 전달할 수 있도록 모듈을 번들링한다.

ESLint

즉각적으로 우리의 코드에 잘못된 점이 있다면, 경고 사인을 보내준다. 코드를 잘못짜거나 문제가 있으면 미리 eslint가 잘못짰다고 미리 알려주는 유용함

Jest

리액트도 그렇고,js로 코드를 작성할 때 유닛 테스트를 할 수 있게 도와주는 테스팅 프레임워크. 테스트를 잘 할 수 있도록 도와준다.

PostCSS

CSS 전처리 중에 하나. less나 sass. 그들이 제공하는 프레임워크에 맞게 css 만들면 다시 브라우저가 이해할 수 있게 변환해주는데, PostCSS도less나 sass 비슷하다. sass는 정해진 것만 할 수 있는데 PostCSS는 굉장히 다양한 플러그인들이 있어서 우리가 원하는 것을 조금 더 추가해서 할 수 있다. 현업에서 많이 쓰이고, 인기도 점점 높아지고 있다.