2020 년에 따라야 할 15 가지 모범 사례

모범 사례에 대응


인터랙티브 한 사용자 인터페이스 구축에 참여하는 프론트 엔드 개발자라면 툴킷에 React가있을 가능성이 높습니다. React 기반 제작 작업을 수행하는 동안 React 모범 사례에 따라 작업을 신중하게 수행해야합니다. 이렇게하면 코드를보다 잘 정리하는 데 도움이됩니다.

아시다시피, React는 Facebook에서 만든 라이브러리이며 많은 흥미로운 구성 요소와 통합 할 수 있습니다. 실제로 모든 개발자는 자신의 구성 요소를 만들어 커뮤니티에서 액세스 할 수 있습니다..

오늘은 주제를 살펴보고 React 베스트 프랙티스의 가장 기본 :

1. 구성 요소를 작고 기능별로 유지

우리 모두 알다시피, React를 사용하면 많은 작업을 수행하는 거대한 구성 요소를 가질 수 있습니다. 그러나 구성 요소를 디자인하는 더 좋은 방법은 구성 요소를 작게 유지하여 하나의 구성 요소가 하나의 기능에 해당하는 것입니다. 이상적으로 단일 구성 요소는 페이지의 특정 비트를 렌더링하거나 특정 동작을 수정해야합니다. 이것에는 많은 장점이 있습니다 :

  • 기능별 구성 요소는 독립형 일 수있어 테스트 및 유지 보수가 쉬워집니다..
  • 각 작은 구성 요소는 여러 프로젝트에서 재사용 할 수 있습니다.
  • 일반 기능을 실행하는 구성 요소를 커뮤니티에서 사용할 수 있습니다.
  • 구성 요소가 작을수록 성능 최적화를보다 쉽게 ​​구현할 수 있습니다.
  • 더 작은 구성 요소를 쉽게 업데이트 할 수 있습니다.
  • 더 큰 구성 요소는 더 열심히 수행해야하며 유지 관리가 어려울 수 있습니다.

하나의 간결한 구성 요소를 만드는 것과 여러 기능별 구성 요소를 만드는 것의 균형은 조직마다 다를 수 있습니다. 결국, 원하는 수만큼의 구성 요소를 가질 수 있으며 동일한 최종 결과를 달성하려는 방식으로 구성 요소를 다시 결합 할 수 있습니다.

♻️ 2. 재사용 성이 중요하므로 필요한 최소 구성 요소로 새 구성 요소를 작성하십시오

하나의 기능 = 하나의 구성 요소 규칙을 고수함으로써 구성 요소의 재사용 성을 향상시킬 수 있습니다. 이것이 의미하는 바는 해당 함수에 대한 컴포넌트가 이미 존재하는 경우 함수의 새 컴포넌트 빌드를 건너 뛰어야한다는 것입니다..

프로젝트 전체 또는 여러 프로젝트에서 컴포넌트를 재사용함으로써 일관성을 확보 할뿐만 아니라 커뮤니티에 기여할 수 있습니다.

반면에 어떤 구성 요소가 거대하고 다루기 어려워 유지 관리하기 어려운 경우에는 필요한만큼 작은 구성 요소로 나누는 것이 좋습니다.

예를 들어, 더 나아가서 아이콘을 처리 할 수있는 Button 구성 요소를 만들 수도 있습니다. 그런 다음 버튼이 필요할 때마다 사용할 구성 요소가 있습니다. 더 모듈화하면 동일한 코드로 많은 경우를 처리 할 수 ​​있습니다. 당신은 중간 어딘가를 목표로해야합니다. 구성 요소는 충분히 추상적이어야하지만 지나치게 복잡해서는 안됩니다.

IconButton 클래스는 React.Component {
[…]
render () {
반품 (

);
}
}

duplicate 3. 중복 코드 통합 – 코드를 건조하십시오

모든 코드의 일반적인 규칙은 가능한 한 짧고 간결하게 유지하는 것입니다.

