React 당신이 알아야 할 중요한 개념

2718 단어

React 중요한 개념은 더 깨끗한 코드, 더 나은 코드를 작성하고 성능을 최적화하는 데 도움이 될 수 있습니다. 이 기사에서는 여러분이 알아야 할 5가지 React 모범 사례를 공유할 것입니다.

1. 고차 부품(HOC) 사용

고차 구성 요소는 구성 요소를 강화하고 재사용하는 데 사용되는 React의 고급 기술입니다. 구성 요소를 인수로 사용하고 다른 것을 반환합니다.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Whereas a component transforms props into UI, a higher-order component transforms a component into another component.

2. UseEffect Hook 제대로 이해하기

이것은 중요한 것 중 하나입니다. 이것을 이해하지 못하면 React에서 아무 것도 얻을 수 없기 때문입니다. 이 후크의 위험성은 아무리 강조해도 지나치지 않습니다. 이 후크와 이 후크가 usestate 후크와 어떻게 관련되어 있는지 제대로 이해해야 무한 루프가 많이 발생하지 않습니다. 저는 이 후크를 구성 요소가 초기에 렌더링된 후 실행되는 미들웨어로 생각하고 싶습니다. 이에 대해 더 자세히 이야기할 수 있지만 해당 기사를 읽고 싶다면 다음 날 팔로우하세요.

3. React에서 지연 로딩 이미지

여러 이미지는 모든 애플리케이션의 성능에 심각한 영향을 미칠 수 있습니다. 이를 압축하기 위해 모든 이미지를 한 번에 로드하지 않습니다. 지연 로딩을 사용하면 DOM에서 이미지를 렌더링하기 전에 각 이미지가 뷰포트에 나타날 때까지 기다릴 수 있습니다.

4. 동적 import()를 사용하여 React에서 코드 분할

기본적으로 React 앱은 최종 번들을 하나의 거대한 파일로 렌더링합니다. 이것의 좋은 점은 다른 파일에 대해 만들 수 있는 HTTP 요청을 줄인다는 것입니다. 하지만 앱이 커지면 파일 크기가 커지므로 심각한 문제가 됩니다. 코드 분할을 통해 React는 동적 import()를 사용하여 큰 번들 파일을 여러 청크로 분할한 다음 React.lazy를 사용하여 필요할 때 이러한 척을 지연 로드할 수 있습니다.