2025 / 03 / 10
오늘 수업 시간에는 타입스크립트에서의 module과 export를 배웠습니다.
파일에서 작성한 코드를 외부에서 사용할 수 있도록 해주는 기능을 배우고 이 기능을 활용해 React 기초를 배웠습니다. Xd와 피그마에서 배운 컴포넌트의 개념도 프로그래밍에서는 어떻게 다뤄지는지 알 수 있는 시간이었습니다. 이번에 처음 배우는 내용이라 어렵지만, 이해한 내용을 바탕으로 최대한 이해하기 쉽게.. 정리해보겠습니다.
💌 module
모듈화
- 모듈화는 코드의 기능 별로 파일을 나누고, 그 파일에서 작성한 코드가 다른 파일에서도 사용될 수 있도록 만드는 과정입니다.
- 모듈화를 통해 코드를 깨끗하고, 유지보수가 용이하게 만들 수 있습니다.
- 모듈은 export와 import를 사용해 관리합니다.
💌 export
- 작성한 코드를 다른 파일에서 사용할 수 있도록 내보내는 역할을 합니다.
- named export와 default export 두 가지 방식이 있습니다.
1. default export
- 파일에서 단 하나의 코드만 내보낼 때 사용합니다.
- 하나의 값만을 내보낼 수 있기 때문에, 주로 클래스나 함수, 객체 등을 내보낼 때 사용합니다.
// IdolModel.ts class IdolModel { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } } const number = 12; // 객체의 형태로 묶어서 내보낸다. export default { IdolModel, number, };
- IdolModel 클래스와 number 변수를 객체 형태로 묶어서 내보내고 있습니다.
- 여러 가지 값을 한 번에 내보내고 싶을 때 유용합니다.
2. export default 사용법
- examples라는 이름으로 가져오며, IdolModel과 number에 접근할 수 있습니다.
- export default를 사용하면 가져오는 쪽에서 이름을 자유롭게 지정할 수 있습니다.
// import 예시 import examples from "./IdolModel"; // IdolModel 클래스를 인스턴스화 let idol2 = new examples.IdolModel("이한", 22); console.log(idol2); // IdolModel 클래스 사용 예 // number 값 출력 console.log(examples.number); // number 값 출력
3. export
여러 개의 코드 내보내기
- export는 여러 개의 값을 모듈에서 내보낼 때 사용됩니다.
- 여러 개의 클래스나 함수, 객체 등을 개별적으로 내보낼 수 있습니다.
// export.ts export class Human { name: string; constructor(name: string) { this.name = name; } } export const human1 = new Human("진하"); export const number1 = 23; export interface Home { age: number; }
- Human 클래스, human1 객체, number1, Home 인터페이스를 개별로 내보내고 있습니다.
- 여러 개의 값을 모듈로 내보내고, 필요할 때마다 선택적으로 import할 수 있게 해줍니다.
4. export 사용법
- import * as together를 사용하여 export로 내보낸 모든 값을 together라는 객체로 묶어서 가져옵니다.
- 가져온 값은 together.Human, together.number1, together.home2와 같이 객체 형태로 접근하게 됩니다.
// import 예시 import * as together from "./export"; // Human 클래스 인스턴스화 const human2 = new together.Human("이한"); // Home 인터페이스 객체 생성 const home2: together.Home = { age: 22, }; console.log(together.human1); // human1 출력 console.log(human2); // human2 출력 console.log(together.number1); // number1 출력 console.log(home2); // home2 출력
5. 차이점
export default
- 하나의 값만 내보낼 수 있습니다.
- 내보내는 값의 이름을 자유롭게 지정할 수 있습니다.
- xport default는 주로 하나의 주요한 클래스를 내보낼 때 사용됩니다.
export
- 여러 개의 값을 개별적으로 내보낼 수 있습니다.
- export는 여러 값들을 필요에 따라 가져올 수 있도록 유용합니다.
- 각 값에 대해 별도의 이름을 사용할 수 있습니다.
💌 컴포넌트
- 컴포넌트(Component)는 UI를 구성하는 기본 단위입니다.
- HTML, CSS, JavaScript가 결합되어 하나의 블록처럼 동작하는 요소로, 웹 애플리케이션의 구조를 구성하는 중요한 역할을 합니다.
- 웹 애플리케이션을 재사용 가능한 작은 조각으로 나누어 관리할 수 있게 됩니다.
- 하나의 컴포넌트는 특정 기능이나 UI를 담당하며, 여러 번 재사용할 수 있습니다.
1. 종류
1. 내장 컴포넌트
- React에서 제공하는 기본 HTML 요소들을 의미합니다.
<div>,<span>,<p>등은 내장 컴포넌트입니다.
2. 커스텀 컴포넌트
- 사용자가 정의하는 컴포넌트를 의미합니다.
- 다른 컴포넌트를 감싸거나, UI의 일부분을 담당하는 컴포넌트입니다.
- 커스텀 컴포넌트는 주로 사용자 인터페이스(UI)를 만들 때 사용합니다.
2. 작성 규칙
1. 함수 이름은 대문자로 시작해야한다.
- React는 대문자로 시작하는 함수만 컴포넌트로 인식합니다.
2. 단어가 두 개 이상일 경우 PascalCase를 적용해야 한다.
- 여러 단어로 이루어진 이름은 각 단어의 첫 글자를 대문자로 써야 합니다.
3. 함수는 JSX를 반환해야 한다.
- 컴포넌트 함수는 반드시 UI를 정의하는 JSX를 반환해야 합니다.
3. 사용 예시
- 다음은 여러 개의 사용자 정보를 카드 형식으로 출력하는 예시입니다.
- 각 사용자의 정보를 카드 형태로 보여주는 Card 컴포넌트를 정의합니다.
- 이를 App 컴포넌트에서 호출하는 방식입니다.
import "./App.css"; // 스타일을 위한 CSS 파일 임포트 // Card 컴포넌트 정의 function Card() { return ( <div className="card"> <h2>이한</h2> <p>나이 : 22세</p> </div> ); } function Card2() { return ( <div className="card"> <h2>운학</h2> <p>나이 : 20세</p> </div> ); } function Card3() { return ( <div className="card"> <h2>재현</h2> <p>나이 : 23세</p> </div> ); } // App 컴포넌트에서 여러 Card 컴포넌트 호출 export default function App() { return ( <div className="container"> <h1 className="title">사용자 목록</h1> <Card /> {/* Card1 컴포넌트 */} <Card2 /> {/* Card2 컴포넌트 */} <Card3 /> {/* Card3 컴포넌트 */} </div> ); }
Card 컴포넌트
- Card 함수는 각 사용자의 이름과 나이를 보여주는 JSX를 반환하는 함수형 컴포넌트입니다.
- h2와 p 태그로 구성되어 있으며, 사용자의 이름과 나이를 출력합니다.
App 컴포넌트
- App 함수는 애플리케이션의 최상위 컴포넌트입니다.
- Card, Card2, Card3 컴포넌트를 호출하여 여러 사용자 정보를 화면에 출력합니다.
- App 컴포넌트는
<div className="container">로 감싸져 있습니다. - h1 태그로 "사용자 목록"이라는 제목을 출력합니다.
4. JSX와 반환
- JSX는 JavaScript 내에서 HTML을 작성할 수 있는 문법입니다.
- JavaScript 코드 안에 포함되어 있습니다.
- { }로 변수를 삽입하거나 원하는 함수를 호출할 수 있습니다.
return <div>{variable}</div>처럼 데이터를 동적으로 넣을 수 있습니다.- return 키워드를 사용하여 JSX를 반환하는데, 출력되는 UI 요소를 정의합니다.
- 컴포넌트는 독립적으로 하나의 블록을 구성하며, 다른 컴포넌트들과 조합되어 UI를 만듭니다.
💌 정리하기
- React에서 컴포넌트는 UI를 구성하는 핵심 요소입니다.
- 재사용 가능하고 모듈화된 방식으로 애플리케이션을 구성할 수 있게 해줍니다.
- 컴포넌트는 독립적으로 동작합니다.
- 다른 컴포넌트를 호출 & 조합하여 UI를 만들 수 있습니다.
- 함수형 컴포넌트는 간단한 UI를 작성할 때 매우 유용합니다.
- 컴포넌트의 규칙을 지키며 작성하면, 코드가 더 읽기 쉽고 유지보수하기 쉬워집니다.
- JSX와 CSS를 결합하여, React 애플리케이션을 빠르고 직관적으로 만들 수 있습니다.
💌 React
- React는 사용자 인터페이스(UI)를 구축하기 위한 자바스크립트 라이브러리입니다.
- 메타에서 개발했으며, 단일 페이지 애플리케이션(SPA) 개발에 주로 사용됩니다.
- React의 핵심은 컴포넌트 아키텍처입니다.
- 컴포넌트를 사용해 UI를 여러 독립적인 블록으로 나누어 개발을 진행합니다.
- 컴포넌트들은 재사용이 가능하고 유지보수가 용이합니다.
💌 React 개발 환경 설정
Vite를 사용한 개발 환경 설정
- 효율적인 자바스크립트 애플리케이션의 개발 환경을 제공하는 도구입니다.
- Vite를 사용하면 코드가 변경될 때마다 전체 애플리케이션을 다시 빌드하지 않고, 변경된 부분만 업데이트하여 빠르게 개발할 수 있습니다.
1. Vite 설치
- Vite를 이용해 React 프로젝트를 시작하려면, 다음 명령어를 사용합니다.
- 이 후, React와 자바스크립트를 선택합니다.
npm create vite@latest
2. 패키지 설치
- 프로젝트 생성 후, 다음 명령어로 필요한 패키지를 설치합니다.
npm install
3. 프로젝트 실행
- 프로젝트가 설정되면, 다음 명령어로 로컬 서버에서 애플리케이션을 실행할 수 있습니다.
npm run dev
43일차 후기
- 모듈과 컴포넌트, 리액트에 대해 조금 배웠는데 초반이라 어렵진 않았습니다.
- 리액트 부분은 캡스톤 할 때 사용해 본 경험이 있어서 이해하기 쉬웠습니다.
- 컴포넌트의 사용이나 동적 업데이트까지는 괜찮을 것 같은데 State 들어가면 헷갈리고 어렵고 난리날텐데... 벌써부터 두려운 것 같습니다ㅠㅠ ⸜( ⌓̈ )⸝
- 그래도 React 배우고 싶었으니까! 열심히 하겠습니다!! 화이팅~ ⌯˃ ᵕ ˂⌯ಣ
૮꒰ ྀི〃´꒳`〃꒱ა