개발자가 저지른 10가지 오류

작성자 Ogundipe Samuel✏️
React 응용 프로그램을 개발하는 개발자들 중 일부 오류는 이미 매우 흔하게 변했다.이러한 오류는 부주의, 마지막 기한 전에 임무를 완성해야 한다는 압력 또는 React/JavaScript 경험이 부족하기 때문일 수 있습니다.
본고에서 개발자가 React 응용 프로그램을 구축할 때 자주 범하는 10개의 오류를 요약하겠습니다.비록 우리는 이 강좌에서 React를 사용하지만, 여기서 토론하는 대부분의 기술은 다른 프레임워크에 응용될 수 있다.
주의: 이 글은 당신이 이해하고 과거에 React를 사용한 적이 있다고 가정합니다.React 사용 경험이 없는 경우 문서 here 를 참조하여 사용할 수 있습니다.

1. 충분한 구성 요소를 만들지 못했습니다.

개발자들이 자주 범하는 오류 중 하나는 그들이 충분한 구성 요소를 만들지 않았다는 것이다.
일반적으로 두 가지 응용 프로그램을 작성하는 방법은 모든 내용을 한 곳에 두거나 (전체) 모든 내용을 더 작은 부분으로 나누는 것이다.
설계에 따라 React 응용 프로그램은 구성 요소화되어야 한다.다음 모델을 고려합니다.

React를 사용하여 이 대시보드를 올바르게 구축하려면 전체 페이지 자체가 아니라 페이지를 구성하는 구성 요소로 간주해야 합니다.
이렇게 하면 우리는 서로 다른 구성 요소 집합을 만들 수 있는데, 이 구성 요소들이 한데 모여 전체 페이지를 구성할 수 있다.
이 기술은 당신의 시간을 절약할 뿐만 아니라, 디버깅을 할 때도 많은 압력을 절약할 수 있습니다. 왜냐하면 어떤 구성 요소가 모든 오류와 관련이 있는지 바로 알 수 있기 때문입니다.

2. 구성 요소에 논리 쓰기

재사용 가능한 구성 요소를 만드는 적당한 방법을 찾을 때, 표시와 용기 구성 요소 생성 모드는 일반적으로 가장 먼저 나타나는 모드 중 하나입니다.
구성 요소는 사물의 외관과 관련이 있고 용기 구성 요소는 사물의 작업 방식과 관련이 있다.
React 프로그램에서 태그와 응용 프로그램 논리가 구성 요소에 융합된 것을 나타내는 흔한 오류를 볼 수 있습니다.
이 방법의 단점은 복사와 붙여넣기를 하지 않으면 어떤 구성 요소나 논리도 쉽게 다시 사용할 수 없다는 것이다.
표시와 창설 모드를 사용하면 표기와 논리의 중용성을 더욱 쉽게 실현할 수 있다.비헤이비어에 영향을 주지 않고 UI를 변경할 수도 있습니다.
다음 구성 요소를 고려합니다.
이것은 도구로부터 데이터를 받아 표시하는 데 사용되는 책 구성 요소입니다.그것은 표현 성분이다.

const Books = props => (
  <ul>
    {props.books.map(book => (
      <li>{book}</li>
    ))}
  </ul>
)

이 books 구성 요소는 자신의 데이터를 관리하고 저장하며, 위의 표시 구성 요소 books를 사용하여 표시합니다.

class BooksContainer extends React.Component {
  constructor() {
    this.state = {
      books: []
    }
  }

  componentDidMount() {
    axios.get('/books').then(books =>
      this.setState({ books: books }))
    )
  }

  render() {
    return <Books books={this.state.books} />
  }
}

3. 변이 상태 변수

돌연변이란 어떤 사물을 바꾸는 능력을 가리킨다.다음 상태를 고려하십시오.

const person = {
   name : "John",
   sex  : "Male",
}

응용 프로그램의 어느 순간에 새 변수를 만들고 person 대상을 할당하고 변경하려는 경우 결과에 놀랄 수 있습니다.

const newPerson = person

newPerson.name = "Jane"
newPerson.sex  = "Female"

person 및 newPerson 객체를 기록하려고 하면 두 객체가 현재 설정된 최신 값을 반영하고 있음을 알 수 있습니다.
이것은 통상적으로 심상치 않은 구성 요소 행위를 설명할 수 있다.이 문제를 해결하려면 .slice() 방법 또는 ES6 spread operator 을 사용할 수 있다.
그러나 가장 좋은 방법은 불변성이다.React 팀에서 권장하는 Immutable.js 및 immutability-helper 을 직접 사용할 수도 있습니다.

