오늘부터 리액트에 대해 정리해보겠다. 졸작 때 아무것도 모르는채로 jsx 파일 이것저것 갖다 붙여 쓴 기억이.. (PTSD)

약 한달동안 리액트 마스터해보자!!!

또한 이 정리는 리액트를 다루는 기술 책과 유레카 강사님 강의를 매우 많이 거의 다 참고합니다.

리액트란?

리액트(React)는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리로 META(구 페이스북)에서 사용자 편의성 측면에서 개발하였다.

뷰(View)에 집중하는 라이브러리

• 사용자 인터페이스(UI) 구축에 집중하는 JavaScript 라이브러리임.
• MVC (Model-View-Controller) 패턴에서 View 영역 담당.
• 사용자에게 보여지는 부분의 생성 및 관리에 특화됨.
• 데이터 관리, 라우팅 등은 다른 라이브러리(예: Redux, React Router)와 함께 사용 필요.

-> 즉 밀키트 같이 다 퍼주는 프레임워크와는 다른 개념이다.

컴포넌트(Component)

• 리액트는 UI를 독립적이고 재사용 가능한 컴포넌트 단위로 분리하여 개발함.
• 각 컴포넌트는 자체 로직(JavaScript), UI(JSX), 상태(state) 관리 가능.
• 템플릿은 주로 정적 구조 정의 하는데에 반해 컴포넌트는 동적 데이터 처리 및 UI 업데이트 로직 포함.

가상 DOM(Virtual DOM) 사용

• 실제 DOM(Document Object Model) 직접 조작 대신, 메모리에 가상 DOM 사용.
• 상태(state) 변경 시, 새로운 가상 DOM 트리 생성 후 이전 가상 DOM 트리와 비교 (실제로 시간이 오래 걸릴 것 같지만 비교하고 필요한 부분만 렌더링 하는 것이 효율적임).
• 비교 후 변경된 부분만 식별하여 실제 DOM에는 최소한의 변경사항만 적용함.
• 이를 통해 불필요한 DOM 조작 감소 및 성능 향상.

-> 물론 데이터 처리량이 많을 때는 유용하지만 조금의 렌더링만 필요한 과정은 굳이 전체를 비교하지 않고 한번에 렌더링하는 것이 효율적일 수 있다.

Node.js 환경 필요

• React 애플리케이션 개발을 위한 Node.js 환경 필수.
• Node.js: JavaScript 런타임 환경으로, React 개발 도구(예: create-react-app, Babel, Webpack) 및 패키지 관리자(npm 또는 yarn) 제공.
• JSX 문법 변환, 코드 번들링, 개발 서버 실행 등 다양한 개발 작업을 Node.js 기반 도구가 처리함.

주의: 브라우저에서 실행되는 React 코드 자체는 Node.js 불필요하나, 개발 과정에서는 필수적임.

JSX란?

JavaScript XML의 약자로, JavaScript 내에서 HTML과 유사한 마크업을 작성할 수 있게 해주는 JavaScript의 구문 확장이다.

React에서 UI를 어떻게 구성할지 표현하기 위해 주로 사용된다.
(React 전용 문법은 아니지만, React에서 매우 흔하게 사용).

이는 시각적으로 UI 구조를 파악하기 쉽고, 개발자가 더 직관적으로 컴포넌트의 렌더링 결과를 작성할 수 있도록 도와준다.

JSX의 역할 및 변환 과정

브라우저는 JSX를 직접 이해하지 못함!!

그래서 개발자가 JSX로 코드를 작성하면, Babel과 같은 트랜스파일러(Transpiler)를 통해 일반적인 JavaScript 코드로 변환된다.

JSX 표현식은 React.createElement(component, props, ...children) 함수의 호출로 변환되어, 결과적으로 JavaScript 객체를 생성하고 React는 이 객체를 읽어 실제 DOM을 구성한다.

   const element = <h1 className="greeting">Hello, world!</h1>;

   // Babel 변환 후 아래 코드와 같이 됨
   const element = React.createElement(
     'h1',
     {className: 'greeting'},
     'Hello, world!'
   );

JSX 기본 문법 규칙

• 하나의 최상위 요소(Root Element):

  • JSX 표현식은 반드시 하나의 부모 요소로 감싸져야 함.

  • 여러 요소를 반환해야 할 경우, <div> 등으로 묶거나 불필요한 DOM 노드를 추가하지 않는 (Fragment)<>...</>를 사용해야 함.

    // 잘못된 예시 (두 개의 최상위 요소)
    // return (
    //   <h1>Hello</h1>
    //   <h2>World</h2>
    // );
    
    // 올바른 예시 (Fragment 사용)
    return (
      <>
        <h1>Hello</h1>
        <h2>World</h2>
      </>
    );

• JavaScript 표현식 포함:

  • JSX 내에서 JavaScript 변수, 함수 호출, 연산 등의 표현식을 사용하려면 중괄호 {}로 감싸야 함.

    const name = "React";
    const element = <h1>Hello, {name}!</h1>; // Hello, React!
    const result = <div>{1 + 1}</div>; // 2

• 어트리뷰트(Attributes) / 속성(Props):

  • HTML 어트리뷰트와 유사하게 작성하지만, JavaScript 예약어와 충돌하거나 DOM API 속성명을 따르는 경우가 있음.
  • class 대신 className 사용.
  • HTML 어트리뷰트 이름은 kebab-case 지만, JSX에서는 대부분 camelCase로 작성함.
  • 어트리뷰트에 문자열 값을 할당할 때는 따옴표 "" 사용.
  • 어트리뷰트에 JavaScript 표현식(변수 등)을 값으로 할당할 때는 중괄호 {} 사용.

    const url = 'image.jpg';
    const element = <img src={url} className="profile-pic" alt="Profile" />;

• 태그는 반드시 닫아야 함:

  • HTML과 달리, JSX에서는 자식 요소가 없는 태그(예: <br>, <img>, <input>)도 반드시 스스로 닫는 태그 (/>) 형태여야 함.

    // 올바른 예시
    <br />
    <img src="path/to/image.png" alt="description" />
    <input type="text" />
    
    // 잘못된 예시 (HTML에서는 가능하지만 JSX에서는 오류)
    // <br>
    // <img src="...">

• 주석:

  • JSX 내에서의 주석은 {/* ... */} 형식을 사용함.

    const element = (
      <div>
        {/* 이것은 주석입니다 */}
        <h1>Hello</h1>
      </div>
    );