[ReactJS_Complete] JSX Limitations & Workarounds

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

JSX return값 1개

return (
    <h2>Hi there!</h2>
    <p>This does not work :-(</p>
);
 

🚨 Adjacent JSX elements must be wrapped in an enclosing tag

 

 

해결방법

1. Wrapper 태그로 감싸기

return (
    <div>
        <h2>Hi there!</h2>
        <p>This does not work :-(</p>
    </div>
);
 

⭐ div tag뿐만 아니라 다른 기본 html 태그도 가능하며, component 또한 가능

 

2. 배열 선언

return [
    <h2 key="h2">Hi there!</h2>
    <p key="p">This does not work :-(</p>
];
 

⭐ 배열 선언 시, 효율적인 rendering을 위해 key값 선언 필요

(key값 미 선언 시, 🚨 Warning: Each child in a list should have a unique "key" prop. 경고 발생)