1. 불필요한 Props 복사 및 연산 지양하기

하위 컴포넌트에서 값을 조작해야하는 경우

아래코드에서는 props로 받은 value 값을 무거운 연산을 통해 조작하고 있습니다.

이는 렌더링이 될 때 마다 무거운 연산을 반복하는 동작을 하게 되어 성능 측면에서 좋지 않습니다.

무거운 연산을 수행하는 경우에는 useMemo로 최적화 하는 것이 필요합니다.

function CopyProps({value}) {
	const havyCalculate = (value) => {
		//...
		return result;
	};

	const copyValue = havyCalculate(value);

	return <div>{copyValue}</div>
}

function CopyProps({value}) {
	const havyCalcutate = (value) => {
		//...
		return result;
	};

	const copyValue = useMemo(()=>havyCalcutate(value), [value]);

	return <div>{copyValue}</div>
}

반드시 컴포넌트 내부에서 props를 처리해야하지 않는 경우라면 컴포넌트 props로 오기전 미리 연산을 처리하는 것이 좋습니다.

반드시 컴포넌트 내부에서 props를 처리해야하는 경우에는 state로 처리하지 않고 변수로 처리하는 것이 좋습니다. 해당 props 값 처리에서 무거운 연산이 사용된다면 useMemo를 사용하는 것이 좋습니다.

데이터의 흐름을 끊지 않도록, props를 복사하는 행위 반드시 필요한 경우가 아니라면 하지 않는 것이 좋습니다.

2. 단축구문 Props

단축구문 Props는 똑같은 props를 한번에 간단하게 넣을 수 있습니다.

단축구문 Props는 boolean으로 넘기는 값에 유용하게 사용할 수 있습니다.

true 값이 보장되지 않는 경우에는 명시적으로 값을 넣어주어야합니다.

true 값이 보장되는 경우 값을 생략이 가능합니다.

function ShorthandProps({ isDarkMode, isLogin, ...props }) {
	return (
		<header
      className="clean-header"
		  title ="Clean Code React"
      isDarkMode = {isDarkMode}
			isLogin = {isLogin}
      isAdmin
      isFixed
		>
      <ChildCompoent {...props}/>
    </header>
	)
}