React - 1

💙리액트(React)

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
애플리케이션의 각 상태에 대한 뷰만 설계하면 된다.

💙특징

Virtual DOM

업데이트 해야하는 최소한의 부분만을 찾아서 업데이트가 가능하다.

컴포넌트 기반

###리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고, 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트 조합으로 구성될 수 있다.
개발할 때 항상 귑고 재사용 가능한 형태로 개발하는 것이 중요하다.

높은 상태 관리 복잡도가 단점

리액트에서는 상태관리를 위한 state라는 개념이 존재한다. 리액트 컴포넌트의 상태를 의미하며 따라서 state를 잘 관리하는것이 중요하다.

💙JSX(Javascript Syntax Extension)

Javascript와 XML/HTML을 합친 Javascript 확장 문법
const element = <h1>Hello, world! </h1>

JSX가 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정(번들링)을 한 것이다.
-> 최종적으로는 자바스크립트 코드가 출력

createElement()

JSX는 결국 React.createElement() 함수 호출로 변환한다.

React 엘리먼트 객체를 생성하는 함수로 JSX 코드를 자바스크립트 코드로 변환하는 역활이다.

React.createElement(
  type,         // 태그 이름 또는 컴포넌트
  props,        // 속성 (className, id, onClick 등)
  ...children   // 자식 요소 (문자열, 다른 React 요소 등)
)

// JSX 사용한 코드
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

// JSX 사용하지 않은 코드
const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
);

// 엘리먼트
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

jsx를 사용하면 가독성과 보안성이 올라간다.

root.render()

React 앱을 브라우저의 실제 DOM에 렌더링하는 함수이다.

첫번째 파라미터에는 페이지에 렌더링할 내용을 JSX형태로 작성하고, 두번째 파라미터에는 JSX를 렌더링 할 document 내부요소를 설정한다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const container = document.getElementById('root'); // HTML에서 렌더링할 위치
const root = ReactDOM.createRoot(container);       // React Root 생성
root.render(<App />);                              // React 엘리먼트를 렌더링

🤍회고

자바스크립트는 어느 정도 익숙하다고 생각했지만, 리액트는 처음 접하는 라이브러리였기 때문에 생소한 개념이 많았다. 특히 JSX 문법과 컴포넌트 구조, Virtual DOM의 개념이 낯설었고, 단순한 HTML/CSS 작성과는 전혀 다른 방식으로 UI를 구성한다는 점에서 막막함을 느꼈다. 예제 코드를 여러 번 실습해보니 render() 로 화면을 그리는거에 대한 개념이 잡히는 것 같았다.