React.JS 기본 공부

 

1. React란 무엇인가?

 

- Facebook 등에서 사용하는 (망할 일 없는)

  인기있는 프론트엔드 라이브러리 / 프레임워크 이다

 

 

 

2. 프론트엔드 라이브러리 / 프레임워크란?

 

- 단순히 정적 페이지를 만들려면 HTML과 CSS 만으로도 가능하다. (JavaScript나 프론트엔드 라이브러리 필요 x)

- 만약 JavaScript를 더해주면 동적 페이지로 구현 가능하다. (유저의 행동흐름에 따르는 ; 동적페이지)

- But, 요즘의 웹은 단순히 웹페이지가 아니라 웹 애플리케이션 이다.

 

=> 브라우저 상으로도 자연스러운 흐름으로 매우 많은 것들을 할 수 있다.

 

예를들어) 어떤 유저 인터페이스를 동적으로 나타내려면, 정말 수 많은 상태를 관리해줘야 한다.

 

HTML

  <div>
    <h1>Counter</h1>
    <h2 id="number">0</h2>
    <button id="increase">+</button>
  </div>

JavaScript

var number = 0;
var elNumber = document.getElementById('number');
var btnIncrease = document.getElementById('increase');

btnIncrease.onclick = function() {
  number++;
  elNumber.innerText = number;
}

 

- 우리가 버튼을 눌러서 숫자 0값을 바꿔주려면,

    - 각 DOM 엘리먼트에 대한 래퍼런스를 찾고

    - 해당 DOM에 접근하여 원하는 작업을 해줘야 한다.

- 만약 jQuery를 사용하면 코드가 조금 간결해질 수 있다.

    - ex) DOM을 가져오는 코드 : document.getElementById.. -> $('number')

 

 

- 규모가 적어서, 사용자와의 인터랙션이 별로 없다면, 사실상 프론트엔드 라이브러리는 필요 x

- But, 규모가 크고 다양한 유저 인터페이스와 인터랙션을 제공하게 된다면, 그 많은 DOM 요소들을 직접 관리하고 코드 정리 하는건 매우 힘들것이다.

 

=> 따라서, 웹 개발을 하게 될 때.

  - 귀찮은 DOM 관리와 상태값 업데이트를 최소화

  - 오직 기능 개발, 사용자 인터페이스 구현에 집중

하고자 여러 라이브러리 / 프레임워크가 탄생

( ex) React, Angular, Vue, Beckbone, Ember )

 

 

 

 

 

 

3. React의 특징

 

1) Virtual DOM ( 가상의 DOM )

- 양방향 바인딩을 통하여, 모델에 이쓴 값이 변하면 뷰에서도 이를 변화시켜준다.

- Mutation 하지말고, 대신에 데이터(모델)가 바뀌면 뷰를 날려버리고 새로 만든다.

- 하지만 DOM 기반으로 작동하는 이 페이지(브라우저)는 그때 그때 새로 뷰를 만들면 성능상 큰 문제가 생긴다.

=> 그래서 Virtual DOM 을 사용함

 

 

2) 실제 Virtual DOM 사용원리

- 실제 브라우저의 DOM에 수정하는게 X

- JavaScript로 이루어진 가상 DOM에 한번 렌더링 후

- 기존의 DOM과 비교 후 수정 할 부분만 업데이트 해줌

=> Virtual DOM은 DOM 변화를 최소화 시켜주는 역할을 한다.( = 성능적으로 매우 중요한 이슈 )

 

 

3) WebPack

- Build tool ( 웹 프론트앤드 빌드 툴 )

- 단순한 형태의 기능 제공 + 부가적인 편의성까지 갖추고 있음.

- 단순한 형태 : 소스를 묶고, 컴파일하고, 압축하는 기능

- 편의성 : 단위테스트, 자산(css, image) 관리, 패키지화, 성능향상 등

 

 

4) JSX

- 리액트를 사용하면, 웹 애플리케이션에서 사용하는 유저 인터페이스를

- 재사용 가능한 컴포넌트로 분리하여 작성함으로써

- 프로젝트의 유지보수성을 향상시킬 수 있다.

- 컴포넌트에 해당하는 코드는, App.js에서 확인 가능하다

=> 이 컴포넌트를 일반 JS가 아닌 JSX로 작성한다. ( Babel 도구 이용 )

 

 

 

 

 

지금까지 React를 시작하기 앞서 기본적인 공부를 정리해보았습니다.

더 자세하고 실습예제가 포함된 내용은 아래의 링크를 참고하시면 좋을 것 같습니다. 

 

 

 

 

참고 : https://velopert.com/reactjs-tutorials

[React.JS] 강좌 목록 | VELOPERT.LOG