React의 컴포넌트와 JSX

React의 컴포넌트와 JSX는 React 애플리케이션의 핵심 요소로, UI를 개발하는 데 효율적이고 직관적인 구조를 제공합니다. 컴포넌트는 UI의 독립적인 구성 요소를 정의하고, JSX는 JavaScript 코드에서 HTML과 유사한 구문을 사용할 수 있게 해줍니다. 이 두 가지 개념을 통해 코드를 재사용 가능하고 유지 관리하기 쉽게 만듭니다.

 

1. React 컴포넌트

 

컴포넌트는 React 애플리케이션의 UI를 정의하는 가장 작은 단위로, 화면의 특정 부분을 캡슐화하여 하나의 함수 또는 클래스 형태로 정의할 수 있습니다. 컴포넌트를 사용하면 UI를 여러 조각으로 분리할 수 있어 재사용성이 높아지고 유지 관리가 용이해집니다.

 

컴포넌트의 종류

 

React에서는 컴포넌트를 다음과 같이 두 가지 방식으로 정의할 수 있습니다.

• 함수형 컴포넌트 (Functional Component): 함수로 정의된 컴포넌트입니다. props를 받아 UI를 렌더링하는 데 사용됩니다.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

 

• 클래스형 컴포넌트 (Class Component): 클래스로 정의된 컴포넌트입니다. state나 생명주기 메서드와 함께 더 많은 기능을 제공할 수 있습니다.

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

 

최신 React에서는 상태 관리와 생명주기를 함수형 컴포넌트에서도 훅(Hooks)으로 처리할 수 있어, 함수형 컴포넌트가 많이 사용됩니다.

 

컴포넌트의 특징

 

• 재사용성: 컴포넌트는 한 번 정의하면 여러 곳에서 재사용할 수 있습니다. 이렇게 하면 코드 중복을 줄이고 유지 관리를 용이하게 합니다.

• 독립성: 각 컴포넌트는 자체적인 props와 state를 가지고 있어 다른 컴포넌트와 독립적으로 동작합니다.

• 구성 가능성: 컴포넌트를 조합하여 더 큰 컴포넌트를 만들 수 있습니다. 예를 들어, 여러 작은 컴포넌트를 모아 전체 페이지를 구성할 수 있습니다.

 

props와 state

 

• props: 컴포넌트 간 데이터를 전달하는 수단입니다. 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용됩니다. props는 읽기 전용으로, 컴포넌트 내부에서 수정할 수 없습니다.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

 

• state: 컴포넌트 내에서 변경 가능한 데이터를 관리하는 객체입니다. 주로 클래스 컴포넌트에서 사용되었으나, 함수형 컴포넌트에서도 useState 훅을 사용해 관리할 수 있습니다.

function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

 

2. JSX (JavaScript XML)

 

JSX는 JavaScript 확장 문법으로, JavaScript 코드 안에서 HTML과 유사한 문법을 사용할 수 있게 합니다. JSX를 사용하면 UI 구조를 직관적으로 정의할 수 있으며, HTML 태그와 JavaScript 변수를 혼합하여 작성할 수 있습니다.

 

JSX의 특징

 

• HTML과 유사한 문법: JSX는 HTML 태그와 유사한 문법을 제공하여 코드 가독성을 높여줍니다. 예를 들어, JSX에서는 <div>, <h1>, <button> 등의 태그를 사용하여 UI를 표현할 수 있습니다.

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

 

• JavaScript 표현식 사용 가능: JSX 내에서 JavaScript 표현식을 {} 중괄호 안에 넣어 사용할 수 있습니다.

const name = "Alice";
const element = <h1>Hello, {name}!</h1>;

 

• JSX 컴파일: 브라우저는 JSX를 직접 해석할 수 없으므로, Babel과 같은 도구가 JSX를 React.createElement() 호출로 변환해줍니다. 아래 코드는 JSX를 JavaScript로 변환한 결과입니다.

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

// 컴파일 결과
const element = React.createElement("h1", null, "Hello, world!");

 

JSX의 장점

 

• 가독성 향상: HTML과 유사한 문법을 사용하여 코드가 직관적이고 읽기 쉽게 작성됩니다.

• 에러 방지: 잘못된 태그나 속성 사용 시 컴파일 단계에서 오류가 발생해 문제를 사전에 발견할 수 있습니다.

• JavaScript와의 통합: JavaScript 표현식을 JSX 내부에서 사용해 동적인 UI를 쉽게 구성할 수 있습니다.

 

JSX에서의 조건부 렌더링

 

JSX에서 조건부 렌더링을 구현할 때는 JavaScript의 조건문을 사용할 수 있습니다.

• 삼항 연산자 사용:

const isLoggedIn = true;
const element = <h1>{isLoggedIn ? "Welcome back!" : "Please sign in."}</h1>;

 

• && 연산자 사용:

const notifications = 0;
const element = (
  <div>
    <h1>Inbox</h1>
    {notifications > 0 && <p>You have new messages.</p>}
  </div>
);

 

JSX에서의 스타일 적용

 

JSX에서는 style 속성을 객체 형태로 전달하여 인라인 스타일을 적용할 수 있습니다.

const divStyle = {
  color: "blue",
  fontSize: "20px"
};

const element = <div style={divStyle}>Styled Text</div>;

 

JSX에서 클래스 이름 설정

 

HTML에서는 class 속성을 사용하지만, JSX에서는 JavaScript 예약어와의 충돌을 피하기 위해 className을 사용합니다.

const element = <div className="container">Hello</div>;

 

요약

 

• React 컴포넌트는 UI의 재사용 가능한 구성 요소입니다. 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘며, props와 state를 사용하여 데이터를 관리하고 전달합니다.

• JSX는 JavaScript에서 HTML과 유사한 문법을 사용하여 UI를 정의할 수 있도록 해주는 문법입니다. JavaScript 표현식과 통합하여 동적 UI를 쉽게 작성할 수 있습니다. JSX는 Babel을 통해 JavaScript 코드로 변환되며, 가독성과 유지 보수성을 높여줍니다.

 

이 두 가지 개념은 React 애플리케이션에서 UI를 효과적으로 설계하고 관리하는 데 필수적인 역할을 합니다.