첫 번째 React 프로젝트를 시작할 때 저질렀던 5가지 실수

새로운 언어나 프레임워크를 선택하는 것이 어떤 것인지 알고 있습니다. 때때로 당신이 그것을 통해 방법을 찾는 데 도움이 되는 훌륭한 문서가 있습니다. 그러나 최고의 문서라 할지라도 절대적으로 모든 것을 다루지는 않습니다. 그리고 당신이 새로운 것을 가지고 일할 때, 서면 해결책이 없는 문제를 발견하게 될 것입니다.

React 프로젝트를 처음 만들었을 때 저에게는 그랬습니다. React는 특히 현재 베타 문서와 함께 놀라운 문서가 포함된 프레임워크 중 하나입니다. 그러나 나는 여전히 내 길을 고군분투했습니다. 그 프로젝트 이후 꽤 시간이 흘렀지만 그로부터 얻은 교훈은 여전히 ​​내 마음에 생생합니다. 그리고 React "방법" 튜토리얼이 많이 있지만 처음 사용했을 때 알고 싶었던 것을 공유하고 싶다고 생각했습니다.

이것이 바로 제가 저지른 초기 실수 목록입니다. React 학습이 훨씬 더 순조롭게 진행되는 데 도움이 되었으면 합니다.

create-react-app을 사용하여 프로젝트 시작

TL;DR Vite 또는 Parcel을 사용하십시오.

반응 앱 만들기 (CRA)는 새로운 React 프로젝트를 설정하는 데 도움이 되는 도구입니다. 대부분의 React 프로젝트에 가장 적합한 구성 옵션으로 개발 환경을 만듭니다. 즉, 직접 구성하는 데 시간을 소비할 필요가 없습니다.

초보자로서 이것은 내 작업을 시작하는 좋은 방법인 것 같았습니다! 구성 없음! 코딩을 시작하세요!

CRA는 이를 달성하기 위해 두 가지 인기 있는 패키지인 webpack과 Babel을 사용합니다. webpack은 JavaScript, CSS 및 이미지와 같은 프로젝트의 모든 자산을 최적화하는 웹 번들러입니다. Babel은 일부 브라우저가 지원하지 않는 경우에도 최신 JavaScript 기능을 사용할 수 있게 해주는 도구입니다.

둘 다 좋지만 작업을 더 잘 수행할 수 있는 최신 도구가 있습니다. 물다 및 빠른 웹 컴파일러 (SWC).

이러한 새롭고 개선된 대안은 webpack 및 Babel보다 구성이 빠르고 쉽습니다. 이렇게 하면 꺼내지 않고 create-react-app에서 수행하기 어려운 구성을 쉽게 조정할 수 있습니다.

새로운 React 프로젝트를 설정할 때 둘 다 사용하려면 다음이 있는지 확인해야 합니다. 노드 버전 12 이상이 설치된 후 다음 명령을 실행하십시오.

npm create vite

프로젝트 이름을 선택하라는 메시지가 표시됩니다. 그런 다음 프레임워크 목록에서 React를 선택합니다. 그 후에 다음 중 하나를 선택할 수 있습니다. Javascript + SWC or Typescript + SWC

그런 다음 디렉토리를 변경해야합니다 cd 프로젝트에 입력하고 다음 명령을 실행합니다.

npm i && npm run dev

URL이 있는 사이트의 개발 서버를 실행해야 합니다. localhost:5173

그리고 그것은 그렇게 간단합니다.

사용 defaultProps 기본값

TL;DR 대신 기본 함수 매개변수를 사용하세요.

데이터는 다음을 통해 React 구성 요소로 전달될 수 있습니다. props. 이들은 HTML 요소의 속성과 마찬가지로 구성 요소에 추가되며 인수로 전달된 prop 개체에서 관련 값을 가져와 구성 요소 정의에 사용할 수 있습니다.

// App.jsx
export default function App() { return <Card title="Hello" description="world" />
} // Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> );
} export default Card;

다음에 대해 기본값이 필요한 경우 propWalk Through California 프로그램, defaultProp 다음 속성을 사용할 수 있습니다.

// Card.jsx
function Card(props) { // ...
} Card.defaultProps = { title: 'Default title', description: 'Desc',
}; export default Card;

최신 JavaScript를 사용하면 props 개체를 만들고 함수 인수에서 모두 기본값을 할당합니다.

// Card.jsx
function Card({title = "Default title", description= "Desc"}) { return ( <div> <h1>{title}</h1> <p>{description}</p> </div> )
} export default Card;

이는 추가 변환 없이 최신 브라우저에서 읽을 수 있는 코드로 더 유리합니다.

운수 나쁘게, defaultProps JSX(JavaScript XML)는 기본적으로 지원되지 않으므로 브라우저에서 일부 변환을 읽어야 합니다. 이것은 많은 양의 데이터를 사용하는 응용 프로그램의 성능에 잠재적으로 영향을 줄 수 있습니다. defaultProps.

