Doyeon

발표자료

클린코드 리액트(React) (opens in a new tab) 강의를 보고 정리한 내용입니다.

1. 불필요한 props 복사 및 선언

하위 컴포넌트에서 props를 조작해야 하는 경우 useState 보다는 useMemo 사용을 추천한다.

❌
function component({ value }) {
	const [copyValue] = useState(무거운_연산(value));
	
	return <div>{copyValue}</div>;
}
 
❌
function component({ value }) {
	const copyValue = 무거운_연산(value);
	
	return <div>{copyValue}</div>;
}

⭕️
function component({ value }) {
	const copyValue = useMemo(() => 무거운_연산(value), [value]);
	
	return <div>{copyValue}</div>;
}

2. 중괄호 Curly Braces

JSX에서 속성을 따옴표 안에 넣었을 때 문자열로 들어간다.

값이 계산되는 부분은 중괄호 안에 들어가야 한다.

<Image
	alt={"image"}
	src="image.jpg"
	style={{ width: 100 }}
	className="clean-dev"
/>

function CurlyBraces() {
	const styles = {
		backgroundColor: 'blue',
		width: 1000
	}
	
	return (
		<header
			className="clean-header"
			style={styles}
		>
	)
}

{{}} 는 객체를 인라인으로 집어넣었다고 생각하면 된다.

3. 단축구문 Props (Shorthand props)

spread operator를 활용하여 props를 축약할 수 있다.

❌
function component(props) {
	<HeaderComponent 
		hasPadding={props.hasPadding} 
		isAdmin={true}
	>
		<ChildComponent isDarkMode={props.isDarkMode} isLogin={props.isLogin} />;
	</HeaderComponent>
}
 
⭕️
function component({ hasPadding, ...props }) {
	<HeaderComponent 
		hasPadding={hasPadding} 
		isAdmin
	>
		<ChildComponent {...props} />;
	</HeaderComponent>
}

4. 쌍따옴표 vs 홀따옴표 (Single Quotes vs Double Quotes)

⭕️
<a href="https://www.naver.com">naver</a>
 
❌
const obj = {
	hello: 'world'
}
<input class='ccc' type="button" value='clean code' />
<Clean style={{ backgroundPosition: "left" }} />

5. 알아두면 좋은 Props 네이밍

props는 카멜케이스로 작성한다.

리액트에서 컴포넌트는 파스칼케이스(PascalCase)로 시작한다.

 
❌
<ChildComponent
	class="mt-0"
	Clean="code"
	clean_code="react"
	otherComponent={OtherComponent}
	isShow={true}
/>
 
⭕️
<ChildComponent
	className="mt-0"
	clean="code"
	cleanCode="react"
	OtherComponent={OtherComponent}
	isShow
/>

6. 인라인 스타일 주의하기

style안의 키 값은 카멜케이스로 작성하고, 객체이기 때문에 {{}} 안에 넣어줘야 한다.

 
❌
<button style="backgrount-color: red; font-size: '14px'">
	Clean Code
</button>
 
⭕️
<button style={{ backgrountColor: 'red', fontSize: '14px' }}>
	Clean Code
</button>

const MyButtonStyle = {
	warning: { backgroundColor: 'yellow', fontSize: '14px' },
	danger: { backgroundColor: 'red', fontSize: '14px' },
}
 
function InlineStyle() {
	return (
		<>
			<button style={MyButtonStyle.warning}>warning button</>
			<button style={MyButtonStyle.danger}></>
		</>
	)
}

7. CSS in Js 인라인 스타일 지양하기

❌
export function Card({ title, children }) {
	return (
		<div 
			css={css`
				background-color: white;
				border: 1px solid #eee;
				border-radius: 0.5rem;
				padding: 1rem;
			`}
		>
			<h5
				css={css`
					font-size: 1.25rem
				`}
			>
			{title}
			</h5>
			{children}
		</div>
	)
}
 
⭕️
const cardCss = {
	self: css({
		backgroundColor: 'white',
		border: '1px solid #eee',
		borderRadius: '0.5rem',
		padding: '1rem'
	})
	title: css({
		fontSize: '12px',
	})
}
export function Card({ title, children }) {
	return (
		<div css={cardCss.self}>
			<h5 css={cardCss.title}>
			{title}
			</h5>
			{children}
		</div>
	)
}

장점

외부로 분리했기 때문에 스타일 렌더링 될 때마나 직렬화되지 않는다. ⇒ 한번만 된다.
동적인 스타일을 실수로 건드는 확률이 적어진다.
스타일 관련 코드를 분리해서 로직에 집중하고 JSX를 볼 때 조금 더 간결하게 볼 수 있다.

김호준 김연수