리액트의 작동 원리

목차

• React element 생성
• ReactDOM 렌더링
• React 컴포넌트
  1) 함수형 컴포넌트
  2) 클래스 컴포넌트

---

페이지 설정

리액트를 브라우저에서 다루려면 React와 ReactDOM 라이브러리를 불러와야 한다.

• React : 사용자 인터페이스 뷰를 만들기 위한 라이브러리
• ReactDOM : UI를 브라우저에 렌더링할 때 사용하는 라이브러리

 

아래 설정은 브라우저에서 리액트를 사용하기 위한 최소한의 요구 사항이다.

 

React element와 ReactDOM

React element

HTML 문서를 이루는 엘리먼트는 브라우저가 HTML 문서를 읽어들이면 DOM 엘리먼트가 되고, 이 DOM이 사용자 인터페이스를 화면에 출력한다.

React.createElement(type, [props], [...children] )

- 인자로 주어지는 타입에 따라 새로운 리액트 엘리먼트를 생성하여 반환

 

ReactDOM

리액트 엘리먼트와 그 모든 자식 엘리먼트를 함께 렌더링하기 위해 ReactDOM.render를 사용한다.

ReactDOM.render( element, container[, ...callback] )

- 인자로 주어지는 렌더링 할 리액트 엘리먼트를 제공된 컨테이너의 DOM (렌더링이 일어날 대상 DOM)에 렌더링
- 구성요소에 대한 참조를 반환

 

(예제 1) React element와 ReactDOM 렌더링 과정

// Target Container
<div id="react-container"></div>

const dish = React.createElement(
	"h1", {id: "recipe-0"}, "구운 연어"
	// type, property, 자식노드(텍스트)
)

ReactDOM.render(
	dish,
	document.getElementById('react-container') //div 렌더링
)

console.log('dish', dish)

1. element 생성
- type : h1
- property : id="recipe-0"
- 자식노드 : 텍스트("구운 연어")

 

2. ReactDOM 렌더링

- element(dish:h1)

- 대상 : 'react-container'

 

 

 

 

(예제 2) 

■ 2-1 코드

<div id="react-container"></div>

const dish = React.createElement(
	"section", {id: "baked-salmon"}, 
	React.createElement("h1", null, "구운 연어"),
	React.createElement(
		"ul", {"className":"ingredients"},
			React.createElement("li", null, "연어 500그램"),
			React.createElement("li", null, "잣 1컵"),
			React.createElement("li", null, "...")
		),
	React.createElement(
		"section", {"className":"instructions"},
			React.createElement("h2", null, "조리절차"),
			React.createElement("p", null, "오븐을.."),
			React.createElement("p", null, "유리를..")
	)
)

ReactDOM.render(dish, document.getElementById('react-container'))
console.log('dish element', dish)

element를 생성하더라도, ReactDOM에 렌더링하지 않으면 화면에 보이지 않는다. 

 

※ 리액트에서 className 사용하기
class가 자바스크립트에서 예약어라서 HTML 엘리먼트의 class를 정의하려면,
HTML class 속성이 있는 엘리먼트는 class 대신 className을 사용해야한다.

 

▶ 반복 작업 단순화를 위해 array.map( ) 활용

반복되는 부분들을 배열로 만들고 배열에 map( )함수를 사용하였다.

 

 

■ 2-2 코드

const items = [
	"연어 500그램",
	"잣 1 컵",
	"버터 상추 2 컵",
	"옐로 스쿼시(Yellow Squash, 호박의 한 종류) 1개",
	"올리브 오일 1/2 컵",
	"마늘 3 쪽"
]

const ingredients = React.createElement(
	"ul", {className : "ingredients"},
	
	items.map( (ingredient) =>
		React.createElement("li", null, ingredient)
	)
)

ReactDOM.render(ingredients, document.getElementById('react-container'))
console.log('ingredients', ingredients)

 

▶ 에러 발생

2-1 코드에서는 하위속성을 매개변수로 나열해주어 문제가 발생하지 않았지만, 

map( )은 배열을 반환하기 때문에 key값이 없다는 문제가 발생한다.

 

 

■ 2-3 코드

const ingredients = React.createElement("ul", {className: "ingredients"},
	items.map( (ingredient, i) => React.createElement("li, null, ingredient)))

 

▶ 각 li 엘리먼트에 고유한 key를 부여해서 경고를 없앨 수 있다.

배열을 이터레이션해서 자식 엘리먼트의 리스트를 만드는 경우 리액트에서는 각 자식 엘리먼트에 key 프로퍼티를 넣는 것을 권장한다. 리액트는 key를 사용해 DOM을 더 효육적으로 갱신할 수있다.

 

 

■ 2-4 코드

const ingredients = React.createElement("ul", {className: "ingredients"},
	items.map( (ingredient, i) => React.createElement("li, {key:i}, ingredient)))

 

 

리액트 엘리먼트와 컴포넌트

리액트 엘리먼트

• 리액트로 만들어진 앱을 구성하는 최소한의 단위
• 화면에 표시할 내용을 기술하는 일반 객체 (plain object)

→ 3개의 매개변수(타입, 속성, 자식노드)로 리액트 엘리먼트를 반환한다.

 

 

리액트 컴포넌트 (React Component)

•  UI를 재사용 가능한 개별적인 여러 조각으로 구성
• 데이터를 입력 받고, view의 상태에 따라 DOM 노드를 출력하는 함수 또는 클래스
  → 리액트 엘리먼트 여러 개를 하나의 트리구조로 묶어, 재사용할 수 있도록 만들어놓은 함수/클래스
• 함수와 클래스의 기능적 차이는 없다. (함수를 훨씬 많이 사용하기 때문에, 클래스는 참고삼아 알고있으면 된다.)

 

 

리액트 컴포넌트 (함수)

■ 나열하기

 

 

■ map( ) 사용 - 매개변수 없음

const secIngredients = [...];

function IngredientsList() {
	return React.createElement(
	"ul",
	{ className: "ingredients"},
	secIngredients.map( (ingrd, i) => 
		React.createElement("li", {key: i}, ingrd))
	);
}

ReactDOM.render(
	React.createElement(IngredientsList, null, null),
	document.getElementById("root")
);

 

▶ 매개변수 없고, 데이터를 전역 scope에 있는 데이터(secIngredients)를 참조한다.

 

 

 

■ map( ) 사용 - 매개변수 O

const secIngredients = [...];

function IngredientsList(props) {
	return React.createElement(
	"ul",
	{ className: "ingredients"},
	props.items.map( (ingrd, i) => 
		React.createElement("li", {key: i}, ingrd))
	);
}

ReactDOM.render(
	React.createElement(IngredientsList, {items: secIngredients}, null),
	document.getElementById("root")
);

▶ 매개변수 있고, 매개변수로 데이터를 전달 받는다.

 

 

 

■ props에서 items를 구조분해 ★

▶ 객체의 구조분해 할당을 통해, props 대신 {items}로 Items를 변수로 활용한다.

▶ 위와 동일한 코드

: 화살표 함수 → { }, return 생략

 

 

리액트 컴포넌트 (클래스)

 

■ 나열하기 (매개변수 X)

 

 

■ map() - 매개변수 O

 

 

■ 콜백함수를 클래스의 메소드로 구현