오늘 알아야 할 10 가지 ReactJS 전문가 팁

전문가 ReactJS 팁

React는 웹 개발자의 라이브러리에서 가장 인기있는 도구 중 하나로 성장했지만 다른 것과 마찬가지로이를 최대한 활용하려면 올바르게 사용하는 방법을 배워야합니다.

React로 어려움을 겪고 있다면 운이 좋습니다. 코드 출력을 향상시킬 필수 기술을 선택했습니다. 프레임 워크를 최대한 활용하는 방법을 알아 보려면 계속 읽으십시오. 코딩 할 필요없이 사이트를 만들고 싶습니까? 사용 웹 사이트 빌더 . 사이트의 요구 사항을 유지하는 것이 걱정된다면 괜찮은 웹 호스팅 서비스는 당신을 지원할 수 있습니다.



01. 고차 부품

구성 요소는 종종 로깅 또는 네트워크 요청과 같은 기능을 서로 공유합니다. 이 논리를 사용하는 숫자가 증가함에 따라 유지 관리가 어려울 수 있습니다. 개발자는 공유 코드를 추상화하고 필요한 곳에 포함하도록 권장됩니다.



일반 JavaScript 애플리케이션에서 고차 기능은 그것에 접근하는 한 가지 방법입니다. 요컨대, 다른 기능을 인수로 취하고 행동을 전달하는 기능입니다. 다음과 같은 배열 방법 지도필터 이들의 예입니다.

고차 구성 요소 (HOC)는 동일한 작업을 수행하는 React의 방법입니다. 전달 된 구성 요소에 동작을 전달하는 구성 요소입니다.



const Logger = WrappedComponent => ( class Logger extends Component { componentDidMount() { console.log(‘mounted’); } render() { return } } ); export default Logger(MyComponent);

여기이 예제에서 함수는 모든 소품과 함께 전달 된 원래 구성 요소를 렌더링하는 새 래핑 된 구성 요소를 반환합니다. HOC는 일반 구성 요소이며 자체 props를 전달하고 수명주기 콜백에 연결하는 등 가능한 모든 작업을 수행 할 수 있습니다. 그런 다음 함수는 내보낼 때 원본을 래핑합니다. HOC를 사용하면 일반적으로 사용되는 코드 청크를보다 쉽게 ​​유지 관리하고 테스트 할 수 있습니다. 특정 기능이 필요한 경우 쉽게 설치할 수 있으며 예상대로 작동한다는 사실을 알고 안전합니다.

02. 컨테이너 및 프레젠테이션 구성 요소

캘린더 UI

캘린더와 같은 복잡한 UI의 경우 동작이 별도로 유지되는 한 프레젠테이션 구성 요소 내에 컨테이너를 넣을 수 있습니다.

응용 프로그램의 다른 부분을 개발할 때 관심 사항을 분리하는 것이 항상 중요합니다. 가능한 경우 데이터를 가져 오는 방법을 표시되는 방식에서 멀리하십시오. React에서는 컨테이너 및 프레젠테이션 구성 요소와 관련하여 유사한 개념이 사용됩니다.



XP-Pen 아티스트 16 프로 리뷰
class ProductsContainer extends Component { [...] componentDidMount() { fetchProducts() .then(products => this.setState({products})); } render() { return ; } }

여기서 제품은 컨테이너 내부의 외부 메서드에 의해 가져 와서 자체 저장소에 보관 된 다음 프레젠테이션 구성 요소에 소품으로 전달됩니다. 제품 표시합니다.

컨테이너 구성 요소는 정보를 표시하는 방법을 모르고 정보를 가져오고 조정하는 방법 만 알고 있습니다. 마찬가지로 프레젠테이션 구성 요소는 데이터의 출처를 알지 못합니다. 두 구성 요소의 기능은 다른 구성 요소에 영향을주지 않고 변경 될 수 있습니다.

동일한 프리젠 테이션 구성 요소를 사용할 수있는 애플리케이션의 다른 섹션 또는 완전히 별도의 애플리케이션이있을 수 있습니다. props에서만 작동하도록함으로써 애플리케이션의 각 부분은 그 주위에 자체 컨테이너를 생성하기 만하면됩니다.

이 접근법은 또한 단위 테스트를 더 쉽게 만듭니다. 컨테이너 테스트는 설정되는 상태에 대해서만 걱정할 필요가 있으며, 프리젠 테이션 구성 요소는 예측 가능한 결과를 얻기 위해 정적 소품을 전달할 수 있습니다.

