TIL 43 | React 성능 최적화

🛠️ React 성능 최적화

• 성능을 최적화하기 위한 코드는 가독성이 좋지 않고, 유지보수 더 어렵게 할 때가 있다. 성능 이슈가 크게 최적화 하도록 한다.
• DOM 조작이 CPU 리소스를 가장 많이 사용하거나 브라우저에 부하를 주기 때문에, React에서는 render 안 되게 하는 팁이 대부분 이다

✨ React에서의 좋은 코드

🧠 React로 사고하기

컴포넌트 분리

• 하나의 컴포넌트는 한 가지 일을 하는게 이상적이라는게 원칙이다.
• 하나의 컴포넌트가 커지게 된다면 이는 보다 작은 하위 컴포넌트로 분리되어야 한다.

state는 무엇일까

• props를 통해 부모로부터 전달되면 state가 아니다.
• 시간이 지나도 변하지 않으면 state가 아니다.
• 컴포넌트의 다른 state 또는 props를 기반으로 계산할 수 있으면 state가 아니다.

💡조건부 렌더링은 패턴이 아니라 가독성을 높이기 위한 팁이다.

조건부 렌더링은 and 연산자(&&), 삼항 연산자(a ? true: fasle)

• 삼항 연산자 중첩은 파악이 힘들다.
• 삼항 연산자는 요소 길이질 때가 많아서 흐름을 놓친다.
• &&도 되지 않을까 한 번더 생각하는게 좋다.

Reference

useState의 함정 - 과도하게 사용하지 않기 →(SITE)