이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다.
JSX 없이 리액트 기초를 잡아보자!
React의 엘리먼트나 컴포넌트 같은 기초 개념을 이해하는 것이 중요하다.
엘리먼트는 컴포넌트의 인스턴스이며, 컴포넌트 클래스라고도 한다.
엘리먼트를 어떻게, 왜 사용하는지 배워보자
var h1 = React.createElement('h1', null, 'Hello world!!!')
ReactDOM.render(
h1,
document.getElementById('content')
)ReactDOM.render()에는 하나의 React 엘리먼트만 인자로 전달할 수 있다.
이는 동일 DOM 계층에 h1 요소 두 개를 렌더링해야 하는 경우에 문제가 발생한다.
계층적 복잡한 구조를 만드는 방법은 엘리먼트를 중첩하는 것이다.
이때, createElement()에 전달하는 매개변수의 수는 제한이 없다.
두 번째 매개변수 이후의 모든 매개변수는 자식 엘리먼트가 된다.
<!DOCTYPE html>
<html>
<head>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/javascript">
let h1 = React.createElement('h1', null, 'Hello world!')
ReactDOM.render(
React.createElement('div', null, h1, h1),
document.getElementById('content')
)
</script>
</body>
</html>
순서
표준 HTML 요소 탐색 -> 일치한게 있으면 해당 React 엘리먼트 유형으로 사용
-> React 엘리먼트 렌더링 -> DOM에 <div>생성
createElement() 첫 번째 매개변수로 두 가지 자료형을 입력할 수 있다.
1. 문자열로 작성한 일반적인 HTML 태그
ex) 'h1', 'div', 'p' 처럼 화살괄호가 없는 문자열
2. 사용자 정의 컴포넌트 클래스
ex) 'HelloWorld' 대문자로 시작
사용자 컴포넌트 클래스 객체에 대해서 알아보자
- 기능을 느슨하게 결합된 부분으로 분리해서 코드를 재사용 할 수 있다.
- 컴포넌트라고 부르기도 한다.( 웹 컴포넌트 X )
- 속성을 사용하여 React 엘리먼트의 렌더링 결과를 바꾼다.
- 부모 컴포넌트는 자식 엘리먼트에 속성을 전달할 수도 있다.
- React 컴포넌트를 통해 컴포넌트 기반 아키텍처를 구현할 수 있다.
왜 바닐라 자바스크립트를 공부하라고 하는지 알거같다.
createElement 또한 자바스크립트에서 사용하는 것인데 공부를 안하니까 생소하다고 생각했다.;;
그리고 컴포넌트에 대해서 아직 솔직히 뭔소린지 잘 모르겠다.
출처
리액트 교과서 - 아자트 마르단 지음, 곽현철 옮김
'Programming > react' 카테고리의 다른 글
| [리액트 교과서] Babel 설치 (0) | 2022.01.29 |
|---|---|
| [리액트 교과서] React, JSX (0) | 2022.01.28 |
| [리액트 교과서] JSX 없이 React를 해보자 "Hello World!" (2) | 2022.01.26 |
| [리액트 교과서] SPA와 React (0) | 2022.01.25 |
| [리액트 교과서] react? (0) | 2022.01.24 |