환경 구축
- 리액트를 브라우저에서 다루려면 React와 ReactDOM 라이브러리를 불러와아 함
- React : 뷰를 만들기 위한 라이브러리
- ReactDOM : UI를 실제 브라우저에 렌더링할 때 사용
<!-- 브라우저에서 리액트를 사용하기 위한 최소한의 요구사항 코드 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Minimal </title>
</head>
<body>
<!-- target container -->
<div id="root"></div>
<!-- React, ReactDOM library(for developer) -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script>
// react and vanila javascript code here
</script>
</body>
</html>- 항상 페이지에서 리액트 관련 라이브러리를 읽은 다음에 js코드를 넣어야 함(위치 중요)
리액트 엘리먼트
- 브라우저의 DOM이 DOM 엘리먼트로 이루어진것 처럼 React DOM은 리액트 엘리먼트로 이루어져있음
- 리액트는 가상 DOM을 이용해 실제 DOM이 어떻게 변해야 하는지 알려주는 것이므로 결국 리액트 엘리먼트는 브라우저 DOM이 어떻게 생겨야하는지, 어떻게 만드는 지를 알려주는 명령임
// 리액트 엘리먼트를 생성
React.createElement("h1", { id: "hansot" }, "고기고기 도련님");- React.createElement([element type], [element property], [content between tag]);
- 3번째부터 4번째 이후의 인자들은 모두 자식으로 간주, children에 들어감
<!-- 실제 DOM으로 바뀐 리액트 엘리먼트의 모습-->
<h1 id="hansot">고기고기 도련님</h1>- 리액트 엘리먼트는 단지 리액트에게 DOM엘리먼트를 구성하는 방법을 알려주는 자바스크립트 리터럴에 불과함
// 리액트 엘리먼트의 실제 모습
{
$$typeof: Symbol(React.element),
"type": "h1",
"key": null,
"ref": null,
"props": {id: "hansot", children: "고기고기 도련님"},
"_owner": null,
"_store": {}
}ReactDOM
- 리액트 엘리먼트들을 렌더링 하기위한 도구들의 집합
const dish = React.createElement("h1", { id: "hansot" }, "고기고기 도련님");
ReactDOM.render(dish, document.getElementById('root'));- ReactDOM.render([react element to render], [target DOM node to render])
-
렌더링할 리액트 엘리먼트와 렌더링이 일어날 대상 DOM노드를 전달
-
리액트 16 이후 버전부터 엘리먼트 배열 렌더링 가능
const dish = React.createElement("h1", { id: "hansot" }, "고기고기 도련님"); const dessert = React.createElement("h2", { id: "queencoffee" }, "아아메"); ReactDOM.render([dish, dessert], document.getElementById('root'));
-
자식 렌더링
- 리액트는 props.children를 이용해 자식 엘리먼트를 렌더링함
- 위 예시에서는 텍스트 엘리먼트가 유일한 자식이어서 텍스트밖에 없었지만 다른 리액트 엘리먼트가 들어왔을 때에도 렌더링 가능 → 엘리먼트 트리 형성
데이터로 엘리먼트 만들기
- 리액트의 장점 중 하나는 UI 엘리먼트와 데이터를 분리할 수 있다는 점
- 리액트는 단순히 자바스크립트이기 때문에 리액트 컴포넌트 트리를 더 편하게 구성하기 위한 js 로직을 추가할 수 있음 (예시 : 배열에 자료를 저장, 배열을 리액트 엘리먼트로 map할 수 있음)
- 배열을 이터레이션해서 자식 엘리먼트의 리스트를 만들 때 반드시 key 프로퍼티를 넣어야 함 → 효율적 렌더링
리액트 컴포넌트
- 컴포넌트 : 리액트 엘리먼트를 반환하는 함수
감동 코딩