반응형
리엑트에서 제공하는 JSX문법은 자바스크립트에서도 html같은 코드를 쓸 수 있게 해주는 기능을 가지고 있음. 대신 조건이 있는데 바로 하나의 태그로 감싸야한다는 것이고, 이를 위해 보통 <div>로 감싸곤 함. 근데 컴포넌트가 많아지고 거대질수록 자칫하면 의미도 없는 <div>가 남발할 수 있음. 이걸 <div> soup라고 함.
이를 해결하기 위해서는 이러한 방법이 있음.
1. wrapper 컴포넌트 만들기
const Wrapper = (props) => {
return props.children;
};
export default Wrapper;
그냥 Wrapper.js라는 파일을 만들어주고 위와 같이 씀. jsx가 아니기때문에 그냥 js파일임. 단순하게 props의 칠드런을 리턴하는데, 리엑트에서 말하는 props의 아이들이란 그 하위 내용들을 의미함. 그렇기때문에 저렇게 내보낸 친구를
이렇게 원하는 곳에 import를 한뒤 return문 최상단에 감싸주면 오류없이 잘 나옴. 이 방법의 특징은 이렇게 만든 <Wrapper>가 실제로 f12눌러서 html 트리를 보면 아무 감싸는 요소를 생성하지 않는다는 점임.
2. <> fragment 사용하기
아니면 더 쉽게 리엑트에서 제공하는 기본 요소를 사용해도 됨. 첫번째는 <>을 쓰기인데 그냥 진짜 <>을 쓰면 됨.
export default function Child() {
return (
<>
<h1></h1>
<p></p>
</>
);
}
프로젝트에 따라 예~~~전 리엑트 버전에서는 지원을 안하는데, 그런 문제가 있거나 그냥 저 모양새가 싫다면 아래 방법도 있음.
import React from "react";
export default function Child() {
return (
<React.Fragment>
<h1></h1>
<p></p>
</React.Fragment>
);
}
'react' 카테고리의 다른 글
[React] Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null. (1) | 2024.01.02 |
---|---|
[React][typescript] 모듈 또는 해당 형식 선언을 찾을 수 없습니다. (1) | 2023.12.19 |
[React] input에서 양방향 바인딩 하기 (0) | 2023.12.15 |
[React] 함수에 파라미터 넘기는 법 (0) | 2023.12.14 |
[React] 컴포넌트끼리 데이터 넘기기 총정리 (0) | 2023.12.13 |