오늘은 React 살펴보기편!입니다.
목차는 다음과 같습니다.
1. React란 무엇인가?
2. React의 장점
3. React의 단점
4. 일반적인 SPA 아키텍처
5. hello world 띄우기
1. React란 무엇인가?
- React란 무엇인지 정의해보겠습니다.
- React는 프레임워크가 아닌 UI 컴포넌트 라이브러리입니다.
- 여러 컴포넌트로 UI를 구성하는 방식은 React의 핵심 철학입니다.
- 컴포넌트 기반 아키텍처는 React 이전에도 존재했지만 순수한 자바스크립트 언어로 구현해냈다는데서 의미가 큽니다.
2. React의 장점
- 1. 단순한 앱 개발 : 선언형 스타일이며, 강력하고 개발자 친화적인 DOM 추상화를 제공합니다.
- 2. 빠른 UI : 뛰어난 성능을 제공합니다. 이는 가상 DOM 채택과 DOM의 변경 사항을 비교할 때 사용하는 훌륭한 알고리즘 덕분입니다.
- 3. 코드량 감소 : React 커뮤니티와 개발 생태계를 통해 수많은 라이브러리와 컴포넌트를 접할 수 있습니다.
- 4. 간결성 : 소프트웨어 엔지니어의 웹 개발 경험을 극적으로 개선
- 4.1. 선언형 스타일 채택 : 실행 결과가 어떻게 되어야 할지를 코드로 작성합니다.
- 명령형으로 작성하게 되면 코드의 복잡도가 높아져서 제대로 작동하지 않을 수 있습니다.
var arr = [1,2,3,4,5];,
arr2 = []
for(var i=0; i<arr.length; i++){
arr2[i] = arr[i]*2;
}
console.log('a', arr2);
- 하지만 map과 같은 선언형 프로그래밍으로 진행할 경우, 보다 간편하게 작성할 수 있습니다.
var arr = [1,2,3,4,5];
arr2 = arr.map(function(v,i){return v*2});
console.log('b', arr2);- React도 마찬가지로 UI를 구성할 때 선언형 스타일로 작성합니다. 개발자가 UI 요소를 선언형 스타일로 작성한 후 뷰에 변경이 발생하는 경우 React가 알아서 갱신합니다.
- React는 내부적으로 가상 DOM을 사용하여 브라우저에 이미 반영된 뷰와 새로운 뷰의 차이점을 찾아냅니다.
- jQuery의 경우는 개발자가 직접 뷰의 갱신 과정을 하나하나 작성해야 합니다. 이것은 UI가 간단할 때는 문제가 없지만 DOM 트리의 많은 부분을 다루게 되면 한계에 봉착합니다.
- 4.2. 컴포넌트 기반 아키텍처
- React는 코드재사용이 쉬워서 코드를 줄일 수 있다는 것이 큰 장점입니다.
- 5. 속도와 테스트 용이성
- 프레임워크에서 불필요한 갱신을 일으키는 경우가 있습니다. UI가 복잡할 때는 성능이 더 저하됩니다.
- 하지만 React의 가상 DOM은 자바스크립트 메모리에만 존재합니다. 데이터를 변경하면 React는 가상 DOM을 먼저 비교하고, 렌더링 변경이 필요한 경우에만 실제 DOM에 렌더링합니다.
3. React의 단점
- 모든 기능을 갖춘 프레임워크는 아닙니다. React나 Redux Router 같은 라이브러리를 함께 사용해야 합니다.
- 단방향 데이터 바인딩을 제공합니다. 단방향 데이터 바인딩은 복잡한 앱에서 복잡도를 줄이는 데 도움을 줍니다.
4. 일반적인 SPA 아키텍처
1. 브라우저에 URL을 입력합니다.
2. 브라우저가 URL 요청을 서버로 전송합니다.
3. 서버는 응답으로 HTML, CSS, 자바스크립트 파일 같은 정적 자원을 보냅니다.
4. 자바스크립트는 로드 후 추가로 ajax나 xhr 요청을 보내 서버에서 데이터를 불러옵니다.
5. 데이터는 json, xml 등의 포맷으로 전달받습니다.
6. 데이터를 전달받으면 html을 렌더링합니다.
5. hello world 띄우기
- 먼저 저는 react.js와 react-dom.js 파일을 cdn 방식을 이용해서 import 해줍니다.
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
- html 파일은 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/javascript">
const h1 = React.createElement('h1', null, 'Hello world!');
ReactDOM.render(
h1,
document.getElementById('content')
)
</script>
</body>
</html>
- 그리고 React와 ReactDOM 객체를 이용해서 접근이 가능합니다.
- React 엘리먼트를 생성하는 목적 = React, 실제로 돔에 추가하는 목적 = React-dom
- React 엘리먼트를 생성하려면 React.createElement(elementName, data, child)를 호출합니다.
React.createElement('h1', null, 'Hello world'); -- h1 요소를 React 엘리먼트로 생성하여 변수에 담습니다.
elementName : HTML 태그명을 'h1'처럼 문자열로 작성하거나 직접 만든 컴포넌트 클래스 객체를 넘겨줄 수 있습니다.
data : 속성이나 상위 컴포넌트에 받는 값
child : 자식 엘리먼트나 태그 내부에 작성하는 텍스트
- ReactDOM.render를 이용해서 실제 DOM에 렌더링합니다.
ReactDOM.render(
h1,
document.getElementById('content')
)
'React' 카테고리의 다른 글
| React - 컴포넌트(함수형 컴포넌트, 클래스형 컴포넌트, props, propTypes, state) (0) | 2021.08.15 |
|---|