03. 오류 경계

프로젝트가 아무리 잘 짜여져 있어도 오류가 발생할 수 있습니다. 이는 매우 특정한 상황에서 발생할 수 있으며 진단하기 어렵고 애플리케이션을 불안정한 상태로 남겨 둘 수 있습니다. 이는 사용자와 개발자 모두에게 절대적인 악몽입니다.

React v16은 2017 년 9 월에 다시 출시되었습니다. 업데이트의 일부로 처리되지 않은 오류는 이제 전체 애플리케이션을 마운트 해제합니다. 이에 대응하기 위해 오류 경계 개념이 도입되었습니다. 구성 요소 내에서 오류가 발생하면 마운트 해제 할 응용 프로그램의 루트에 도달하거나 오류를 처리 할 구성 요소를 찾을 때까지 부모를 통해 버블 링됩니다. 오류 경계의 개념은 자식의 오류를 처리하는 일반적인 구성 요소입니다.

componentDidCatch(error, info) { this.setState({ error: error.message }); } render() { return this.state.error ? : this.props.children; }

새로운 라이프 사이클 메소드에 연결하여 오류를 상태에 저장하고 하위 컨텐츠를 대체 할 수 있습니다. 이렇게하면 애플리케이션의이 분기가 나머지에서 효과적으로 차단됩니다.

경계는 try / catch 블록처럼 작동합니다. 문제없이 서로 중첩 될 수 있지만 그 안에서 발생하는 모든 오류는 다음 경계에 의해 포착됩니다. 가능한 한 단순하게 유지하는 것이 가장 좋습니다.

04. 포털

포털의 콘텐츠는 React 내의 원래 구성 요소 안에 나타납니다.

포털의 콘텐츠는 React의 DevTools 내의 원래 구성 요소 안에 나타납니다.

구성 요소가 DOM의 다른 곳에 있기 위해 부모를 벗어나야하는 경우가 있습니다. 예를 들어 모달 창은 Z- 색인 및 위치 지정 문제를 방지하기 위해 페이지의 최상위 수준에 속합니다.

포털은 v16에도 포함되어 React가 나머지 애플리케이션과 완전히 분리 된 DOM 노드로 컴포넌트를 렌더링 할 수 있습니다. 내용은 React의 구조에서 그 자리를 유지하지만 다른 곳에서 렌더링됩니다. 이는 포털 내부에서 트리거되는 모든 이벤트가 포털 컨테이너 요소 자체가 아닌 React의 부모를 통해 버블 링된다는 것을 의미합니다.

ReactDOM.createPortal( this.props.children, document.getElementById(‘modal’), );

전용 구성 요소를 생성하면 렌더링 기능에서 포털을 반환 할 수 있습니다. 콘텐츠를 표시해야하는 경우이 구성 요소에 래핑 한 다음 다른 요소에 표시 할 수 있습니다.

05. 스타일 구성 요소가있는 CSS

기본 및 기본 Reactjs

구성 요소에는 스타일과 일치하도록 무작위로 className이 주어지며, 안타깝게도 DevTools 내에서 스타일을 변경하는 것이 더 어려워 질 수 있습니다.

재사용 가능한 구성 요소로 응용 프로그램 스타일을 지정하면 클래스 이름 충돌 문제가 발생할 수 있습니다. BEM과 같은 규칙은 문제를 완화하는 데 도움이되지만 문제보다는 증상을 치료하는 것을 목표로합니다.

구성 요소가 자체 스타일을 담당 할 수 있습니다. 즉, 인라인 스타일이나 클래스 토글 없이도 즉시 시각적 개체를 조정할 수 있습니다. 그러한 해결책 중 하나는 스타일 구성 요소 , JavaScript를 이점으로 사용합니다.

이름에서 알 수 있듯이 classNames를 만드는 대신 완전히 새로운 준비 스타일 구성 요소를 만듭니다. 시스템은 일반 CSS를 허용하고 요청 된 요소에 적용 할 수있는 ES2015 태그 템플릿 리터럴을 사용합니다.

const Button = styled.button` font-size: 2rem; background: ${props => props.primary ? ‘#3CB4CB’ : ‘white’}; `;

자리 표시자를 사용하여 스타일을 동적으로 변경할 수 있습니다. 이 예에서는 버튼이 전달되었는지 여부에 따라 버튼 배경이 변경됩니다. 일 순위 소품. 여기에서 모든 표현식을 사용하여 필요한 스타일을 계산할 수 있습니다.

생성 된 컴포넌트는 다른 것과 마찬가지로 사용할 수 있으며 모든 소품이 통과됩니다. 사용자 지정 구성 요소는 다음을 사용하여 동일한 방식으로 스타일을 지정할 수도 있습니다. styled (ComponentName) 대신.

06. React 전용 linting 사용

Visual Studio 코드

Visual Studio Code와 같은 코드 편집기는 linter와 통합 할 수 있으며 구성 요소가 작성 될 때 사용자에게 실시간 피드백을 제공 할 수 있습니다.

코드를 깨끗하게 유지하는 가장 좋은 방법 중 하나는 linter 도구를 사용하는 것입니다. 그들은 코드가 따라야 할 규칙 세트를 정의하고 실패한 곳을 강조합니다. 코드베이스로 병합하기 전에 모든 코드가 이러한 규칙을 통과하도록함으로써 프로젝트를 유지 관리 할 수 ​​있고 코드 품질이 향상됩니다.

ESLint는 다양한 JavaScript 프로젝트를위한 인기있는 린터입니다. 특정 코드 스타일을 분석하는 플러그인이 있습니다. 가장 일반적인 것 중 하나
React는 다음과 같은 npm 패키지입니다. eslint-plugin-react .

기본적으로 반복기의 키에서 완전한 소품 유형 세트에 이르기까지 규칙을 확인하는 여러 모범 사례를 확인합니다. .eslintrc 구성 파일을 업데이트하여 프로젝트별로 더 많은 옵션을 활성화 할 수 있습니다.

또 다른 인기있는 플러그인은 eslint-plugin-jsx-a11y , 접근성과 관련된 일반적인 문제를 해결하는 데 도움이됩니다. JSX는 일반 HTML과 약간 다른 구문을 제공하므로 모두 텍스트 및 tabindex 예를 들어는 일반 플러그인에서 선택되지 않습니다. 또한 할당과 같은 React 관련 문제를 선택합니다. 공기 구문이 다른 소품.

07. Jest로 스냅 샷 테스트

이다

Jest는 두 스냅 샷간에 변경된 사항을 정확히 보여 주므로 실수로 인한 의도적 변경을 식별하는 데 도움이 될 수 있습니다.

전체 테스트 범위를 갖는 것은 분명한 이점이 있지만 비용이 발생합니다. 작은 구성 요소를 많이 작성할 때 테스트는 구성 요소 자체보다 코딩하는 데 더 오래 걸릴 수 있습니다. 대부분의 경우 실제로 아무것도 변경되지 않았는지 확인하기 만하면됩니다.

Jest는 Facebook에서 만든 테스트 프레임 워크입니다. 개발자는 고유 한 기능 중 하나를 사용하여 한 시점에서 구성 요소의보기를 캡처하고 향후 변경 사항과 비교할 수 있습니다. 의도적이든 아니든 변경 사항은 수락 또는 거부로 표시됩니다. 변경된 내용을 정확히 쉽게 확인할 수있을 때 테스트는 빠르고 예측 가능하며 디버그가 간단 해집니다.

하루 만에 영화 4D 배우기
test('Button renders', () => { const button = renderer .create(Button) .toJSON(); expect(button).toMatchSnapshot(); });

테스트가 처음 실행될 때 Jest는 뷰를 JSON으로 변환하고 소스 제어에 커밋 할 수있는 특수 디렉터리에 저장합니다. 다음에 실행될 때 파일을 확인하고 차이점을 표시합니다. 의도적 인 변경 사항 인 경우 스냅 샷이 교체되고 테스트가 통과됩니다. Jest 및 스냅 샷 테스트에 대해 자세히 알아보기 .

08. 코드 분할

모든 단일 페이지 응용 프로그램과 마찬가지로 모든 것이 하나의 파일로 묶여서 확인되지 않으면 크기가 빠르게 피어 날 수 있습니다. Webpack과 같은 도구는이 번들을 관리하기 쉬운 청크로 분할 한 다음 필요에 따라 요청할 수 있습니다.

React가 더 작은 구성 요소를 많이 만들도록 장려함에 따라 번들을 분리 할 수있는 많은 기회가 있습니다. 그만큼 반응로드 가능 패키지를 사용하면 구성 요소가 렌더링에 필요한 것을 정확하게 정의 할 수 있으며 Webpack은이를 수용하기 위해 번들을 자동으로 분할 할 수 있습니다.

const LoadableButton = Loadable({ loader: () => import(‘./Button’), loading: () => Loading... , });

