[Day53] 반응형

📁 구조별 특징

1. 기본 React 구조

src/
├── components/
├── pages/
├── hooks/
├── services/

• 입문자에게 친숙
• 폴더가 기능별로 나뉘어 관리하기 쉽고 단순

2. 기능 중심(Folder by Feature) 구조

src/
├── features/
│   ├── auth/
│       ├── components/
│       ├── hooks/
│       ├── services/
│       ├── store/
│   ├── products/
│       ├── components/
│       ├── hooks/
│       ├── services/
│       ├── store/

• 기능 단위로 모든 파일(컴포넌트, 훅, 서비스 등)을 묶음
• 프로젝트가 커져도 기능 간 독립성 유지가 용이

3. Atomic Design 패턴

src/
├── components/
│   ├── atoms/
│   ├── molecules/
│   ├── organisms/

• UI 컴포넌트 설계 철학 기반
• 재사용성 높은 컴포넌트를 계층적으로 분리

---

4. 서버/클라이언트 컴포넌트 분리 구조 (Next.js App Router 기반)

src/
├── components/
│   │   ├── server/    
│   │   │   ├── DataTable.jsx
│   │   │   └── ServerNav.jsx
│   │   └── client/ 
│   │       ├── Button.jsx  // 'use client' 지시어 포함
│   │       └── Form.jsx    // 'use client' 지시어 포함

• 서버 컴포넌트 vs 클라이언트 컴포넌트 구분 필수
• ‘use client’ 지시어로 클라이언트 컴포넌트 명시

---

🔸 코드 분석

Header.jsx

import React, { useEffect, useState } from 'react'
import { Link, NavLink, useLocation } from 'react-router-dom'
import css from './Header.module.css'
import Logo from '../components/Logo'

const Header = () => {
  const [isOn, setIsOn] = useState(false) // 메뉴가 열려있는 상태(true) or 닫힌 상태(false)
  const location = useLocation() // 현재 URL 정보를 가져옴
  console.log(location)
  console.log(location.pathname)

  const addClassOn = () => {
    setIsOn(!isOn)  // 메뉴 열고 닫기
  }

  useEffect(() => {
    setIsOn(false)
  }, [location.pathname]) // URL이 바뀌면 메뉴를 자동으로 닫음

  const handleResize = () => {
    // 화면이 1100px보다 넓어지면 메뉴를 강제로 닫음 (모바일에서 데스크탑 전환 시)
    if (window.innerWidth > 1100) {  
      setIsOn(false)
    }
  }

  useEffect(() => {
    window.addEventListener('resize', handleResize) // 컴포넌트가 마운트되면 resize 이벤트 등록
    return () => {
      window.removeEventListener('resize', handleResize) 
      // 언마운트 시 이벤트 제거 (clean-up)
    }
  }, [])
  // 제거 안 하면 리렌더링마다 이벤트가 계속 쌓여서 메모리 누수 발생

  return (
    <header className={css.hd}>
      <div className={css.con}>
        <h1 className={css.logo}>
          <Link to={'/'}>
            <Logo />
          </Link>
        </h1>
        {/* 메뉴가 열려 있을 때만 .on 클래스를 추가 */}
        <div className={isOn ? `${css.gnb} ${css.on}` : css.gnb}> 
          <nav>
            <CustomNavLink to={'/shop'} label={'shop'} />
            <CustomNavLink to={'/about'} label={'about'} />
            <CustomNavLink to={'/blog'} label={'blog'} />
          </nav>
          <div className={css.icon}>
            <CustomIconLink to={'/search'} icon={'bi-search'} />
            <CustomIconLink to={'/mypage'} icon={'bi-person-circle'} />
            <CustomIconLink to={'/cart'} icon={'bi-basket'} />
          </div>
        </div>
        <i className={`${css.ham} bi bi-list`} title="전체메뉴 보기버튼" onClick={addClassOn}></i>
      </div>
    </header>
  )
}

const CustomNavLink = ({ to, label }) => (
  <NavLink className={({ isActive }) => (isActive ? `${css.active}` : '')} to={to}>
    {label}
  </NavLink>
)

const CustomIconLink = ({ to, icon }) => (
  <NavLink className={({ isActive }) => (isActive ? `${css.active}` : '')} to={to}>
    <i className={`bi ${icon}`}></i>
  </NavLink>
)

export default Header

---

✅ CustomNavLink 컴포넌트

const CustomNavLink = ({ to, label }) => (
<NavLink className={({ isActive }) => (isActive ? `${css.active}` : '')} to={to}>
    {label}
</NavLink>
)

• to: 이동할 경로 (예: /shop)
• label: 표시할 텍스트 (예: ‘shop’)
• 현재 URL과 to가 일치하면 자동으로 isActive를 true로 넘겨줌

✅ 메뉴 항목 아래에 밑줄 애니메이션 효과

.gnb nav a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  height: 2px;
  background-color: var(--dark-colors-accent-dark);
  transition: 0.3s;
}

속성	의미
content: ''	::before 가상 요소를 만들기 위한 필수 값 (빈 내용)
position: absolute	메뉴 항목(a)을 기준으로 절대 위치 지정
bottom: 0	아래쪽에 위치시킴 (즉, 밑줄처럼 보이게)
left: 50%, transform: translateX(-50%)	가운데 정렬
width: 0%	초기에는 보이지 않음
height: 2px	밑줄 두께
background-color: var(--dark-colors-accent-dark)	밑줄 색상
transition: 0.3s	애니메이션 효과 (서서히 변화)

.gnb nav a.active::before,
.gnb nav a:hover::before {
  width: 100%;
}

• 마우스를 올리거나(hover), 현재 페이지와 링크가 같아서 active 클래스가 붙으면
• width: 100%이 되면서 밑줄이 애니메이션으로 펼쳐짐.

---

✅ useLocation

• React Router 라이브러리에서 제공하는 훅(hook)
• 현재 브라우저의 URL 정보를 가져오는 데 사용
• 현재 페이지의 경로, 쿼리 파라미터, 해시 등 URL에 관련된 정보에 쉽게 액세스

주요 속성

속성명	설명
pathname	현재 URL의 경로 (예: /about)
search	URL의 쿼리 문자열 (예: ?id=123)
hash	URL의 해시값 (예: #section1)
state	페이지 이동 시 전달된 상태 객체
key	현재 location을 고유하게 식별하는 값 (라우터가 내부적으로 사용)

🛠️ 사용 방법

import { useLocation } from 'react-router-dom';

const MyComponent = () => {
  const location = useLocation();

  console.log(location.pathname); // 현재 경로
  console.log(location.search);   // 쿼리 문자열
  console.log(location.hash);     // 해시
  console.log(location.state);    // 전달된 상태
  console.log(location.key);      // 고유 식별자

  return (
    <div>
      <p>현재 경로: {location.pathname}</p>
    </div>
  );
};

---

END