React 기본 (1)

강의 출처

 

SPA (Single Page Application) : 여러 페이지가 있는것 처럼 보이지만 사실 하나의 페이지로 구성되어 Ajax 와 같은 것을 통해 동작하는 웹 어플리케이션. 백엔드는 API 만 제공한다. SPA는 히스토리 관리가 필요하다. 히스토리 관리를 하지 않으면 사용자가 뒤로가기 키를 눌렀을 때 의도와는 다르게 다른 페이지로 이동하게 된다.

 

 

 

SPA Framework

• Angular : 구글에서 개발. MVC 등 개념적으로 백엔드와 겹치는 부분이 있어서 백엔드 개발자들이 선호
• React : 페이스북에서 개발. 함수형 프로그래밍. 최근에
• Vue.js

React 는 프레임워크는 아니다.

React 는 라이브러리다.

Angular 는 프레임워크가 맞다.

프레임워크라 하면 역할이 정해져있고 이를 할당하는 형식여야한다.

 

 

 

React 가 나온 배경

• DOM 조작이 귀찮고 JQuery 도 영 별로다.
• DOM 조작은 느리다.
• Component 단위의 개발을 하고 싶지만 기존의 방식으로는 힘들다.
• Framework 를 쓰기에는 좀 무겁다. State, Model 만 처리하는 관리 툴만 있으면 된다.

Component 

HTML + CSS + Javascript 으로 만들어진 차트, 달력 과 같은 하나의 위젯 

한번 만들어진 컴포넌트는 재사용이 가능하므로 효율적이다. 

but. 컴포넌트 간의 통신은 어떻게할 것 인가? 라는 문제가 남는다.

 

 

 

React 의 철학

• View 에 집중하자
• View 렌더링의 동작, 성능에는 신경쓰지 않아도 되도록하자
• Component 중심의 개발을 하자. 개발자를 Template 과 DOM 조작에서 멀어지게하자.
• Virtual DOM 으로 조작한다.

 

 

 

React 를 사용했을 시 DOM 에서 일어나는 개략적인 플로우 

1. Model 에서 데이터 변경이 일어났다.
2. Virtual DOM 을 In memory 에서 그린다.
3. Real DOM 과 비교한다.
4. 비교해서 달라진 부분만 DOM 트리에 추가하여 적용한다.

 

 

 

사전 지식

1. React 에서 React component 의 기본 구조를 표현할 때 ES6 을 사용한다.
2. React 에서 html template 을 표현할 때 JSX 를 사용한다.
3. 이러한 extension 문법(ES6, JSX 등...)을 지원하기 위해 webpack 이라는 transfiling 도구가 필요하다.

 

 

 

 

ES6 는 무엇인가?

 

• 자바 스크립트의 발전된 최신 문법중 하나
• const, let 으로 변수를 선언한다.
• spread operator 로 새로운 배열, 객체를 생성한다. (object.assign concat)
• 간단한 object
• destracturing 으로 필요한 인지만 가져올 수 있다.
• template literal
• tagged template literals
• arrow function
• 함수형 프로그래밍 (map, curry, partial application)
• classes
• import export 로 모듈을 관리한다.

 

 

 

JSX 는 무엇인가?

• JSX 는 HTML 코딩이라고 봐도 무방하다.
• Javascript 에서 HTML 코드를 바로 작성할 수 있게 도와주는 문법중 하나이다.
• Render 함수 안에 작성된다.
• 실제 DOM 생성을 위해 필요하다.
• JSX 로 표기하면 DOM API를 직접 사용하지 않고 DOM 을 변경할 수 있다.

 

 

 

Webpack 은 무엇인가?

1. Transfiling 전용 도구
2. Source merge
3. lint 를 통해 소스코드의 품질을 향상시켜준다.

 

 

 

Transfiling 이란 무엇인가?

• ES6 -> ES5
• JSX -> HTML
• less -> CSS
• import -> dynamic loader
• Typescript -> Javascript

 

 

 

간단한 예시

실습 사이트 : https://codepen.io

React 라이브러리 1 : https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/cjs/react.development.js
React 라이브러리 2 : https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.development.js

사전 작업 : Babel 을 preprocessor 로 설정한다.

ES6 : class를 사용할 수 있다.

JSX : <h2>My Blog posts</h2> 와 같이 문자열 표시를 안했는데 문법 에러가 나지않는다.

<MyBlog/> 의 의미 : 문자열을 전달하는 것이 아니다. 클래스 MyBlog 를 호출 한 것

"#wrap" 의 의미 : Redering 을 할 기준 노드. 이 아래에 랜더링이 된다.

 

 

 

코드

<div id="wrap"></div>

class MyBlog extends React.Component {
  constructor() {
    super();
  }
  
  render() {
    return (
      <h2>My Blog posts </h2>
    )
  }
}

ReactDOM.render(<MyBlog/>, document.querySelector("#wrap"));