React란?

프론트엔드 라이브러리 중 하나입니다. 컴포넌트 기반의 아키텍처로 개발 시스템을 작게 나누어 작업합니다. 그렇기 때문에 재사용이 쉽고, 확장에 용이합니다.

React에서의 중요 요소

1) React Virtual DOM(가상돔)

브라우저(Browser)는 사용자에게 화면의 요소들을 그리기 위해서 DOM(Document Object Model)이라는 개념을 사용합니다. DOM은 HTML 파일의 내용을 토대로 만들어지는데, JavaScript와 같은 스크립팅 언어로 수정할 수 있도록 만들어진, 웹 페이지의 객체 지향 표현입니다. DOM은 브라우저가 화면을 그리기 위해서 필요한 정보가 트리 형태로 저장된 데이터입니다. React에서 사용하는 가상 DOM도 실제 DOM 내용에 기반하여 만들어집니다. 가상 DOM의 존재 이유는 실제 DOM에 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업은 무겁기 때문입니다. 따라서, React는 실제 DOM의 변경 사항을 빠르게 파악하고 반영하기 위해 내부적으로 가상 DOM을 만들어서 관리합니다. 가상 DOM은 일종의 DOM의 메타데이터, DOM의 요약본이라고 볼 수 있습니다.

2) JSX

React에서 JSX는 자바스크립트 문법과 HTML 태그가 혼용된 문법입니다. 마크업과 로직을 분리하지 않고 UI 관련 작업을 할 수 있으며, React 컴파일 과정에서 에러를 감지할 수 있습니다.

React 기본 구조

1. Component(컴포넌트)

• Class Component(클래스형 컴포넌트)

import React, { Component } from "react";
 
class App extends Component {
  render() {
    return ();
  }
}

React 에서 Component를 import해서 불러온 뒤, 사용합니다. class 컴포넌트를 사용할 경우 render 메소드를 필수적으로 사용해야 하며, JSX를 return 해주어야 합니다. class Component는 state 기능, 라이프 사이클 (Life Cycle) 기능 사용 가능, 임의의 메소드를 정의할 수 있습니다.

• Function Component(함수 컴포넌트)
  

import React from "react";

const MyName = ({ name }) => {
  return <div>{name}</div>;
};
 
MyName.defaultProps = {
  name: "kimgosung",
};
 
export default MyName;

({ name }) 은 객체 형태의 파라미터로 비구조화 할당이라고 부릅니다. ES6에 추가된 문법이며 객체 내부에 있는 name 값을 props로 받아와서 사용하고 있습니다. 함수 컴포넌트가 초기 마운트 속도가 클래스형보다 빠르고, 코드의 가독성이 좋고 직관적이며 메모리 자원을 덜 사용한다는 장점이 있습니다.

2. Props

React에서 데이터를 다룰 때 사용합니다. 부모 컴포넌트가 자식 컴포넌트한테 값을 전달할 때 사용하며 읽기 전용입니다. 그러므로 컴포넌트 자체에서 props를 수정해서는 안 됩니다.

3. State

React에서 데이터를 다룰 때 사용합니다. 컴포넌트 내부에서 바뀔 수 있는 값이며, props 같은 경우는 값을 바꾸려면 부모 컴포넌트에서 직접 변경을 해야하지만, state는 자식 컴포넌트 내에서 값에 변화를 줄 수 있습니다. 변화가 일어날 때는 setState 함수를 사용해야 합니다. 함수 컴포넌트에서는 useState Hook(훅)을 사용해주면 됩니다.