jsx를 사용한 props과 jsx를 사용하지 않은 props

 

1. JSX를 사용한 props 사용법

import React from 'react';

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

function App() {
  return <Greeting name="moo" />;
}

export default App;

 

App컴포넌트는 Greeting 컴포넌트에 name이라는 props를 전달하고 있다.

Greeting 컴포넌트는 전달받은 props.name값을 사용하여 

"Hello, moo!"라는 문구를 렌더링한다.

 

JSX를 사용한 props의 장점

• 직관적이고 HTML-like 문법을 사용하여 가독성이 좋다.
• 속성 형태로 props를 쉼게 전달할 수 있어 컴포넌트 간 데이터 흐름을 명확하게 표현한다.

 

2. JSX를 사용하지 않은 props 사용법

JSX 없이 리액트 컴포넌트를 사용할 때는 React.createElement() 메서드를 사용하여 컴포넌트를 생성한다.

이 방법은 리액트 내부적으로도 사용되며, props를 객체로 전달한다.

import React from 'react';

function Greeting(props) {
  return React.createElement('h1', null, `Hello, ${props.name}!`);
}

function App() {
  return React.createElement(Greeting, { name: 'moo' });
}

export default App;

 

React.createElement()메서드를 사용하여 Greeting 컴포넌트를 생성하고, name이라는 props를 전달한다.

React.createElement()는 세 가지 인자를 받는다.

1. 타입 : HTML요소나 컴포넌트('h1', Greeting 등).

2. props : 해당 요소나 컴포넌트에 전달할 props 객체.

3. children : 해당 요소나 컴포넌트 내부에 포함될 자식 요소 또는 텍스트

 

jsx없이 props를 사용하는 방법의 특징

• jsx문법을 사용하지 않으므로 자바스크립트 함수 호출 방식에 가깝다.
• jsx보다 코드가 다소 복잡해 보일 수 있지만, 리액트는 내부적으로 이 방식으로 컴포넌트를 처리한다.