React Clean Code - Props

Props

리엑트를 사용하면서 컴포넌트 단위로 코드를 분리하고 작성하다 보니 Props를 정말 많이 사용했다. 나는 3개 이상을 안넘기려고 노력했지만 코드를 짜다보면 맘같이 쉽게 되지 않았었다. 이번 글에서는 보다 나은 Props 사용법, 전달법 등을 배우고 적용해보자!

불필요한 Props 연산과 복사

Props를 전달하기 전에 복잡한 연산을 마치고 받은 상태 그대로 사용하는 것이 가장 좋다.

const Example = ({value}) => {
  return <div>{value}<div/>
}

하지만 전달 받은 Props를 조작해야 하는 상황이 존재한다. 전달 받은 Props는 컴포넌트가 렌더링 될 때마다 value라는 변수가 초기화된다. 이때 해당 Props가 런타임을 많이 잡아먹는 복잡한 함수면 변화값이 있을때마다 해당 함수가 불러지는 것이다. 이건 최악이다.

const Example = ({value}) => {
  const [example] = useState(복잡한_계산_함수(value));
  const example1 = 복잡한_계산_함수(value);
  return <div>{example}<div/>
}

따라서 useMemo를 사용해서 해당 값을 저장해 사용하면 성능 최적화에 도움이 된다.
useMemo란?

컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다.

쉽게 말해 동일한 값을 반환하는 함수를 반복적으로 호출해야한다면 처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 것이다.

const Example = ({value}) => {
  const example = useMemo(() => 복잡한_계산_함수(value),[value])
  return <div>{example}<div/>
}

이는 복잡하고 무거운 작업이 요구될때 고려할만한 상황이다. 가벼운 경우는 변수에 저장해서 사용해도 무관하다.