React의 7가지 팁과 요령

TypeScript 사용

리액트에 대해서만 이야기하든 다른 라이브러리에 대해서만 이야기하든 타입스크립트를 사용하면 코드 정리했습니다. 다음을 비교해 보겠습니다. 자바스크립트 대 소품 유형을 다루는 타입스크립트.

'prop-types'에서 PropTypes 가져오기

함수 UserCard({ user }) {
return

{user.firstname}, {user.lastname}

}

UserCard.propTypes = {
user: PropTypes.shape({
이름: PropTypes.string.isRequired,
성: PropTypes.string.isRequired
...
})
}

함수 UserList({ users }) {
return

{users.map((user) => )}

}

UserList.propTypes = {
users: PropTypes.arrayOf(PropTypes.shape({
이름: PropTypes.string.isRequired,
성: PropTypes.string.isRequired
...
}))
}

인터페이스 사용자 {
이름: 문자열!
성: 문자열!
...
}

함수 UserCard({ user }: { user: User }) {
return

{사용자.이름}, {사용자.성}

}

함수 UserList({ users }: { users: User[] }) {
return

{users.map((user) => )}

모든 데이터 스키마를 한 곳에 인터페이스로 두고 나머지 코드에서 모두 재사용한다고 상상해 보세요. 이렇게 하면 입력 실수를 방지할 수 있을 뿐만 아니라 스키마를 변경하려는 경우에도 한 곳에서만 변경할 수 있습니다.

그 외에도 많은 잘 알려진 자바스크립트 라이브러리들이 타입스크립트로 마이그레이션되고 있습니다: AdonisJS

프레젠테이션 및 컨테이너 구성 요소 분리

프레젠테이션 컴포넌트와 컨테이너 컴포넌트를 분리하면 코드를 테스트하고 추론하기가 더 쉬워집니다.

프레젠테이션 구성 요소 의 관심사는 다음과 같습니다. 어떻게 보이는지. 이는 데이터 및 행동 를 부모 컴포넌트로부터 가져옵니다.

컨테이너 구성 요소 의 관심사는 다음과 같습니다. 작동 방식. 그들은 다음을 제공합니다. 데이터 및 행동 를 프레젠테이션 또는 기타 컨테이너 구성 요소에 추가합니다.

이 접근 방식을 사용하면 데이터와 동작이 다른 동일한 프레젠테이션 컴포넌트를 재사용할 수 있습니다. 또한 코드가 더 깔끔해지고 테스트하기가 훨씬 쉬워집니다.

서로 다른 데이터와 동작을 제공하는 여러 컨테이너와 함께 사용되는 사용자 컴포넌트의 다음 예시를 확인하세요.

함수 BuyerContainer() {
return
}

function SellerContainer() {
return
}

function UserComponent({ name, onClick }) {
return

}

React Hook과 함수형 컴포넌트 사용 "이전에 상태 없는 컴포넌트라고 불렸던" 함수형 컴포넌트는 더 이상 상태가 없습니다. 이제 React Hook 덕분에 State 훅을 사용하여 상태를 함수형 컴포넌트에 저장하거나, useEffect를 사용하여 컴포넌트 수명주기를 사용할 수 있습니다. 함수형 컴포넌트는 읽고 테스트하기 쉽습니다. React 코어에는 Hook 참조에서 살펴볼 수 있는 다른 유용한 후크가 있습니다. 놀라운 점은 사용자 정의 훅을 정의할 수도 있다는 것입니다. 다음 예제에서는 사용 디바운스라는 커스텀 리액트 훅을 만들었습니다. 이 훅은 입력 텍스트가 변경될 때 자동 완성 API 호출을 제한하는 데 사용됩니다.

'react'에서 { useEffect }를 임포트합니다;
'lodash'에서 { debounce }를 가져옵니다;
export default 함수 useDebounce( fn, delay = 500 ) {
const debounced = useMemoOne( () => debounce( fn, delay ), [
fn,
delay,
] );
useEffect( () => () => debounced.cancel(), [ debounced ] );
반환 디바운스;
}
기본 함수 SearchComponent() 내보내기
const fetchAutoComplete = useDebounce((e) => {
      // API 불러오기 (선택 사항)
}, 1000) // 1초

반환 (

{...}
)
}

