React Component

주요개념

2-1. 조건문 또는 조건식을 사용한 조건부 렌더링

React에서는 조건문이나 조건식을 사용하여 UI를 동적으로 변경할 수 있습니다. 조건부 렌더링은 주로 if문 또는 ternary 연산자를 사용하여 구현합니다.

import React, { useState } from 'react';

const ConditionalRendering: React.FC = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {/* 조건문을 사용한 조건부 렌더링 */}
      {isLoggedIn ? <h1>Welcome, User!</h1> : <h1>Please log in</h1>}

      {/* 버튼 클릭 시 로그인 상태 변경 */}
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        Toggle Login State
      </button>
    </div>
  );
};

export default ConditionalRendering;

---

2-2. 인라인 함수 또는 함수 참조를 연결해 이벤트 응답

React에서는 이벤트 핸들러를 컴포넌트 내에서 직접 정의할 수 있습니다. 이벤트 핸들러를 인라인으로 작성하거나 함수 참조를 통해 응답할 수 있습니다.

import React from 'react';

const EventHandling: React.FC = () => {
  // 인라인 함수로 이벤트 처리
  const handleClickInline = () => {
    alert('Button clicked!');
  };

  // 함수 참조로 이벤트 처리
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <div>
      <button onClick={handleClickInline}>Click Me (Inline)</button>
      <button onClick={handleClick}>Click Me (Function Reference)</button>
    </div>
  );
};

export default EventHandling;

---

2-3. 프레젠테이셔널 컴포넌트: 입력 데이터 기반 화면 렌더링만 처리 (관심사의 분리)

프레젠테이셔널 컴포넌트는 데이터를 입력받고 이를 기반으로 UI를 렌더링하는 역할만 합니다. 상태나 로직 처리는 하지 않고, 순수하게 UI에만 집중하는 컴포넌트입니다. 이와 대조되는 것은 상태를 관리하고 로직을 처리하는 "컨테이너 컴포넌트"입니다.

import React from 'react';

// 프레젠테이셔널 컴포넌트: UI만 렌더링
const UserProfile: React.FC<{ name: string; age: number }> = ({ name, age }) => {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
};

const App: React.FC = () => {
  return <UserProfile name="Alice" age={25} />;
};

export default App;

---

2-4. JSX는 선택 사항이지만, 대부분의 React 프로젝트에서 사용

JSX는 React에서 HTML-like 구문을 사용해 UI를 정의하는 방법입니다. JSX는 선택 사항이지만, 대부분의 React 프로젝트에서 코드의 가독성을 높이고, 개발 속도를 빠르게 하기 위해 사용됩니다.

import React from 'react';

// JSX 문법을 사용한 컴포넌트
const Greeting: React.FC = () => {
  return <h1>Hello, World!</h1>;
};

export default Greeting;

---

2-5. JSX는 HTML이 아니라, XML과 유사한 문법을 제공하는 확장 (비표준)

JSX는 HTML이 아닌, XML과 유사한 문법을 사용합니다. JSX에서 HTML 태그는 JavaScript 코드로 변환되며, 컴포넌트의 UI 구조를 표현하는 방법입니다. JSX는 비표준 문법이므로 브라우저에서 바로 실행되지 않고, 트랜스파일링이 필요합니다.

import React from 'react';

// JSX 문법
const Greeting: React.FC = () => {
  return <h1>Hello, World!</h1>;
};

export default Greeting;

---

2-6. TypeScript는 JSX를 JavaScript 코드로 변환하는 컴파일 기능 제공

TypeScript는 JSX를 포함하는 파일을 .tsx 확장자로 작성하고, 이를 컴파일하여 JavaScript 코드로 변환합니다. TypeScript는 타입 검사를 제공하여 컴파일 시 오류를 확인할 수 있도록 도와줍니다.

import React from 'react';

// TypeScript와 JSX를 결합하여 작성
const Greeting: React.FC<{ name: string }> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;