⭐ ProjectSection.tsx 코드 구현 및 의미
1. interface
onProjectClick
-
ProjectsSection 컴포넌트가 부모로부터 전달받을 prop의 이름이다.
-
부모 컴포넌트에서
<ProjectsSection onProjectClick={...} />처럼 이 이름을 사용해야 한다.
(project: Project) => void
-
onProjectClick prop의 실제 타입이며, 이 타입은 함수이다.
-
이 함수는 인자를 하나 받고 그 입력값의 이름은 project이다. 그 project의 타입은 우리가 src/types/index.ts에서 정의한 Project여야 한다.
-
void: 이 함수는 실행된 후, 아무것도 반환하지 않는다.
2. const { onProjectClick } = props; (객체 구조 분해 할당)
- 객체 구조 분해 할당 문법이다.
=> props 객체 안에서, onProjectClick이라는 이름(Key)을 가진 속성(property)을 찾는다.
=> 그 속성의 값을 꺼내서 onProjectClick이라는 이름의 새로운 지역 변수로 만든다.
사용 이유?
=> props 꾸러미에서 onProjectClick을 미리 꺼내두었기 때문에, 코드의 아랫부분에서 props.onProjectClick이라고 길게 쓸 필요 없이, 그냥 onProjectClick이라는 짧은 변수 이름으로 편리하게 사용할 수 있다.
3. 본문
section
-
<section ...>: 시맨틱 HTML 태그이다. -
id="projects": 이<section>태그에 projects라는 고유한 이름표를 붙인다. (내비게이션 기능 위해서) -
min-h-screen:
<section>의 최소 높이를 사용자의 브라우저 화면 전체 높이와 똑같이 만든다. -
py-24: padding-top: 6rem(96px), padding-bottom: 6rem(96px)을 동시에 준다.
-
px-4: padding-left: 1rem(16px), padding-right: 1rem(16px)을 동시에 준다.
첫번째 div
-
max-w-6xl: 이
<div>의 최대 가로 너비를 72rem(1152px)로 제한한다. -
mx-auto: margin-left: auto;와 margin-right: auto;를 동시에 설정한다.
=> 블록 요소를 가로 중앙에 배치한다.
h2
-
text-4xl: 제목 텍스트의 크기를 2.25rem(36px)로 설정한다.
-
font-bold: font-weight: 700. 텍스트를 굵게 만든다.
-
mb-12: 아래에 3rem (약 48px)의 여백을 준다.
-
text-center: 텍스트를 가운데 정렬시킨다.
-
text-indigo-400: 글자 색상을 indigo-400 (보라색 계열)로 설정한다.
마지막 div
-
space-y-16: 자식 요소들 사이에 4rem(64px)간격을 준다.
-
{projectsData.map((project) => ( ... ))}
=> src/data/projects.ts 파일에서 import해 온, 모든 프로젝트 정보가 담긴 배열을 처음부터 끝까지 순회한다. 순회한 각 항목을 project라는 변수에 임시로 담아서 => 뒤에 있는 ( ) 안의 코드를 실행한다. -
key={project.id}: (React 규칙) .map()을 사용해 목록을 만들 때는, React가 각 항목을 빠르고 정확하게 구분할 수 있도록 고유한 식별자(key)를 반드시 제공해야 한다.
-
project={project}: ProjectCard의 project라는 prop에는, .map()이 지금 꺼내온 project 변수를 전달한다.
-
onClick={() => onProjectClick(project)}: ProjectCard의 onClick이라는 prop에는, 새로운 함수를 전달한다. 이 새로운 함수는 인자는 받지 않고,이 '새로운 함수'가 실행되면, 그제서야 page.tsx으로부터 받아온 onProjectClick 함수를, 현재 map의 project 데이터와 함께 호출(실행)한다.
🩷 결과
- 화면
