[react] 스타일가이드 작성
React는 현대적이고 유연한 프론트엔드 라이브러리로, 다양한 프로젝트에서 사용됩니다. 이 스타일가이드는 일관된 코드 작성을 촉진하고 효율적인 협업을 돕기 위해 만들어졌습니다. React 프로젝트의 개발자들은 이 스타일가이드를 준수하여 코드를 작성해야 합니다.
목차
컴포넌트 구성
React 컴포넌트는 사용하기 쉽고 재사용 가능해야 합니다. 단일 책임 원칙을 준수하여 각 컴포넌트의 역할을 명확하게 지정해야 합니다.
- 단일 책임 원칙: 각 컴포넌트는 특정한 작업 또는 기능을 수행해야 하며, 여러 가지 작업을 동시에 처리하거나 지나치게 복잡해선 안 됩니다.
예시:
// 좋은 예
function ProductCard({ name, price, image }) {
return (
<div className="product-card">
<img src={image} alt={name} />
<h3>{name}</h3>
<p>{price}</p>
</div>
);
}
// 나쁜 예
function ProductCard({ product }) {
// 여러 작업을 동시에 처리
return (
<div className="product-card">
<img src={product.image} alt={product.name} />
<h3>{product.name}</h3>
<p>{product.price}</p>
</div>
);
}
State 및 Props 사용
React 컴포넌트에서 상태(state)와 속성(props)을 올바르게 활용해야 합니다. 상태는 컴포넌트의 내부 데이터를 관리하고, 속성은 부모 컴포넌트로부터 전달받은 데이터를 나타냅니다.
- useState Hook 사용: 함수형 컴포넌트에서 상태를 관리할 때,
useState훅을 사용하여 상태를 초기화하고 업데이트해야 합니다. - 명확한 props 전달: 부모 컴포넌트에서 자식 컴포넌트로 전달하는 props는 명확하고 일관된 방식으로 사용되어야 합니다.
예시:
// 좋은 예
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
// 나쁜 예
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
this.increment = this.increment.bind(this);
}
increment() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
스타일링 패턴
React 컴포넌트의 스타일링은 일관되고 관리하기 쉽게 해야 합니다. CSS-in-JS, SASS, 또는 CSS 모듈 등의 방식으로 스타일을 구성하는데 사용하는 패턴을 정의해야 합니다.
- 재사용 가능한 스타일 구성: 컴포넌트별로 중복을 최소화하고 스타일의 재사용성을 극대화하는 방식으로 스타일을 작성합니다.
- CSS 모듈 사용: 컴포넌트의 스타일은 CSS 모듈을 활용하여 컴포넌트와 연결되도록 작성해야 합니다.
예시:
// 좋은 예
import React from 'react';
import styles from './Button.module.css';
function Button({ children, onClick }) {
return <button className={styles.button} onClick={onClick}>{children}</button>;
}
// 나쁜 예
import React from 'react';
function Button({ children, onClick }) {
return <button style={{ borderRadius: '5px', backgroundColor: 'blue' }} onClick={onClick}>{children}</button>;
}
컴포넌트 네이밍
React 컴포넌트의 네이밍은 일관되고 의미있게 정해져야 합니다. 명확하고 의미를 전달하는 네이밍 규칙을 따라야 합니다.
- 의미 있는 이름: 컴포넌트의 역할이나 기능에 따라 이름을 지어야 하며, 이름만으로도 컴포넌트의 역할을 유추할 수 있어야 합니다.
예시:
// 좋은 예
import React from 'react';
function Header() {
return <header>...</header>;
}
// 나쁜 예
import React from 'react';
function MyComponent() {
return <div>...</div>;
}
좋은 React 코드를 작성하고 유지보수성을 높이기 위해 이 스타일가이드를 엄격하게 준수해야 합니다.
참고 자료: