- 본 글은 "소플의 처음 만난 리액트"를 읽고, 개인적으로 복습하는 차원에서 작성한 글입니다.
- 저작권 문제가 있을 시, 비공개 전환 또는 삭제하겠습니다.
1. JSX
자바스크립트의 확장 문법으로, Javascript와 XML/HTML을 합친 것.
JSX 코드를 자바스크립트 코드로 변환하는 역할을 하는 것이 바로 createElement()라는 함수!
class Hello extends React.Component {
render() {
return <div>Hello {this.props.toWhat}</div>;
}
}
ReactDOM.render(
<Hello toWhat="World" />
document.getElementById('root')
);라는 코드가 있을 때
ReactDOM.render() 라는 함수는 실제 화면에 렌더링해주는 함수이다.
index.html 파일에 보면 Id가 root인 태그가 있을텐데, 그 안에 렌더링해준다는 뜻!
이 코드를 바닐라 자바스크립트(순수한 JS) 코드로 바꾸면,
Class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
}
}
ReactDOM.render(
React.createElement(Hello, { toWhat: 'World' }, null),
document.getElementById('root')
);
이렇게 React.createElement() 함수로 대체된 것을 알 수 있다.
-> 결국 JSX 문법을 사용하면, 리액트 내부에서는 모두 createElement라는 함수를 사용하도록 변환되는 것.
React.createElement(
type,
[props],
[...children]
)type에는 엘리먼트의 유형! -> HTML 태그나 다른 리액트 컴포넌트
props에는 속성!
children이란 현재 엘리먼트가 표함하고 있는 자식 엘리먼트!
2. React Element
리액트 엘리먼트는 리액트 앱의 가장 작은 빌딩 블록들!
Virtual DOM을 구성하는 것이 리액트 엘리먼트이고, 이는 화면에 직접적으로 보이는 것을 기술한다.
이 엘리먼트들이 렌더링을 거치면, Browser DOM을 구성하는 DOM Elements가 되는 것이다. -> Browser DOM은 크고 무겁기 때문에 이런 과정을 거친다.
리액트 엘리먼트들은 리액트 컴포넌트들이 createElement()를 거치면 만들어진다.
리액트 엘리먼트 생성 이후에는 children이나 attributes를 바꿀 수 없다!
-> 그래서 변경된 엘리먼트를 보여주기 위해서 새로운 엘리먼트를 만들어 바꿔치기한다.
새로운 엘리먼트들이 만들어지면, Virtual DOM은 변경된 부분만 계산해 해당부분만 다시 렌더링한다. 그 이후에 기존 엘리먼트가 연결되어 있는 부분에 바꿔 달면 된다.
-> 리액트가 렌더링 속도가 빠른 이유!
3. Props
리액트 컴포넌트는 JS의 함수와 비슷하다.
Props를 받아, 그에 맞는 리액트 엘리먼트를 생성해서 리턴해준다.
Props는 리액트 컴포넌트의 속성이다.
모든 리액트 컴포넌트는 그들의 Props에 관해서는 Pure 함수 같은 역할을 해야한다고 하는데, 이 말은 모든 리액트 컴포넌트는 props를 직접 바꿀 수는 없고, 같은 props에 대해서는 항상 같은 결과를 보여줘야 한다는 것이다.
컴포넌트에는 클래스형, 함수형 두 가지 종류가 있다.
class Welcome extends React.Component {
render() {
return <h1>안녕, {this.props.name}</h1>;
}
}
const element = <Welcome name="명훈" />;
ReactDOM.render(
element,
document.getElementById('root')
);이런 식으로 모든 클래스형 컴포넌트는 React.Component를 상속받아서 만든다!
이를 상속받았기 때문에 리액트 컴포넌트가 되는 것이다.
4. State
state는 리액트 컴포넌트의 변경가능한 데이터를 말한다.
하지만, State를 직접 수정해서는 안된다.
-> setState 함수를 통해서 수정해야 하며, useState 라는 훅을 사용해서 정의한다.
React Developer Tools (리액트 개발자 도구) 사용법
components -> 화면에 존재하는 컴포넌트가 트리 형태로 보임, 각 컴포넌트 별로 props, state 확인 가능
profiler -> 컴포넌트들이 렌더링되는 과정을 기록하여 각 단계별로 살펴볼 수 있음.
5. useState
클래스형 컴포넌트에서는 constructor(생성자)에서 이 state를 정의하고, setState() 함수를 통해 state를 업데이트한다.
But,
함수형 컴포넌트는 별도로 state를 정의해서 사용하거나 컴포넌트의 생명주기에 맞춰 어떤 코드가 실행되도록 할 수 없다.
-> 이 문제를 해결하기 위해 나온 것이 바로 훅!!
import React, { useState } from "react";
function Counter(props) {
const [count, setCount] = useState(0);
return (
<div>
<p>총 {count}번 클릭했습니다.</p>
<button onClick={() => setCount(count + 1)}>
클릭
</button>
</div>
);
}const [ 변수명, set함수명 ] = useState(초깃값);
-> 변수명에는 실제로 값을 저장할 수 있는 변수가 들어가고, set함수는 값을 바꿔주는 함수이다. useState의 괄호 안에는 초기값이 들어간다.
