React & Next.js 실무 컨벤션 정리 + Props

💡 React & Next.js 실무 컨벤션 가이드

환경 설정 이후, 진짜 실전에 필요한 핵심만 정리했습니다.

✨ 이런 분께 추천드려요!

반복되는 설정 작업에 지친 React 개발자
컴포넌트 구조와 props 설계에 헷갈리는 분
Next.js 구조를 체계적으로 이해하고 싶은 분

🎨 1. 초기 스타일 설정

reset.css는 별도로 필요 없습니다.
TailwindCSS / PandaCSS를 사용하는 경우, 내부에 이미 스타일 초기화가 포함되어 있습니다.
기본 CSS 파일 (App.css, globals.css)은 프로젝트 스타일링 전략에 따라 선택적으로 제거 가능합니다.

💡 요즘 실무에서는 Tailwind나 PandaCSS로 스타일 초기화 + 커스터마이징을 함께 관리합니다.

🔁 2. Export / Import 방식

방식	설명
export default	하나의 기본 기능을 내보낼 때 사용
named export	여러 기능을 나눠서 내보낼 때 사용. 트리쉐이킹, 유지보수에 유리

✅ 대규모 프로젝트에서는 named export를 권장합니다.

⚙️ 3. 컴포넌트 선언 방식

// 전통적 방식
function Button() {}

// 최근 주류
const Button = () => {}

// 타입스크립트 (선호도 낮아짐)
const Button: React.FC = () => {}

✅ 실무에서는 화살표 함수 + const 방식이 간결성과 유지보수 면에서 주로 사용됩니다.

📩 4. props 전달과 구조 분해

// 부모 → 자식


// 자식에서 받기
const Greeting = ({ message }) => {message}
;

🧷 props는 읽기 전용입니다. 자식 컴포넌트는 받은 데이터를 그대로 렌더링하는 것이 바람직합니다.

📁 5. import 경로 표기법

경로 유형	예시
같은 폴더	./A
상위 폴더	../B
절대 경로	@/components/C (tsconfig 설정 필요)

✅ @ 경로 사용 시 tsconfig.json 또는 jsconfig.json에서 baseUrl, paths 설정 필요합니다.

🗂 6. Next.js 라우팅 구조

app/
  └─ page.tsx         → /
  └─ about/page.tsx   → /about
  └─ [slug]/page.tsx  → 동적 라우팅

✅ 폴더 이름 = URL 경로,

[param]은 동적 라우팅을 의미합니다.

✍️ 7. 컴포넌트 네이밍 컨벤션

유형	예시	설명
공통	Button, InputField	단수형, 직관적
페이지	HomePage, PostDetailPage	Page 접미사
레이아웃	MainLayout, DashboardLayout	Layout 접미사
섹션	HeroSection, FooterSection	Section 접미사

✅ 폴더 구조와 컴포넌트 이름을 맞추는 것이 가독성 향상에 매우 중요합니다.

🎯 8. props 심화 가이드

✅ 구조 분해 vs 직접 접근

// 구조 분해
const Card = ({ title }) => {title}

// 직접 접근
const Card = (props) => {props.title}

구조 분해는 간결하지만, props가 많은 경우 직접 접근이 디버깅에 유리할 수 있습니다.

✅ 객체 통째로 전달 (spread)

✅ TypeScript props

type Props = { title: string };
const Card: React.FC = ({ title }) => {title};

🧰 9. props 활용 패턴 모음

패턴	설명	예시
Presentational	순수 렌더링 컴포넌트	<UserCard user={user} />
Container-Presenter	로직 & UI 분리	UserList → UserCard
Render Props	JSX 함수 전달	<List renderItem={...} />
Function as Children	함수형 children	<Card>{(state) => <p>{state}</p>}</Card>

📌 10. 실전 팁 한눈에 보기

✅ props는 항상 읽기 전용으로 유지
✅ 기본값 처리: defaultProps, ??, ||
✅ 유형 그룹화: props.theme, props.settings
✅ 재사용성 고려: variant, size, onClick 등

📚 마무리

이 가이드는 실제 실무에 적용할 수 있도록 현업 트렌드 기반으로 정리된 컨벤션입니다. 앞으로도 상태 관리, 라우팅, 컴포넌트 설계 아키텍처 등 주제로 계속 이어질 예정입니다.

✉️ 이 뉴스레터가 도움이 되셨다면, 저장 혹은 공유해주세요!

서정적 인류애를 전하는 라이프 인사이트 메뉴얼,

작업하실때 디스코드 많이 하시죠?

자 같이 소통하며 성장해봅시다!

소란했던 속마음도, 새로운 기술도, 함께 나누며 즐겁게 지내보면 어떨까요?

서로간의 배울것과 나눌 것, 진실된 이야기로 디지털 트랜스포메이션에 한걸음 다가가 보아요.

궁금해요! 마음챙김 앱의 AB test에 참여해주세요.

🌿 하나의 마음케어 앱, 두 가지 샘플링

🌿두 가지 샘플링으로 하나의 마음케어 앱을 만들어봤어요!

같은 목표를 가지고 있지만, 각 샘플링은 다른 방식으로 접근해봤어요!

프로토 타입으로 AB 테스트를 진행해봅니다.

샘플링1: 직관적 디자인으로 빠르게 마음을 다스리기

샘플링2: 실시간 피드백과 맞춤형 조언으로 웰니스 유도

어떤 샘플이 더 마음에 드시나요?여러분의 피드백은 큰 힘이됩니다 😍💬

1つのマインドケアアプリ、2つのサンプリング🌿。

二つのサンプリングで一つのマインドケアアプリを作ってみました！

同じ目標を持っていますが、それぞれのサンプリングは異なる方法でアプローチしています。サンプリング1: 直感的なデザインで素早く心を整えるサンプリング

2: リアルタイムのフィードバックとパーソナライズされたアドバイスで自己啓発を促します。

どちらのサンプルが好きですか？

皆様のフィードバックをお待ちしています！ 💬💬💬💬。

number 1

number2

Copyright NoticeAll content in this newsletter (text, images, design, etc.) is protected under copyright law. Unauthorized reproduction, distribution, modification, retransmission, or commercial use without the publisher's consent is strictly prohibited.For personal reference or sharing, please clearly attribute the original source.