4. 절대 경로를 사용하지 않음

많은 구성 요소, 이미지, CSS 파일 및 다른 파일을 포함하는 React 프로그램을 사용한 적이 있다면, 다른 디렉터리에서 파일을 가져오는 것에 동의할 것입니다.이러한 파일을 가져오는 경우가 많습니다.

../../../importone.js
../../../importtwo.js

파일 디렉터리를 변경하면 가져오는 데 실패할 수 있습니다.Create React App 3가 발표됨에 따라 절대 가져오기 경로를 사용할 수 있습니다.
이렇게 하려면 루트 디렉토리에 다음을 포함하는 jsconfig.json 파일을 만듭니다.

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

이제 다음과 같이 파일을 가져올 수 있습니다.

import React from 'react';
import { LINKS } from 'helpers/constants';
import Button from 'components/Button/Button';

function App() {
  return (
    <>
      <Button>
        This is my button
      </Button>

      <a href={LINKS.ABOUT}>About Us</a>
    </>
  );
}
export default App;

이것은 더욱 깨끗할 뿐만 아니라, 파일 위치를 변경한 후에 코드의 경로를 업데이트할 필요가 없다는 것을 의미한다.CRA V3here에 대한 자세한 내용을 확인하십시오.

5. 목록 구성 요소에서 키를 사용하지 않음

우리는 자주 프로젝트 목록을 보여야 하는 상황을 만난다.코드는 다음과 같습니다.

const lists = ['one', 'two', 'three'];

render() {
  return (
    <ul>
      {lists.map(listNo =>
        <li>{listNo}</li>)}
    </ul>
  );
}

작은 응용 프로그램에 효과가 있을 수 있습니다.그러나 대형 목록을 처리할 때 목록에서 항목을 수정하거나 삭제하려고 할 때 렌더링 문제가 발생합니다.
React는 DOM의 각 목록 요소를 추적합니다.그것이 없으면 목록 항목에 어떤 변화가 생겼는지 모른다.이 문제를 해결하려면 다음과 같이 모든 목록 요소에 키를 추가해야 합니다.

<ul>
  {lists.map(listNo =>
    <li key={listNo}>{listNo}</li>)}
</ul>

참고: ID 또는 고유 속성이 있는 객체 그룹을 매핑하고 ID를 키로 사용하는 것은 항상 좋습니다.React의 키가 유일해야 합니다.비록 우리의 예시가 유효하지만, 이것은 단지 예시수 그룹의 원소가 유일하기 때문이다.

6. 단원 테스트를 작성하지 않음

이것은 가장 흔히 볼 수 있는 잘못 중의 하나다.응용 프로그램은 기술적으로 여전히 단원 테스트가 없는 상황에서 작업할 수 있기 때문에 자주 무시된다.단원 테스트는 일부 기능이 예상대로 작동하는지 확인하기 위해 응용 프로그램의 각 부분을 독립적으로 테스트할 수 있습니다.
예를 들어, 구성 요소에 전달된 도구가 브라우저에서 렌더링되었는지 확인하는 단원 테스트를 작성할 수 있습니다.
너는 왜 이렇게 작은 테스트를 썼는지 알고 싶을지도 모른다.구성 요소를 작성한 후에 도구를 올바르게 표시하기를 원하지만, 충돌하는 CSS 스타일이 도구의 표시를 막을 수도 있습니다.
단원 테스트를 작성하면 오류 (실패) 를 즉시 지적하여 이 오류를 추적하는 시간을 절약할 수 있습니다.응용 프로그램에서 빠른 디버깅을 할 수 있습니다.

7, 아이템 유형 사용 안 함

나는 응용 프로그램에서 전달되는 데이터 형식이 정확하지 않은 것을 자주 본다.
예를 들어 도구를 통해 숫자 2를 다른 구성 요소에 전달하고 싶다고 가정하십시오.보통 당신은 그것이 이렇게 하는 것을 볼 수 있다.

<MyComponent value="2" />

숫자 대신 값 2를 문자열로 보냅니다MyComponent.숫자로 보내려면 다음과 같이 하십시오.

<MyComponent value={2}/>

prop-types package를 통해 유형을 정의하는 것은 정확한 아이템을 발송하는 가장 믿을 만한 방법이다.
아이템 유형은 구성 요소에 전달될 예상 속성 유형을 기록하는 데 사용됩니다.React는 이 정의에 따라 구성 요소에 전달된 도구를 검사합니다. 일치하지 않으면 개발 중 경고를 보냅니다.
아이템 유형에 대한 더 많은 정보here를 얻을 수 있습니다.

