React

웹사이트를 만들기 위해선, 사실 프론트엔드 라이브러리의 도움 없이도 만들어 낼 수 있다. 

그리고 단순히 정적 페이지를 만드는거라면 자바스크립트 없이도, 그냥 HTML과 CSS를 사용해서 만들 수 있다.

그런데 요즘의 웹은 단순히 웹 페이지가 아니라, 웹 애플리케이션 이다. 브라우저 상으로도 정말 자연스러운 흐름으로 

매우 많은 것들을 할 수 있다. 하지만 어떠한 유저 인터페이스를 동적으로 나타내기 위해서는 정말 수많은 상태를 관리 해주어야 한다. 

 

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

 

우리가, 버튼을 눌러서 0 값을 바꿔주려면 각 DOM 엘리먼트에 대한 레퍼런스를 찾고, 해당 DOM에 접근하여 원하는 작업을 해야한다.

 

var number = 0;
var elementNumber = document.getElementById('nubmer');
var increaseButton = document.getElementById('increase');

increaseButton.onclick = function(){
	number++;
    elementNumber.innerText = number;
}

 

프로젝트 특성상 사용자와의 인터랙션이 별로 없다면, 프론트엔드 라이브러리는 필요하지 않다. 

하지만 규모가 커지고, 다양한 유저 인터페이스와 인터랙션을 제공하게 된다면, 많은 DOM 요소들을 직접 관리하고 코드 정리하는건 

비효율 적일 수 있다.

 

웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화 하고 , 오직 기능 개발, 그리고 사용자 인터페이스를 구현 하는것에 집중 할 수 있도록 하기위해서 라이브러리와 프레임워크들이 만들어졌다. 

 

=> Angular, Ember, Backbone, Vue, React 등이 있다. 

 

 

React란?

 

            - React는 facebook에서 제공해주는 프론트엔드 라이브러리 이다. 

            - 싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다.

 

 

React의 특징

 

              1. Data Flow

                      

                    React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다. 

                    복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 단방향 흐름을 가지도록 했다.

                     

             2. Component 기반 구조

 

                      Component는 독립적인 단위의 소프트웨어 모듈을 말한다. 

                      즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 볼 수 있다.

             

             3. Virtual DOM

 

                       DOM(Document Object Model)의 약자 이다. 

                       React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있다.

                       즉, 이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 

                       변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있다고 한다.

 

              4. Props and State

 

                        - Props

 

                             Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말한다.

                             자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만

                             props를 변경할 수 있다. 읽기 전용 데이터라고 생각하면 편한다.

 

                         - State

 

                              State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다.

                              State는 동적인 데이터를 다룰 때 사용하며, 

                              사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용한다.

                              클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적이다.