Loadable은 구성 요소에 필요한 모든 것을 동적으로 가져 오는 HOC입니다. 모든 것이로드되는 동안 표시 할 내용과 같은 몇 가지 설정이 필요하므로 사용자 정의가 가능합니다. LoadableButton 그런 다음 문제없이 일반 구성 요소로 사용할 수 있습니다.

라우팅이있는 대규모 애플리케이션의 경우 구성 요소 대신 경로별로 분할하는 것이 더 유용 할 수 있습니다. 하나의 요청으로 공통 경로를 가져올 수 있으며 작업 속도를 높일 수 있습니다. 번들 수와 전체 크기 사이의 균형을 유지하는 것이 중요하며 이는 애플리케이션의 필요에 따라 변경됩니다.

일러스트 레이터에서 눈물 방울 모양 만드는 법

에 대한 자세한 내용 반응로드 가능 찾을수있다 여기 .

09. 서버 렌더링

큰 응용 프로그램을 사용하면 사이트가로드되는 동안 사용자가 빈 화면을 볼 수 있습니다. 이상적으로는이 크기가 가능한 한 작아야합니다. 서버에서 초기보기를 렌더링함으로써인지 된로드 시간을 줄일 수 있으며, 이는 크롤러가 콘텐츠를보다 쉽게 ​​구문 분석 할 수 있도록하는 추가 이점과 함께 제공됩니다.

React는 이미 Node 서버에서 렌더링을 처리하도록 준비되어 있습니다. 클라이언트 측에서와 동일한 패턴을 따르는 특수 버전의 DOM 렌더러를 사용할 수 있습니다.

import ReactServer from 'react-dom/server'; import App from './App'; [...] ReactServer.renderToString();

이 메서드는 일반 HTML을 문자열로 출력 한 다음 서버 응답의 일부로 페이지 본문에 배치 할 수 있습니다. 클라이언트 측에서 React는 사전 렌더링 된 콘텐츠를 감지하고 중단 된 부분을 매끄럽게 선택합니다.

코드 분할, 라우팅 또는 상태 컨테이너를 사용하는 애플리케이션의 서버 렌더링은 더 복잡해질 수 있지만 여전히 가능합니다. 예를 들어 Redux는 서버에 미리로드 된 상태 개체를 빌드하여 저장소를 만들 때 클라이언트 측을 수화 할 수 있습니다.

10. 국제화

국제 API

Intl API는 대부분의 브라우저의 최신 버전에서 지원되며 다른 브라우저에서도 polyfill을 사용할 수 있습니다.

글로벌 웹 사이트의 경우 국제화 (i18n)는 현지 청중을 끌어들이는 데 필수적입니다. React와 같은 클라이언트 측 라이브러리의 경우 번역 및 숫자 형식 지정과 같은 작업을 처리하기 위해 느리고 부피가 큰 라이브러리를 제공하는 유일한 옵션이었습니다. 최근에는 과도한 다운로드 비용을 피하기 위해 브라우저에서 기본 Intl API를 사용할 수있게되었습니다.

Yahoo 팀의 React Intl이라는 라이브러리는이 새로운 API를 React 프로젝트에 가져 오는 데 도움이됩니다. 특수 구성 요소 세트는 문자열을 자동으로 번역하고 숫자, 날짜 및 통화 형식을 지정합니다. FormatJS라는 i18n 도구 모음의 일부를 구성합니다.

각 구성 요소는 Intl API에서 사용할 수있는 설정을 미러링하는 소품을 사용합니다. 필요한 날짜 형식을 제공함으로써 API는 브라우저의 로케일에 대해 알고있는 정보를 사용하여 문자열을 계산할 수 있습니다. 이러한 소품이 변경 될 때마다 문자열이 자동으로 업데이트됩니다.

문자열 번역에는 적절한 번역을 메시지 prop을 응용 프로그램의 루트에있는 공급자에게 전달하지만 응용 프로그램 전체에서 사용할 수 있습니다. 라이브러리는 ID를 감지하고 필요에 따라 컨텐츠를 대체합니다. 이 기능의 모든 옵션에 대한 세부 정보를 찾을 수 있습니다. 여기 . 웹 페이지의 테스트를 저장하려면 PDF로 내보내고 공유 가능한 클라우드 스토리지 .

이 기사는 원래 2018 년 호에 게재되었습니다. 그물 , 웹 디자이너와 개발자를위한 세계 베스트셀러 잡지입니다. 여기에서 구독 .

관련 기사: