티스토리 뷰
React 소개
리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리로, 2013년에 페이스북에서 만들었습니다. 리액트를 사용하면 자바스크립트 안에서 HTML처럼 보이는 코드를 작성할 수 있습니다. 그리고 이러한 코드를 렌더링하여 웹문서 인터페이스를 만들게 됩니다. 리액트는 점진적으로 적용할 수 있도록 설계되어 있어 학습이 용이합니다. 다만 다른 낯선 기술을 배울 때와 마찬가지로 러닝 커브(learning curve)가 존재하므로, 초기 진입장벽을 잘 넘기는 것이 중요합니다.
React 동작 원리
HTML은 브라우저가 문서 객체 모델(DOM)을 구성하기 위해 따라야 하는 절차라고 말할 수 있습니다. HTML 문서를 이루는 엘리먼트는 브라우저가 HTML 문서를 읽어 들이면 DOM 엘리먼트가 되고, 이 DOM이 화면에 사용자 인터페이스를 표시합니다.
리액트는 이러한 DOM 엘리먼트를 직접 조작하지 않습니다. 대신 가상 DOM을 다루며 리액트가 가상 DOM을 생성하고 브라우저가 이를 렌더링하도록 하는 방식을 따릅니다. 이러한 가상 DOM을 리액트 엘리먼트라고 합니다. 리액트 엘리먼트는개념상 HTML 엘리먼트와 비슷하지만 실제로는 자바스크립트 객체입니다. 따라서 HTML의 DOM API를 직접 다루는 것보다 자바스크립트 객체인 리액트 엘리먼트를 직접 다루는 편이 훨씬 빠릅니다.
React 예제 with CDN
먼저 프로젝트 폴더의 구조는 다음과 같습니다.
다음은 리액트 어플리케이션을 개발할 때 사용할 수 있는 리액트 라이브러리에 대한 CDN입니다. 웹문서에 이를 추가하는 것으로 시작합니다.
|
1
2
3
4
|
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js">
</script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">
</script>
|
그리고 다음과 같이 index.html 파일을 작성해줍니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script crossorigin
src="https://unpkg.com/react@16/umd/react.development.js">
</script>
<script crossorigin
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">
</script>
<title>React Simple Example</title>
</head>
<body>
<!-- 타겟 컨테이너 -->
<div id="react-container"></div>
<script src="sample.js"></script>
</body>
</html>
|
HTML 문서의 내용은 타켓 컨테이너가 전부입니다(16번줄). 그리고 그 아래에서는 sample.js를 import하고 있습니다. 뒤이어 작성할 sample.js에서 가상 DOM을 만들어 렌더링하면, 렌더링된 내용이 타겟 컨테이너를 통해 표시될 것입니다.
sample.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
var foods = ["치킨", "피자", "햄버거", "짜장면", "김밥"]
/*
React.createElement
첫번째 인자 : 요소의 타입
두번째 인자 : 요소의 속성
세번째 인자 : 여는 태드와 닫는 태그 사이에 들어가야 할 자식(노드)
*/
const foodList = React.createElement(
"ul",
{
className: "foods"
},
foods.map((food, i) =>
React.createElement("li", { key: i }, food)
)
)
ReactDOM.render(
foodList,
document.getElementById('react-container')
)
|
9번 줄부터 시작되는 foodList 객체는 React.createElement라는 이름의 리액트 메소드를 통해 생성된 가상 DOM 입니다. createElement 메소드는 어떤 요소를 만들지, 어떤 속성을 지닐지, 어떤 내용을 가질지에 대한 데이터를 인자로 전달받아 가상 DOM을 생성하는 역할을 합니다. 그렇게 생성된 객체를 19번줄의 render 메소드를 통해 렌더링해줍니다. 이때 렌더링된 요소가 어떤 부모 노드에 표시될지를 인자로 전달해주고 있습니다(21번 줄). 그 결과 index.html의 <div id="react-container"></div> 요소 안에 foodList 객체가 렌더링되어 표시되게 됩니다.
위 코드의 결과 화면(웹문서)을 보이면서 예제를 마무리하도록 하겠습니다.
(배경색은 원래 흰색인데 내용을 강조하고자 색을 입혔습니다)
'IT > React' 카테고리의 다른 글
| create-react-app 컴포넌트 만들기 with JSX (0) | 2020.09.11 |
|---|---|
| create-react-app 코드 수정하기 (0) | 2020.09.09 |
| create-react-app 시작하기 (0) | 2020.09.09 |
| React 컴포넌트 만들기 | 함수형 컴포넌트 (0) | 2020.09.07 |
| React 컴포넌트 만들기 | React.Component (0) | 2020.09.07 |