Programming/React2 React 프로젝트의 디렉토리 구조와 Vite 환경 이해하기 React로 프로젝트를 시작하면 처음 마주하는 것이 디렉토리 구조입니다. 특히 Vite를 사용한 최신 React 프로젝트에서는 폴더와 파일의 역할이 직관적이지만, 초보자에게는 다소 낯설게 느껴질 수 있습니다. 이 글에서는 Vite를 사용한 React 프로젝트의 디렉토리 구조를 상세히 살펴보고, 각 파일과 폴더의 역할을 설명합니다. 또한, Vite와 Webpack의 차이점, Vite의 장점, 그리고 효과적인 프로젝트 관리를 위한 팁도 함께 다룹니다.🤓1. 프로젝트 루트 프로젝트의 최상위 디렉토리프로젝트 관리를 위한 설정 파일과 기본 구조를 제공합니다.📂 주요 폴더 및 파일node_modules/프로젝트의 모든 의존성 패키지가 저장됩니다.npm install 명령어 실행 시 생성됩니다.직접 수정은 금지하.. 2025. 1. 6. children prop이 왜 필요한지와 어떻게 쓰이는지 🎯 1. 버튼(Button) 컴포넌트로 이해하기(1) children 없이 고정된 버튼props를 이용해 버튼 텍스트를 전달한다고 가정해보세요:function Button({ label }) { return {label};}// 사용문제점: 버튼 안에 아이콘, 이미지, 다른 복잡한 내용을 넣고 싶을 때 어려워집니다. (2) children을 사용한 버튼children을 사용하면 버튼 안에 무엇이든 넣을 수 있습니다:function Button({ children }) { return {children};}// 사용Click Me Submit이렇게 하면 버튼 안에 텍스트, 이미지, 아이콘 등 원하는 모든 콘텐츠를 동적으로 삽입할 수 있습니다.🎯 2. 상자(Box) 컴포넌트로 이해하기(1) chi.. 2024. 11. 14. 이전 1 다음
