React 앱의 가장 작은 단위, 화면에 표시할 내용을 기술한다.
일반 객체이며(plain object) 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다.
개념적으로 컴포넌트는 JavaScript 함수와 유사하다.
클래스 컴포넌트에서 반드시 구현되어야하는 메소드. React element 또는 다른 객체를 반환해야한다.
객체로 문서 구조를 표현하는 방법. 트리 형태로 특정 노드의 탐색, 삭제, 수정, 삽입이 가능.
DOM 자체는 빠르지만 웹 브라우저 단에서 DOM에 변화가 일어나면 CSS를 다시 연산하고 레이아웃을 구성하고 페이지를 리페인트하면서 시간이 허비되게 된다.
자바스크립트의 확장 문법. 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
컴포넌트를 페이지에 렌더링하는 역할
지니고 있는 정보들을 사용하여 HTML 마크업을 만들고, 실제 페이지의 DOM 요소 안에 주입한다.
즉, 렌더링 → HTML 마크업 → DOM 주입의 과정이 수행된다.
properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소.
props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.
컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.
constructor 메서드 또는 state 변수를 통해 직접 초기값을 선언할 수 있다.
값을 수정할 때에는 this.setState 또는 useState 함수를 꼭 사용해야 하며
두 번째 파라미터에 callback 함수를 추가로 지정할 수 있다.
import { useState } from 'react';
const Say = () => {
const [message, setMessage] = useState('');
const onClickEnter = () => setMessage('Hi!');
const onClickLeave = () => setMessage('good bye!');
return (
<div>
<button onClick={onClickEnter}>Enter</button>
<button onClick={onClickLeave}>Exit</button>
<h1>{message}</h1>
</div>
)
}
export default Say;