[React] Element 부터 state 까지

Rookie·2022년 3월 26일
0
post-thumbnail

1. Element

React 앱의 가장 작은 단위, 화면에 표시할 내용을 기술한다.

일반 객체이며(plain object) 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다.

2. Component Elements

개념적으로 컴포넌트는 JavaScript 함수와 유사하다.

  • “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.
  • 클래스형 컴포넌트와 함수형 컴포넌트로 구별되며, 클래스형 컴포넌트는 render()를 구현해야 한다.
  • 모든 React 컴포넌트는 자신의 props를 다룰 때 수정해서는 안된다.

3. render ()

클래스 컴포넌트에서 반드시 구현되어야하는 메소드. React element 또는 다른 객체를 반환해야한다.

4. DOM (Document Object Model)

객체로 문서 구조를 표현하는 방법. 트리 형태로 특정 노드의 탐색, 삭제, 수정, 삽입이 가능.

DOM 자체는 빠르지만 웹 브라우저 단에서 DOM에 변화가 일어나면 CSS를 다시 연산하고 레이아웃을 구성하고 페이지를 리페인트하면서 시간이 허비되게 된다.

5. JSX

자바스크립트의 확장 문법. 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

  • JSX 안에서는 자바스크립트 표현식을 사용할 수 있다.

6.ReactDOM.render

컴포넌트를 페이지에 렌더링하는 역할

지니고 있는 정보들을 사용하여 HTML 마크업을 만들고, 실제 페이지의 DOM 요소 안에 주입한다.
즉, 렌더링 → HTML 마크업 → DOM 주입의 과정이 수행된다.

7.props

properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소.
props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.

8. State

컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.

  • 클래스형 컴포넌트 : state
  • 함수형 컴포넌트 : useState라는 함수를 통해 사용

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;
profile
노력형 잡캐입니다

0개의 댓글