8. 조수 클래스나 함수를 사용하지 않음

이것은 내가 많은 React 응용 프로그램에서 본 흔한 오류이다.
다시 사용할 수 있는 구성 요소를 제외하고, 우리 응용 프로그램에는 다시 사용할 수 있는 기능이 있다.
이 기능은 일반적으로 구성 요소에서 구성 요소까지의 기초 위에서 하드 인코딩을 진행하는데, 이로 인해 유사한 구성 요소 간의 행위가 효과가 낮고 일치하지 않게 된다.
모든 용기 구성 요소에는 자원을 얻고 상태로 저장하며 오류를 관리하는 논리가 포함되어 있습니다.
대부분의 경우, 이러한 행위는 한 용기 구성 요소와 다른 용기 구성 요소 사이에서 같지만, 정확하게 작성하지 않으면 일치하지 않을 수 있습니다.
위의 예를 고려하여 우리는 API 호출을 통해 자원을 얻고 상태를 설정하며 오류를 처리한다.
이 동작을 조수 클래스나 함수에 추출하면 같은 논리를 API 호출, 설정 상태, 오류 처리에 다시 사용할 수 있습니다.

9. Redux 또는 Flux를 사용하여 모든 애플리케이션 상태 관리

더 큰 React 응용 프로그램에서 많은 개발자들이 Redux나 Flux를 사용하여 전역 상태를 관리합니다.이것은 매우 유용하다. 특히 응용 프로그램의 각 부분이 공유 상태에 도움이 될 때.
그러나 Redux나 Flux를 사용하여 응용 프로그램의 모든 상태를 관리하는 것은 바람직하지 않습니다.
폼 구성 요소를 예로 들다.만약 우리가 방문할 때마다 검사 단추의 상태를 시종일관 검사하기를 원한다면, 가장 좋은 방법은 로컬 상태 방법이나 usestate (갈고리) 를 사용해서 그것을 관리하는 것이지, Redux나 Flux를 사용하는 것이 아니다.

10. React 및 Redux 개발 도구를 사용하지 않음

응용 프로그램은 항상 일정 시간 후에 문제가 발생한다.디버깅은 대부분의 경우 많은 구성 요소와 관련되기 때문에 대량의 작업을 필요로 한다.
React dev tools를 사용하면 React 요소의 표시 트리를 검사할 수 있습니다. 이것은 각종 구성 요소가 페이지를 구축하는 방법을 보는 데 매우 유용합니다.
Redux dev tools 또한 일련의 기능을 제공하여 발생하는 모든 동작을 볼 수 있고, 이러한 동작이 일으키는 상태 변화를 볼 수 있으며, 일부 동작이 발생하기 전으로 되돌아갈 수 있습니다.
React dev 도구를 a dev dependency 또는 browser extension로 추가할 수 있습니다.그것들을 사용하면 대량의 개발 시간을 절약할 수 있다.

결론

이 강좌에서, 우리는 개발자가 응용 프로그램을 만들 때 범하는 흔한 오류에 대해 토론했다.우리는 또한 몇 가지 방법과 도구를 토론했다. 이런 방법과 도구는 이 과정을 더욱 효율적이고 고통스럽게 할 수 있다.
React 개발 과정에서 흔히 볼 수 있는 오류에 대해 어떤 건의가 있습니까?반드시 논평을 발표해야 한다.
편집자: 이 문장에 무슨 문제가 있습니까?정확한 버전here을 찾을 수 있습니다.

플러그인: 네트워크 어플리케이션용 DVR용 LogRocket

 

 
LogRocket는 프런트엔드 로그 기록 도구로 자신의 브라우저에서처럼 문제를 재생할 수 있다.LogRocket은 오류가 발생한 원인을 추측하거나 화면 캡처와 로그 저장을 물어보지 않고 세션을 다시 재생할 수 있도록 합니다.프레임워크에 상관없이 모든 응용 프로그램과 완벽하게 어울릴 수 있으며, Redux, Vuex,
상점
 
LogRocket은 Redux 작업과 상태를 기록하는 것 외에도 콘솔 로그, JavaScript 오류, 스택 추적, 헤더+본문이 있는 네트워크 요청/응답, 브라우저 메타데이터와 사용자 정의 로그를 기록합니다.또한 DOM을 사용하여 페이지에 HTML과 CSS를 기록하여 가장 복잡한 단일 페이지 응용 프로그램이라도 픽셀 수준의 비디오를 재구성합니다.
 
Try it for free .
게시물10 mistakes React developers make이 먼저 LogRocket Blog에 올라왔다.