그 외에도 React 후크는 상위 컴포넌트(HoC)를 대체할 수 있습니다. 스타일 컴포넌트 스타일 컴포넌트는 컴포넌트 수준에서 동적 CSS를 도입할 수 있는 라이브러리입니다. ES의 장점을 활용하면서. 컴포넌트의 예측 가능성과 재사용성을 높여줍니다. 더 이상 요소에 적합한 클래스 이름을 찾느라 시간을 낭비하거나 기존 이름을 사용하지 않으려고 애쓰지 않아도 됩니다. 스타일 컴포넌트를 사용하면 빌드 단계에서 컴포넌트와 자동 생성된 클래스 이름에 스타일이 적용되도록 할 수 있습니다. 컴포넌트에 전달된 프로퍼티에 따라 스타일이 생성되므로 동적 CSS를 만드는 것이 그 어느 때보다 쉬워졌습니다. 다음 예제에서 div 스타일은 윤곽이 잡힌 소품과 글로벌 테마에 따라 달라집니다.

const Wrapper = styled.div`

  테두리: ${props => props.outlined ? '1px solid' : 'none'};

    background: ${props => props.theme.light ? '검정' : '흰색'}

스타일 컴포넌트의 마지막 요점은 사용하지 않는 컴포넌트의 불필요한 스타일을 로드하지 않음으로써 성능을 향상시킨다는 것입니다. 슬롯 채우기 라이브러리 리액트 앱의 레이아웃을 정의한 다음 특정 페이지에 대해서만 사이드바에 위젯을 추가하고 싶다고 가정해 봅시다. 처음부터 이 경우를 고려하지 않았다면 레이아웃을 크게 변경해야 할 수 있습니다. 하지만 ‣와 같은 라이브러리를 사용하면 사이드바에 슬롯을 정의할 수 있습니다. 그런 다음 해당 슬롯을 특정 페이지에 대한 위젯으로만 채우면 사이드바에 액세스하기 위해 컴포넌트 트리를 따라 플래그를 전달하지 않아도 됩니다. 모달, 툴팁...과 같은 경우에도 훌륭한 솔루션인 React 포털과 유사한 동작을 합니다.

'react-slot-fill'에서 { Slot, Fill, Provider }를 임포트합니다;
const Sidebar = (props) =>
 
기본 툴바를 내보냅니다;
Sidebar.Item = (props) => =>

{ props.label }
const 위젯 = () => =>
[

];
const Page = ({children}) => =>

{children}

const HomePage = () => =>

와이드젯이 없는 페이지
const DashboardPage = () => =>

와이드젯이 있는 페이지

상위 컴포넌트 React 후크가 대부분의 경우 HOC를 대체하더라도. 페이지 컴포넌트에 여러 소품을 제공하거나 조건부 렌더링(비공개 경로, 로딩 상태 등)과 같은 컴포넌트의 복잡성을 숨기는 데는 여전히 HoC가 적합합니다. 다음 예시는 비공개 경로와 페이지 공통 소품의 복잡성을 모든 애플리케이션 페이지에 적용되는 재사용 가능한 HoC로 캡슐화할 수 있는 방법을 설명합니다. 대부분의 HoC 사례는 React Hook으로 대체할 수 있으며, 실수로 구성된 HoC로 소품을 재정의할 수 있다는 점을 유념하세요. 따라서 페이지 컴포넌트를 깔끔하게 유지하기 위해 필요한 경우에만 HoC를 사용하고, 그렇지 않은 경우에는 React Hook을 사용하시기 바랍니다.

함수 withPrivateRoute(Component) {
...
반환 함수 PrivateRoute(props) {...
if (!userConnected) return ;
return ;
};
}
function withPageProps(Component) {
...
return function privateRoute(props) {
return ;
};
}
function ProfilePage({ navigation, currentPath, currentUser}) {
return
프로필 페이지
}
export default withPrivateRoute(withPageProps(ProfilePage))

오류 경계 오류 경계는 클래스 구성 요소로, 하위 수준에서 발생하는 모든 오류/예외를 포착합니다. 최상위 수준에서 선언하면 오류 메시지를 표시하고 Sentry와 같은 플랫폼 모니터링 도구에 오류를 로깅하여 적절한 오류 처리를 수행할 수 있습니다. 이렇게 하면 사용자 경험에 영향을 미치기 전에 오류를 가장 먼저 포착하고 오류를 수정할 수 있습니다. 참고: 함수형 컴포넌트를 지원하지 않는 클래스에서 ErrorBoundaries를 선언해야 합니다.

ErrorBoundary 클래스는 React.Component를 확장합니다 {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
반환 { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToMySentry(error, errorInfo);
}
render() {
if (this.state.hasError) {
return
뭔가 잘못되었습니다! 관리자에게 연락
;
}
this.props.children를 반환합니다;

}
}