함수형 컴포넌트를 작성할 때 성능과 퍼포먼스 관점에서 주의해야 하는 원칙들

불필요한 렌더링을 방지

• 불필요한 렌더링은 컴포넌트의 상태나 props가 변경되었을 때 해당 컴포넌트와 하위 컴포넌트들이 다시 렌더링 되는 것을 의미합니다.
• 이를 방지하기 위해서는 React.memo를 사용하거나, shouldComponentUpdate와 같은 라이프사이클 메서드를 사용해 렌더링을 조건부로 수행할 수 있습니다.

상태나 props를 변경할 때는 불변성을 유지해야 합니다.

• 불변성을 유지하면 React가 컴포넌트 간 차이를 효율적으로 파악할 수 있습니다. 이를 통해 필요한 부분만 렌더링하고 불필요한 렌더링을 방지할 수 있습니다.
• 객체나 배열을 변경할 때는 spread 연산자나 Object.assign 등을 사용해 새로운 객체나 배열을 생성해야 합니다.

효율적으로 이벤트 처리를 해야 합니다.

• 이벤트 처리 함수를 최대한 간결하게 작성하고, 바인딩하는 과정에서 성능 문제가 발생하지 않도록 주의해야 합니다.
• useCallback과 같은 최적화 도구를 사용하면 이벤트 처리 함수의 성능을 개선할 수 있습니다.

JSX 코드를 최적화해야 합니다.

• JSX 코드에서 불필요한 렌더링을 방지하고, 반복문을 최적화하거나, 인라인 스타일을 사용하지 않는 등의 최적화를 수행해야 합니다.