[React] 함수형 컴포넌트의 반환 return 값 조건 & Fragment(프래그먼트) <>...</>

일반적인 함수에서 return 값을 두 개 가질 수 없듯이 함수형 컴포넌트에서도 여러 개의 요소를 반환 할 수 없다.

리액트 컴포넌트는 반드시 하나의 요소를 반환 해야한다. 이와 같이 리액트의 함수형 컴포넌트의 return 값에는 몇가지 조건이 있다.

✅ 1. 반드시 하나의 리액트 엘리먼트(React Element)를 반환해야 한다.

❌잘못된 예시 (여러 개의 요소를 반환)

function Welcome() {
  return <h1>Hello</h1>
         <p>React!</p>;  // 오류 발생 ❌
}

그러나 화면의 UI를 구성하기 위해서 하나의 엘리먼트로는 부족한 경우가 많다. 이를 해결하기 위해 불필요한 <div> 로 감쌀 수 있다.

⭕ 올바른 예시 (하나의 부모 요소로 감싸기)

function Welcome() {
  return (
    <div>
      <h1>Hello</h1>
      <p>React!</p>
    </div>
  );
}

불필요한 요소를 사용하지 않기 위해 Fragment (<>...</>) 를 사용하여 불필요한 <div> 없이도 감쌀 수 있다.

import { Fragment } from 'react';

function Welcome() {
  return (
    <Fragment>
      <h1>Hello</h1>
      <p>React!</p>
    </Fragment>
  );
}

function Welcome() {
  return (
    <>
      <h1>Hello</h1>
      <p>React!</p>
    </>
  );
}

 

 

 

---

✅ 2. 반드시 유효한 JSX 또는 리액트 엘리먼트를 반환 해야한다.

return 값으로 일반 문자열이나 숫자를 직접 반환하면 오류가 발생한다.

❌ 잘못된 예제:

function Welcome() {
  return "Hello, React!"; // 오류 발생 ❌
}

리액트 컴포넌트는 반드시 JSX 또는 React.createElement()를 반환해야 한다

⭕ 올바른 예제 (JSX를 사용):

function Welcome() {
  return <h1>Hello, React!</h1>; // 올바름 ⭕ 
}

또는 React.createElement를 사용:

function Welcome() {
  return React.createElement("h1", null, "Hello, React!"); // 올바름 ⭕ 
}

 

 

---

✅ 3. 배열 반환 가능 (React 16 이상)

React 16 이상에서는 배열을 반환하여 여러 개의 요소를 감싸지 않고도 렌더링할 수 있다.

⭕ 배열을 반환하는 예제:

jsx
복사편집
function Welcome() {
  return [
    <h1 key="1">Hello</h1>,
    <p key="2">React!</p>
  ];
}

💡 배열 반환 시, 각 요소에는 key를 부여하자. 리액트가 리스트를 렌더링할 때 효율적으로 업데이트할 수 있도록 하기 위해

 

 

---

✅ 4. null, false, undefined, []도 반환 가능 (렌더링 안 됨)

아무것도 렌더링하고 싶지 않다면 null, false, undefined 등을 반환할 수 있다

예제:

function Welcome() {
  return null; // 화면에 아무것도 출력되지 않음
}

function Welcome({ show }) {
  return show ? <h1>Hello, React!</h1> : null;
}

위 코드에서 show가 true이면 <h1>Hello, React!</h1>를 렌더링하고, false이면 아무것도 렌더링하지 않는다.