React Component
React 컴포넌트는 UI를 구성하는 독립적인 재사용 가능한 코드입니다. 컴포넌트는 함수형 컴포넌트 또는 클래스형 컴포넌트로 작성할 수 있으며, 이들은 UI를 정의하고, 외부 데이터(속성)와 내부 상태(state)를 관리합니다.
주요 개념
1. React 컴포넌트는 엘리먼트를 반환하는 함수
React 컴포넌트는 UI를 구성하는 독립적인 함수로, JSX 형식으로 UI 요소를 반환한다. JSX는 JavaScript와 HTML의 결합 형태로, HTML 구조를 JavaScript 코드 내에서 정의할 수 있다.
import React from 'react';
// 함수형 컴포넌트
const HelloWorld: React.FC = () => {
return <h1>Hello, World!</h1>; // JSX로 UI 반환
};
export default HelloWorld;2. 컴포넌트는 UI의 부분으로 재사용 가능
React 컴포넌트는 재사용 가능한 UI 구성 요소로 설계된다. 여러 곳에서 동일한 컴포넌트를 사용하여 UI의 일관성을 유지할 수 있다.
import React from 'react';
// 버튼 컴포넌트
const Button: React.FC<{ label: string }> = ({ label }) => {
return <button>{label}</button>;
};
// 재사용 예시
const App: React.FC = () => {
return (
<div>
<Button label="Click Me" />
<Button label="Submit" />
</div>
);
};
export default App;3. 컴포넌트는 속성(props)을 객체로 전달 받음
설명: React 컴포넌트는 props라는 객체를 통해 외부에서 전달된 데이터를 받습니다. props는 읽기 전용이며, 부모 컴포넌트에서 자식 컴포넌트로 데이터가 전달됩니다.
import React from 'react';
// props로 전달된 'name'을 사용하여 인사 메시지를 표시하는 컴포넌트
const Greeting: React.FC<{ name: string }> = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};
// 사용 예시
const App: React.FC = () => {
return <Greeting name="Alice" />;
};
export default App;4. 컴포넌트 속성의 구조분해 할당
props 객체에서 개별 속성 값을 구조분해 할당을 통해 쉽게 추출하여 사용할 수 있습니다. 이를 통해 코드의 가독성이 좋아집니다.
import React from 'react';
const Profile: React.FC<{ name: string; age: number }> = ({ name, age }) => {
return (
<div>
<h2>{name}</h2>
<p>{age} years old</p>
</div>
);
};
export default Profile;5. 컴포넌트 속성 타입을 interface로 정의
TypeScript에서는 컴포넌트의 props 타입을 interface로 정의하여, 컴포넌트의 속성 구조를 명확하게 지정할 수 있습니다. 이를 통해 코드의 안정성을 높일 수 있습니다.
import React from 'react';
// Button 컴포넌트의 props 타입을 interface로 정의
interface ButtonProps {
label: string;
onClick: () => void;
}
const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
return <button onClick={onClick}>{label}</button>;
};
export default Button;6. ...restProps를 통한 나머지 속성 추출
props 객체에서 특정 속성을 추출하고, 나머지 속성들을 ...restProps로 묶어 다른 컴포넌트에 전달할 수 있습니다. 이를 통해 불필요한 속성의 중복을 방지하고, 유연한 컴포넌트를 만들 수 있습니다.
import React from 'react';
interface ButtonProps {
label: string;
className?: string;
}
const Button: React.FC<ButtonProps> = ({ label, className, ...restProps }) => {
return (
<button className={className} {...restProps}>
{label}
</button>
);
};
export default Button;7. 컴포넌트 스타일을 className, style 속성으로 관리
React 컴포넌트에서 스타일은 className 또는 style 속성을 통해 관리됩니다. style 속성은 인라인 스타일을 설정하는 방법이며, className은 CSS 클래스를 설정할 때 사용됩니다. 이를 통해 스타일을 동적으로 처리하거나, 외부 스타일 시트를 적용할 수 있습니다.
import React from 'react';
interface ButtonProps {
label: string;
className?: string;
style?: React.CSSProperties;
}
const Button: React.FC<ButtonProps> = ({ label, className, style }) => {
return (
<button className={className} style={style}>
{label}
</button>
);
};
// 사용 예시
const App: React.FC = () => {
return <Button label="Click Me" className="btn" style={{ backgroundColor: 'blue' }} />;
};
export default App;8. TypeScript Record<keys, type> 사용 예시
Record<keys, type>은 TypeScript 유틸리티 타입으로, 객체의 키와 값의 타입을 정의할 때 사용됩니다. 이를 통해 객체의 구조를 명확하게 정의할 수 있습니다.
import React from 'react';
interface Props {
data: Record<string, number>;
}
const DataList: React.FC<Props> = ({ data }) => {
return (
<ul>
{Object.keys(data).map(key => (
<li key={key}>
{key}: {data[key]}
</li>
))}
</ul>
);
};
const App: React.FC = () => {
const data = {
item1: 10,
item2: 20,
item3: 30
};
return <DataList data={data} />;
};
export default App;