React 모범 사례는 코드를 간단하고 정확하게 유지하도록 지시하기 때문에 여기에서도 마찬가지입니다. 이를 수행하는 한 가지 방법은 중복을 피하는 것입니다 – 반복하지 마십시오 (건조).

패턴과 유사성에 대한 코드를 면밀히 조사하여이를 달성 할 수 있습니다. 코드를 찾으면 코드를 반복 할 가능성이 있으며 중복을 제거 할 수있는 범위가 있습니다. 아마도 약간의 재 작성이 더 간결해질 수 있습니다..

이것은 React의 재사용 성 원칙에 크게 의존합니다. 각 버튼에 마크 업을 추가하는 대신 아이콘이 포함 된 여러 버튼을 추가하려고한다고 위에서 위에서 설명한 IconButton 구성 요소를 사용하면됩니다. 모든 것을 배열로 매핑하여 더 나아갈 수도 있습니다..

const 버튼 = [ ‘facebook’, ‘twitter’, ‘youtube’];

반품 (

{
buttons.map ((버튼) => {
반품 (

);
})
}

);

�� 4. JavaScript를 CSS에 넣습니다

프로젝트 작업을 시작할 때 모든 CSS 스타일을 단일 SCSS 파일로 유지하는 것이 일반적입니다. 전역 접두사를 사용하면 잠재적 인 이름 충돌을 방지 할 수 있습니다. 그러나 프로젝트가 확장되면이 솔루션을 사용하지 못할 수 있습니다..

JS에서 CSS를 작성할 수있는 많은 라이브러리가 있습니다. 감정 JS화려 함 JS 라이브러리에서 가장 인기있는 두 CSS.

다음은 프로젝트에서 EmotionJS를 사용하는 예입니다. EmotionJS는 프로덕션을위한 완전한 CSS 파일을 생성 할 수 있습니다. 먼저 npm을 사용하여 EmotionJS를 설치하십시오..

npm 설치[email protected] emotion / core 저장

다음으로 애플리케이션에서 EmotionJS를 가져와야합니다..

‘@ emotion / core’에서 {jsx} 가져 오기

아래 스 니펫에 표시된대로 요소의 속성을 설정할 수 있습니다.

컴포넌트 = 소품 => {
반품 (

)
}

여기에 완전한 링크가 있습니다 EmotionJS의 문서.

�� 5. 필요한 경우에만 의견을 말하십시오

필요한 경우에만 코드에 주석을 첨부하십시오. 이것은 React 모범 사례를 유지하는 것뿐만 아니라 동시에 두 가지 목적을 제공합니다.

  • 코드를 시각적으로 깔끔하게 유지합니다..
  • 나중에 코드를 변경하면 주석과 코드 사이에 잠재적 인 충돌이 발생하지 않습니다..

�� 6. 기능 이름을 따서 구성 요소 이름 지정

쉽게 인식 할 수 있도록 실행 된 기능 뒤에 구성 요소의 이름을 지정하는 것이 좋습니다.

예를 들어 ProductTable – 구성 요소의 기능을 즉시 전달합니다. 반면에 코드의 필요성에 따라 구성 요소의 이름을 지정하면 나중에 혼란을 줄 수 있습니다.

또 다른 예로, 작성자, 사용자 또는 주석 등 어느 곳에서나 사용할 수 있도록 구성 요소 아바타의 이름을 지정하는 것이 좋습니다. 대신 사용 맥락에서 구성 요소의 이름을 AuthorAvatar로 지정하면 해당 구성 요소의 유틸리티가 제한됩니다..

또한 기능 다음에 구성 요소 이름을 지정하면 발견 될 가능성이 높아 커뮤니티에 더 유용합니다..

�� 7. 구성 요소 이름에 대문자 사용

대부분의 사람들과 마찬가지로 JSX (JavaScript 확장)를 사용하는 경우 생성하는 구성 요소 이름은 대문자로 시작해야합니다. 예를 들어 구성 요소의 이름을 selectbutton 대신 SelectButton으로 지정하거나 메뉴 대신 Menu로 지정합니다. JSX가 기본 HTML 태그와 다르게 식별 할 수 있도록이를 수행합니다..

