React (리엑트React 알아보기! )

---

개요

 

이번에는 최근에 가장 많이 쓰인다고 들었었던 React에 대해서 알아보도록 하겠습니다.

 

---

React 란?..

 

React 등장 배경.

 

웹페이지를 구성할 때 Look & Fit을 유지하는 경우가 어렵습니다.

그럴 경우 HTML/CSS를 이용할 경우 생산성을 잘 못 따라가게 됐습니다. 엄청 많은 양을 처리하기에 힘들기 때문입니다.

Javascript(ES6)는 기존의(Javascript)와는 다르게 const와 let의 키워드가 새롭게 등장했습니다.

immutable 값이 변하지 않는 것 이것은 const가 나오기 전에는 등장할 수 없었습니다.

 

---

그러면 이제 React가 무엇인지 알아보겠습니다.

 

기본적으로는 JavaScript UI 라이브러리입니다.

 

function Hello() {
	return <h1> Hello </h1>
}

위에 같은 코드는 React이기 때문에 사용이 가능한 것입니다.

이것이 React의 첫 번째 컴포넌트입니다.

이것은 액션 태그 DOM을 만드는 것입니다.

 

---

 

JSX를 사용하는 이유

 

관심사가 분리되어 있기 때문에 코드가 깔끔해지기 때문입니다.

예) 디자인 , 서버 , 디비 각각 분할

function formatName(user) {
	return user.firstName + ' ' + user.lastName;
}

const user = {
	firstName: 'harper',
    lastName: 'Perez'

};

const Hell = {
	<h1> 
    	hello, {formatName(user)}!
    </h1>
};

 

---

Multi Page 디자인

 

웹페이지에서 중복되는 화면(부분)이 있을 경우 정보를 유지하는 것이 쉽지가 않습니다.

 

그런데 React를 사용하게 되면 Single Page App으로 구현이 더 쉽게 됩니다.  이벤트가 발생했을 때 화면을 바꾸는 것이 아니라 페이지 전체를 가져오는 형식으로 진행이 됩니다.

 

---

SPA가 어려운 이유

 

Data와 UI 동기화

DOM을 직접 다루기

HTML 템플릿 다루기

 

DOM 구조 트리

 

---

React의 등장

 

Data와 UI 동기화 -> UI 상태 관리

DOM을 직접 다루기 -> 가상DOM

HTML 템플릿 다루기 -> 컴포넌트 UI

 

---

결론

 

이상으로 간단하게 React의 개념과 사용하게 된 이유에 대해서 알아보았습니다.

 

다음에는 간단한 코드들과 함께 React에 대해서 알아보도록 하겠습니다!.

 

---