[Nextjs 험난한 여정] 번외. 이상한 데에서 찾는 궁금증(주기적으로 업데이트할거시다)

근본없이 공부하느라 갑자기 궁금한 것들을 찾고 기록하는 소연브러리입니다.

 

 

 

(20250429) 궁그미 1️⃣ 중괄호의 의미는 뭘까?

// case A
import { tistory } from '경로'; 
// case B
import tistory from '경로';

 

case A는 named import, case B는 default import라고 칭하겠다.

 

💫 named import의 경우 

• js 내 유틸 함수가 다수일 경우
• 여러 컴포넌트를 한 번에 export할 때

 

💫 default import의 경우 

• js 내 유틸 함수가 단일인 경우

 

로 나눌 수 있다.

 

 

 

---

 

(20250430) 궁그미 2️⃣ 리턴 아래에 div를 감싸야 하는 이유는 무엇인가료

return (
  <HeaderWrap />
  <FooterWrap />
);

 

위와 같이 작성하니 에러가 났다.

return (
  <div>
    <HeaderWrap />
    <FooterWrap />
  </div>
);

이렇게 하니 정상적으로 출력이 되었다. 왜죠?

🫤 에러가 난 이유

• return 바로 아래에 있는 JSX 요소가 2개 이상이면 하나의 요소로 감싸야 한다.

😔 왜요?

• React는 컴포넌트가 하나의 트리 구조로 반환하는 것을 규칙으로 한다. 

😌 그렇다면 이러케 해보세요

return (
  <div>
    <HeaderWrap />
    <FooterWrap />
  </div>
);

<div>로 감싸거나

return (
  <>
    <HeaderWrap />
    <FooterWrap />
  </>
);

<>로 감싸기(Fragment)

 

Fragment가 모에오?
UI의 조각을 감싸는 보이지 않는 컨테이너
JSX를 여러 개 묶을 수 있으면서도 실제 DOM에는 영향이 없으며, 렌더링 시에도 태그 생성 안됨

When to use?
 - 레이아웃 없는 감싸기
 - 불필요한 div 방지

 

 

---