이전 React 버전은 모든 내장 이름 목록을 유지하여 사용자 정의 이름과 구별했습니다. 그러나 목록이 지속적으로 업데이트되어야했기 때문에, 그것은 폐기되었고 자본은 표준이되었습니다..

JSX가 선택한 언어가 아닌 경우 소문자를 사용할 수 있습니다. 그러나 이로 인해 프로젝트 이외의 구성 요소의 재사용 성이 떨어질 수 있습니다..

�� 8. 다른 명명 규칙에 유의하십시오.

React로 작업 할 때는 일반적으로 JSX (JavaScript Extension) 파일을 사용합니다. 따라서 React 용으로 생성 한 모든 컴포넌트는 파스칼 케이스 또는 대문자 카멜 케이스로 이름이 지정되어야합니다. 이것은 공백이없는 이름으로 번역되며 모든 단어의 첫 글자를 대문자로 표시합니다.

양식을 제출하는 함수를 작성하려면 submitForm, submit_form 또는 submit_form이 아니라 대문자 낙타로 이름을 SubmitForm으로 지정해야합니다. 어퍼 낙타 케이스는 파스칼 케이스라고합니다. 여기 더 있습니다 예제 목록 파스칼 경우 변수 및 함수 이름.

�� 9. 상태 저장 측면을 렌더링에서 분리

React의 컴포넌트는 Stateful 또는 Stateless 일 수 있습니다. 상태 저장 구성 요소는 구성 요소의 상태에 대한 정보를 저장하고 필요한 컨텍스트를 제공합니다. 반대로 상태 비 저장 구성 요소에는 메모리가 없으며 UI의 다른 부분에 컨텍스트를 제공 할 수 없습니다. 부모 구성 요소에서 소품 (입력) 만 받고 JSX 요소를 반환합니다. 확장 가능하고 재사용 가능하며 JavaScript의 순수한 기능과 유사합니다..

React 모범 사례 중 하나는 상태 저장 데이터로드 로직을 렌더링 상태 비 저장 로직과 별도로 유지하는 것입니다. 데이터를로드하기위한 상태 저장 구성 요소 하나와 해당 데이터를 표시하기위한 상태 비 저장 구성 요소 하나를 갖는 것이 좋습니다. 이것은 구성 요소의 복잡성을 감소시킵니다.

최신 React 버전 v16.8에는 상태 저장 기능 관련 구성 요소를 작성하는 새로운 기능인 React Hooks가 있습니다. 결국 클래스 기반 구성 요소가 필요하지 않을 수 있습니다.

예를 들어 앱이 탑재시 일부 데이터를 가져오고 있습니다. 주요 컴포넌트에서 데이터를 관리하고 복잡한 렌더링 작업을 소품으로 하위 컴포넌트에 전달하는 것입니다..

‘./RenderTable’에서 RenderTable 가져 오기;

클래스 테이블은 {
상태 = {로딩 : true};

render () {
const {loading, tableData} = this.state;
반품 로딩? :;
}

componentDidMount () {
fetchTableData (). then (tableData => {
this.setState ({loading : false, tableData});
});
}
}

10. 코드는 예상대로 실행되고 테스트 가능해야합니다.

실제로이 규칙은 설명이 필요 없습니다. 작성하는 코드는 예상대로 작동하고 쉽고 빠르게 테스트 할 수 있어야합니다. 테스트 파일 이름을 .test 접미사를 사용하여 소스 파일과 동일하게 지정하는 것이 좋습니다. 그러면 테스트 파일을 쉽게 찾을 수 있습니다.

JEST를 사용하여 React 코드를 테스트 할 수 있습니다.

�� 11. 하나의 구성 요소와 관련된 모든 파일은 단일 폴더에 있어야합니다

스타일링 파일을 포함하여 하나의 구성 요소와 관련된 모든 파일을 단일 폴더에 보관.

