React start

What is React ?

비교적 짧은 러닝커브

• React 는 Framework 가 아닌 Library 로 기본적인 javascript 와 html 에 대해 이해하고 있다면 홈페이지에 잘 나와있는 튜토리얼을 통해 개발을 시작할 수 있습니다.

재사용성 , 유지보수에 용이한 구성요소 보유

• React 는 component 구조로 이루어져 재사용성 과 유지보수 에 있어서 뛰어납니다.

Virtual DOM 을 통한 rendering

• React 는 virtual DOM 을 통해 변화를 가상 DOM 에 먼저 적용하고 render 시켜 연산을 줄여줍니다.

---

This is React !

React = Library

Framework

Application 설계 , 개발 시 구조, 필수적인 코드, 알고리즘, 암호화, 데이터베이스 연동 등이 제공되는 인터페이스가 구성이 되어있는 뼈대입니다.

Library

특정 기능에 대한 API(도구 / 함수)를 모은 집합입니다.

 

 

---

Component

React 에서 Component 는 데이터(ex: Props , State)를 입력받아 DOM Node를 출력하는

함수의 역할을 합니다.

Component 는 UI를 구성하는 개별적인 뷰 단위입니다. Application 은 이런 Component 들이 모여

마치 블럭을 조립해 완성본을 만드는 것과 같습니다. 각 Component 들은 Application의 다른 부분, 또는

다른 Application에서 쉽게 재사용이 가능합니다.

( Application 의 구성요소를 작은 단위로 나누어서 관리를 하게되면 유지보수 , 재사용 모두 용이합니다. )

Conceptually, components are like JavaScript functions. 
They accept arbitrary inputs (called “props”) and return 
React elements describing what should appear on the screen. 

*React 공식 문서 “Components and Props“ 부분 중

JSX

const element = <h1>Hello, world!</h1>;

JSX ( Javascript XML )는 React 를 위해 태어난 새로운 자바스크립트의 문법의 확장입니다.

JSX 는 템플릿 언어처럼 보일 수 있지만, 자바스크립트를 기반으로 하고 있습니다.

React 는 작성한 코드를 컴파일하는 과정이 필요합니다. ( Babel을 사용 )

이런 과정을 거쳐 가면서도 우리가 JSX 를 사용하는 이유는 우리에게 친숙한 구문을 사용하여 구성요소의

렌더링 구조를 지정하는 방법을 제공합니다. 즉 우리에게 한눈에 이해하기 쉬운 개발 환경을 제공합니다.

 

Virtual DOM

React 컴포넌트는 render 를 다시 호출하여 새로운 결과값을 return 합니다. 그렇지만 return 값은 바로

DOM 에 반영되지 않습니다. 바로 브라우저에 render 되지 않습니다. 이 과정에서 React 는 return 값을

가지고 Virtual DOM 을 생성하고 이전 브라우저에 보여지고 있는 DOM 과 비교하여 변경된 부분을 확인하고

변경된 부분만 우리에게 보여지는 DOM 에 적용합니다.

 

https://velopert.com/3236

[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? | VELOPERT.LOG

https://webclub.tistory.com/458

프레임워크와 라이브러리의 차이점

참고한 refernece link 입니다.