React를 사용해 내 랜딩 페이지를 다시 만들었습니다 – 배운 점

Source: Dev.to

What I Changed

• 섹션을 재사용 가능한 컴포넌트로 변환
• 폴더 구조 개선
• 이미지 최적화
• Tailwind CSS를 사용해 스타일링 속도 향상
• 모바일 퍼스트 반응형에 집중

React가 페이지가 아니라 컴포넌트 단위로 생각하도록 강제한다는 점을 깨달았습니다. 이 사고 방식의 전환 덕분에 오래된 지저분한 레이아웃을 정리할 수 있었습니다. 사용되지 않는 CSS를 제거하고 컴포넌트를 논리적으로 분리한 뒤 성능도 향상되었습니다.

Challenges

가장 큰 도전은 컴포넌트 전반에 걸쳐 레이아웃 간격을 일관되게 관리하는 것이었습니다. 이를 해결하기 위해 공유 컨테이너와 섹션 래퍼 컴포넌트를 만들었습니다.

Final Result

UI가 더 깔끔해졌습니다. React를 배우고 있다면, 오래된 프로젝트 중 하나를 다시 만들어 보세요—새로운 것을 시작하는 것보다 더 많은 것을 배울 수 있습니다.

다른 분들은 React에서 랜딩 페이지 구조를 어떻게 접근하고 있는지 듣고 싶습니다.