특정 구성 요소에서만 사용하는 작은 구성 요소가있는 경우 이러한 작은 구성 요소를 모두 해당 구성 요소 폴더 내에 유지하는 것이 좋습니다. 그러면 계층 구조를 쉽게 이해할 수 있습니다. 큰 구성 요소에는 자체 폴더가 있으며 모든 작은 부분은 하위 폴더로 분할됩니다. 이런 식으로 다른 프로젝트에 코드를 쉽게 추출하거나 원하는 때에 코드를 수정할 수 있습니다.

예를 들어, Form 구성 요소의 경우 CSS 파일, 아이콘, 이미지, 테스트 및 Form과 관련된 다른 하위 구성 요소와 같은 모든 부분은 모두 동일한 폴더에 있어야합니다. 현명하게 파일 이름을 지정하고 관련 파일을 논리적으로 함께 보관하면 나중에 파일을 찾는 데 어려움이 없습니다.

�� 12. 비트와 같은 도구 사용

모든 React 구성 요소를 구성하는 데 도움이되는 React 모범 사례 중 하나는 다음과 같은 도구를 사용하는 것입니다. 비트.

이 도구는 코드를 유지하고 재사용하는 데 도움이됩니다. 그 외에도 코드를 검색 할 수있게하고 구성 요소를 구축 할 때 팀 협업을 촉진합니다. 또한 코드를 프로젝트간에 동기화 할 수 있습니다.

�� 13. 스 니펫 라이브러리 사용

코드 스 니펫을 사용하면 가장 최신 구문을 유지할 수 있습니다. 또한 코드에 상대적으로 버그가없는 상태를 유지하는 데 도움이되므로 이것은 놓칠 수없는 React 모범 사례 중 하나입니다..

ES7 React, Redux, JS Snippets 등 사용할 수있는 많은 스 니펫 라이브러리가 있습니다..

✍️ 14. 모든 코드에 대한 테스트 작성

모든 프로그래밍 언어에서 적절한 테스트를 수행하면 프로젝트에 추가 된 새 코드가 기존 코드와 잘 통합되고 기존 기능이 손상되지 않습니다. 생성 한 새 구성 요소에 대한 테스트를 작성하는 것이 좋습니다. 모범 사례로서, 모든 관련 테스트를 수용 할 수 있도록 구성 요소 디렉토리 내에 __Test__ 디렉토리를 만들어야합니다.

React의 테스트는 크게 React 앱을 사용하여 컴포넌트의 기능 테스트와 브라우저에서 렌더링되면 전체 애플리케이션에서 테스트하는 두 부분으로 나눌 수 있습니다. 후자의 범주에서 테스트하기 위해 크로스 브라우저 테스트 도구를 사용할 수 있습니다.

전자의 경우 JavaScript 테스트 러너를 사용할 수 있습니다, 농담 jsdom을 사용하여 React 구성 요소를 테스트하여 HTML DOM을 에뮬레이션합니다. 실제 장치의 브라우저에서만 완벽하게 정확한 테스트를 수행 할 수 있지만 Jest는 프로젝트 개발 단계에서 실제 테스트 환경에 대한 근사치를 제공합니다..

�� 15. 보푸라기 규칙을 따르고 너무 긴 줄을 끊습니다.

Linting은 잠재적 오류에 대한 코드를 분석하는 프로그램을 실행하는 프로세스입니다..

대부분 언어 관련 문제에 사용합니다. 그러나 다른 많은 문제, 특히 코드 스타일을 자동으로 해결할 수도 있습니다. React 코드에서 린터를 사용하면 코드를 비교적 오류없이 버그없이 유지할 수 있습니다.

React 모범 사례에 대한 최종 단어

이 React 모범 사례 목록을 통해 프로젝트를 올바르게 진행하고 나중에 문제가 발생할 가능성을 피할 수 있기를 바랍니다..

React 관련 질문이 있으면 아래 의견에 자유롭게 제출하십시오..

WordPress 사이트 속도를 높이기위한 충돌 과정에 참여하는 것을 잊지 마십시오. 몇 가지 간단한 수정으로로드 시간을 50-80 % 줄일 수 있습니다.

Andrei Băicuș의 코드 예제. Shaumik Daityari의 컨텐츠 업데이트

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map