[React] 리액트 첫 시작

목차

1. React란?

2. 탄생 배경

3. React의 특징

4. 가상 돔(Virtual DOM), props, state, JSX

 

1. React란?

React는 프론트 엔드 라이브러리

잠깐 프렘임워크와 라이브러리의 차이를 간단하게 알아보자.
프레임워크는 전체적인 흐름을 스스로가 쥐고 있으며 사용자는 그 안에서 필요한 코드를 짜서 넣으며,
라이브러리는 사용자가 전체적인 흐름을 만들며 라이브러리를 가져다 쓰는 것이라고 할 수 있다. 
(프레임 워크 : 디렉터리 구성이 있음 / 라이브러리 : 디렉터리 구성 없음)

 

2. React 탄생배경

SPA(Single Page Application)
앱을 사용하는 것같은 사용감이 있는 웹페이지

 

SPA(Single Page Application)의 이전 세대에는 자바스크립트의 DOM 제어를 할 때 제이쿼리를 사용했었다.  제이쿼리의 편리성 때문에 막 쓰기 시작하면서 가독성이 떨어지고 최적화가 안되서 프로젝트가 무거워졌다.  초기 시절에는 인기가 많았었다. 그리고 SPA의 등장을 했는데 Google의 Gmail 에서 인기가 좋았다. Backbone, AngularJS를 사용한 SPA 환경을 구축했고 DOM을 다루는 방식은 제이쿼리였다. 이런 배경에 React가 탄생했고 많은 개발자들 사이에서 자연스럽게 생태계가 커지게 됬다. 제이쿼리의 DOM 제어를 사용할 필요가 없어졌고 React의 가상 DOM을 사용해서 제어가 가능해졌다. 웹페이지는 수정하면 처음부터 다시 랜더링을 해야하는데 React는 부분만 랜더링이 가능하다.

 

3. React의 특징

React는 다음과 같은 특징을 가지고 있다.

데이터의 흐름 / 컴포넌트의 구조 / 가상DOM (Virtual DOM) / props와 state / JSX

 

1) 데이터의 흐름

부모 -> 자식

Vue, Angular는 양방향 데이터의 바인딩을 가지고 있는 반면에 React는 단방향 데이터의 흐름이다. 단방향의 장점으로는 개발하고 있는 프로젝트가 커져도 데이터의 흘듬을 유추하기가 어렵지 않다.

 

2) 컴포넌트와 컴포넌트의 구조

컴포넌트는 하나의 객체 하나의 페이지의 구성 요소의 하나의 UI 단위, UI 여러개로 나누어 놓은 것.

 

3) 가상DOM (Virtual DOM)

DOM은 HTML과 CSS의 내용을 트리구조를 가지고 있고 브라우저는 DOM이 변경되면 화면을 다시 그린다. DOM이 변경되고 난뒤의 동작이 무겁고 비용이 많이 든다. 가상DOM을 이용하면 DOM이 변경이 되도 비용이 최소화 된다. 예를 들면 DOM이 1000번 리렌더링을 해야 하는 경우가 발생할 수 있다. 가상DOM을 이용하면 작업을 모아서 처리를 한번에 해준다.

 

4) props & state

props 

- 데이터 전달이 목적이다.

- 함수의 변수처럼 사용하는 느낌

- 부모 컴포넌트가 자식 컴포넌트에게 전달한 값

- props 전달할 때 "props 드릴링"을 피해서 잘 작성해야한다.

 

state

- 상태를 관리하기 위한 값

- 관리할 데이터를 유지시키는 것이 목적이다.

- 컴포넌트(UI를 나누어 놓은 단위 객체)의 내부에 값을 선언하고 페이지가 동작하는 동안 유지되고 변경될 데이터

- 리액트는 상태값을 주시하고 있다가 상태가 변경되면 반응한다.

 

5) JSX (Javascript XML)

JS 내에서 HTML과 유사한 코드를 작성할 수 있다.

const a = () => {
  return (
    <div>
      // react의 컴포넌트에서 그려주는 UI
    </div>
  )
}

- 코드를 실행할 때는 트랜스파일해서 변경된 파일을 실행해서 사용한다.

- JSX 파일은 => Javascript 로 변환된다.

 

React를 사용할 떄 사용할 새로운 문법
Html 파일과 구문의 가독성을 높이고 내용을 줄여서 사용할 수 있다.
Webpack : JSX 문법으로 작성한 파일을 js로 변환하고 번들링도 하기위한 속성을 관리한다.
!! 다음에는 Webpack과 Babel에 대해서 포스팅 할 예정이다.