[React / Next.js] Fragment 써도 될까? FC, NextPage 타입과 시맨틱 구조에 대한 고민 정리

#React #Next.js #시맨틱태그 #Fragment #TypeScript

 

오늘의 코드 리뷰

---

📌 목차

들어가며

React.FC / NextPage를 쓰지 않는 이유

Fragment를 쓸 때 주의할 점

상위 Layout의 역할

시맨틱 태그란?

오늘의 TIL

---

✅ 들어가며

오늘은 React와 Next.js를 쓰면서 평소 고민하던 것들에 대해 정리해보았다.
Fragment는 언제 써야 하고, React.FC 타입은 왜 점점 안 쓰는 분위기일까?
프로젝트에 적용하며 마주한 구조적 이슈와 고민들을 공유해본다.

---

✅ 1. React.FC / NextPage를 쓰지 않는 이유

React.FC나 NextPage를 쓰면 children이 자동 포함되고, defaultProps나 propTypes가 암묵적으로 설정된다.
이는 타입 명시성이 떨어지고, 제네릭 사용도 불편하게 만든다.

// ❌ 비추천
const MyComponent: React.FC<{ title: string }> = ({ title }) =>

// ✅ 추천
type Props = { title: string };
const MyComponent = ({ title }: Props) =>

 

---

✅ 2. Fragment를 쓸 때 주의할 점

Fragment(<>...</>)는 DOM에 아무것도 남기지 않기 때문에, 구조적 컨테이너가 필요할 때는 문제가 될 수 있다.

• 레이아웃 스타일을 주고 싶은데 감싸는 DOM이 없음
• ul, table처럼 구조적으로 제약이 있는 태그 안에서는 비시맨틱함
• key를 줘야 할 때는 <React.Fragment>를 써야 해서 오히려 복잡해짐

// ✅ 명확한 구조 (팀 내부와 상의해서 사용해야함, 프로젝트에서는 상위 Layout이 있으므로, Box로 감싸지 않아도 된다.

---

✅ 3. 상위 Layout의 역할

Next.js App Router 구조에서는 Layout.tsx가 전체 문서 구조와 전역 스타일링을 담당한다.
children으로 넘겨받는 페이지는 이 구조 하단에 포함되며, 필요한 레이아웃은 직접 선언해야 한다.

const Layout = ({ children }: PropsWithChildren) => (
        {children}
);

따라서 <>로 감싸는 대신, 구조를 명확히 하기 위해 <Box> 등의 wrapper 사용이 필요하다.

---

✅ 4. 시맨틱 태그란?

HTML의 시맨틱 태그는 "의미 있는 구조"를 전달하기 위한 태그이다.
스크린 리더, SEO, 유지보수 모두에서 장점을 가진다.

시맨틱 태그	비시맨틱 태그
<header>, <main>, <footer>	<div>
<article>, <section>, <nav>	<span>
<button>, <form>	<div onClick>

시맨틱한 구조는 접근성(a11y) 향상과 유지보수에 큰 도움이 된다.

---

그래서 오늘의 TIL(Today I Learned) 학습 키워드

✨ React.FC 제거 이유

✨ Fragment 주의점

✨ 시맨틱 태그의 실무 중요성

✨ Layout 구조 이해

---

--- AI로 정리한 실험적인 회고입니다. ---