사용하지 마십시오. propTypes

TL;DR TypeScript를 사용하십시오.

리액트에서는 propTypes 속성은 구성 요소가 해당 소품에 대한 올바른 데이터 유형을 전달하는지 확인하는 데 사용할 수 있습니다. 이를 통해 문자열, 숫자, 객체 등과 같은 각 prop에 사용해야 하는 데이터 유형을 지정할 수 있습니다. 또한 prop이 필요한지 여부를 지정할 수 있습니다.

이렇게 하면 구성 요소에 잘못된 데이터 유형이 전달되거나 필요한 prop이 제공되지 않으면 React에서 오류가 발생합니다.

// Card.jsx
import { PropTypes } from "prop-types"; function Card(props) { // ...
} Card.propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string,
}; export default Card;

유형 스크립트 구성 요소에 전달되는 데이터의 형식 안전성 수준을 제공합니다. 확신, propTypes 내가 시작할 때 좋은 생각이었습니다. 그러나 이제 TypeScript가 유형 안전을 위한 이동 솔루션이 되었기 때문에 다른 어떤 것보다 TypeScript를 사용하는 것이 좋습니다.

// Card.tsx
interface CardProps { title: string, description?: string,
} export default function Card(props: CardProps) { // ...
}

TypeScript는 정적 유형 검사를 추가하여 JavaScript 위에 구축되는 프로그래밍 언어입니다. TypeScript는 더 강력한 유형 시스템을 제공하여 더 많은 잠재적인 버그를 포착하고 개발 경험을 향상시킬 수 있습니다.

클래스 구성 요소 사용

핵심요약: 컴포넌트를 함수로 쓰기

React의 클래스 구성 요소는 JavaScript 클래스를 사용하여 생성됩니다. 그것들은 보다 객체 지향적인 구조를 가지고 있을 뿐만 아니라 this 키워드 및 라이프사이클 메소드.

// Card.jsx
class Card extends React.Component { render() { return ( <div> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </div> ) }
} export default Card;

함수보다 클래스로 구성 요소를 작성하는 것을 선호하지만 JavaScript 클래스는 초보자가 이해하고 this 매우 혼란스러울 수 있습니다. 대신 구성 요소를 함수로 작성하는 것이 좋습니다.

// Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> )
} export default Card;

함수 구성 요소는 단순히 JSX를 반환하는 JavaScript 함수입니다. 그들은 읽기가 훨씬 쉽고 다음과 같은 추가 기능이 없습니다. this 키워드와 수명 주기 방법 클래스 구성 요소보다 더 성능이 좋습니다.

함수 구성 요소에는 후크를 사용하는 이점도 있습니다. 반응 고리 클래스 구성 요소를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있으므로 코드를 더 읽기 쉽고 유지 관리 및 재사용할 수 있습니다.

불필요하게 React 가져오기

TL;DR: 후크가 필요하지 않으면 할 필요가 없습니다.

17년에 React 2020이 출시되었으므로 이제 구성 요소를 만들 때마다 파일 맨 위에 React를 가져올 필요가 없습니다.

import React from 'react'; // Not needed!
export default function Card() {}

하지만 React 17 이전에는 JSX 변환기(JSX를 일반 JavaScript로 변환하는 것)가 React.createElement React를 가져올 때만 작동합니다. 그 이후로 JSX를 변환할 수 있는 새로운 변환기가 출시되었습니다. createElement 방법.

후크를 사용하려면 여전히 React를 가져와야 합니다. 파편, 라이브러리에서 필요할 수 있는 기타 기능 또는 구성 요소:

import { useState } from 'react'; export default function Card() { const [count, setCount] = useState(0); // ...
}

그것은 나의 초기 실수였습니다!

더 나은 관행 중 일부는 나중에 나온 것이기 때문에 "실수"는 너무 가혹한 단어일 수 있습니다. 그럼에도 불구하고 프로젝트 및 기타 자습서에서 "오래된" 작업 방식이 여전히 활발하게 사용되고 있는 사례를 많이 봅니다.

솔직히 말해서 시작할 때 실수를 다섯 번 이상 한 것 같습니다. 새로운 도구에 도달할 때마다 스위치를 뒤집는 것이 아니라 효과적으로 사용하기 위한 학습 여정에 더 가까워질 것입니다. 그러나 이것들은 내가 몇 년이 지난 후에도 여전히 가지고 다니는 것입니다!

한동안 React를 사용해 왔다면 시작하기 전에 알고 싶었던 것이 무엇입니까? 다른 사람들이 같은 투쟁을 피하는 데 도움이 되는 컬렉션을 얻는 것이 좋을 것입니다.

• SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
• 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
• 출처: https://css-tricks.com/5-mistakes-starting-react/