[React] 컴포넌트 함수의 반환값

📄 컴포넌트 함수의 반환값

리액트의 컴포넌트는 다양한 리액트 요소를 반합니다.

export default function App() {
  return "hi"; // 문자열을 반환했다.
}

컴포넌트가 배열을 반환 할 때는 리액트 요소가 key를 가지고 있어야 합니다.

key는 랜더링을 효율적으로 하기 위해서 필요한 값입니다.

리액트가 이 값을 이용해서 가상돔에서 연산을 진행합니다.

export default function App() {
  return [<pkey={1}>안녕</p>, <p key={2}>하세요</p>]; //
}

fragment

컴포넌트는 fragment를 반환할 수 있습니다.

fragment 여러개의 요소를 반환할 때 사용합니다.

fragment는 일종의 key역할을 합니다.

export default function App() {
  return (
    <React.Fragment>
      <p>안녕</p>
      <p>하세요</p>
    </React.Fragment>
  );
}

fragment는 불필요한 div태그를 남발하지 않게 해줍니다.

아무것도 입력하지 않고 태그의 괄호만 입력하면 fragment로 작동합니다.

fragment에서는 null또는 boolean값이 무시됩니다.

potal

컴포넌트는 potal을 반환할 수 있습니다.

potal이란 html에서 root엘리먼트가 아닌 다른 엘리먼트에 렌더링하고 싶을 때 사용합니다.

potal을 사용하기 위해서는 ReactDom에 있는 함수를 사용합니다.

두번째 매개변수는 html에 있는 요소를 지정한다.

import ReactDom from "react-dom";

export default function App() {
  return (
    <>
      <p>안녕</p>
      <Counter />
      {ReactDom.createPortal(
        <div>
          <p>안녕하세요</p>
          <p>실전 리액트 프로그래밍 입니다.</p>
        </div>,
        document.getElementId("something")
      )}
    </>
  );
}

출처

• 실전 리액트 프로그래밍