React.js: 첫 프로젝트에서 배운 것
- Linda Hamilton원래의
- 2025-01-26 06:29:11305검색
원래 2023 년 4 월 2 일에 평범한 영어로 JavaScript의 매체에 게시
.
React.js 란 무엇이며 왜 사용해야합니까?
React 코드는 재사용 가능한 구성 요소로 구성됩니다. 이 구성 요소는 src 폴더 내에 있어야 하며 이름은 CamelCase 형식이어야 합니다. 많은 구성 요소가 HTML과 JS를 혼합한 JSX(JavaScript Syntax Extension)로 작성되었습니다. 나는 이러한 구성 요소를 '재사용 가능'하다고 부릅니다. 왜냐하면 구성 요소는 구조가 동일하고 다른 정보가 전달되어 사이트에 표시될 수 있기 때문입니다. 컴포넌트는 일반 JS로도 작성할 수 있습니다. 그런 다음 사용자 계정 정보와 같은 다양한 정보가 이러한 구성 요소에 전달될 수 있으며 모두 동일한 방식으로 표시됩니다. React 앱을 초기화하려면 터미널에 다음 명령을 입력하세요. npm start는 빈 포트의 기본 브라우저에서 프로젝트를 엽니다. 이제 공식 문서에서는 프레임워크를 사용하여 React 앱을 초기화할 것을 권장합니다. 아직 사용해 본 적이 없지만 여기에서 자세한 내용을 읽어보실 수 있습니다. 앞서 말씀드린 것처럼 저는 지금까지 클래스 컴포넌트만 다루었기 때문에 이번 글에서는 이에 대해서만 다루겠습니다. 첫 번째 프로젝트에 사용한 구성 요소는 여기에 넣기에는 약간 크므로 기사 끝에 링크된 저장소의 src 폴더에 있는 App.js 및 PaymentHistory.jsx 파일을 참조하여 실제로 작동하는 모습을 확인하세요. 그럼에도 불구하고 일반적인 클래스 구성 요소는 다음과 같습니다. 각 일반적인 JS 클래스와 마찬가지로 생성자()가 가장 먼저 오고 그 다음에는 super()가 와야 합니다. 예를 들어 한 클래스에서 다른 클래스로 상태 값이나 메서드를 공유하려면 'properties'를 줄여서 props를 constructor() 및 super() 모두에 대한 매개 변수로 전달해야 합니다. 그런 다음 상태 값을 초기화해야 합니다. 내 부채 계산기 프로젝트에서는 지불, 원금, 이자 및 잔액과 관련된 다양한 금액을 추적하기 위해 여러 상태 값을 사용해야 했지만 특정 항목이 렌더링되어야 하는 방법이나 여부를 결정하는 몇 가지 값도 사용했습니다. isDebtFree 상태 값을 사용하여 입력 필드가 false일 때 활성화하고, true일 때 비활성화하는 방법은 다음과 같습니다. 보시다시피 setState 함수를 사용하여 클래스 구성요소의 상태 값을 변경할 수 있습니다. setState는 비동기식으로 실행되므로 업데이트된 상태 값이 필요한 모든 기능을 콜백에 넣을 수 있습니다. 그러나 이러한 콜백을 최대한 단순하게 유지해야 합니다. 그렇지 않으면 '콜백 지옥'이라는 혼란스러운 세계에 빠지게 되므로 구성 요소에서 메서드를 만들 때 단일 책임 원칙을 최대한 따르십시오. 또한 구성 요소 내에서 상태가 변경될 때마다 구성 요소가 다시 렌더링된다는 점도 알아야 합니다. 대신 return()의 HTML 요소 부분은 상태 값으로 설정되어야 합니다. 이 상태 값은 이 단락 바로 위 코드 블록 앞의 코드 블록에서 보여드린 것처럼 구성 요소의 메서드 실행에 따라 변경될 수 있습니다. 한 가지 더 주의할 점은 구성 요소의 return() 표현식이 최대한 짧아야 하므로 여기에 정의된 기능뿐만 아니라 어떤 유형의 수학적 표현식도 여기에 넣지 마세요. 처음에 결제 필드에 최소 및 최대 값을 설정하려고 했을 때 이런 실수를 했습니다. 이 값은 상태 값에 따라 변경되며, 원금 및 이자율 필드에 숫자를 입력할 때와 결제가 이루어질 때 변경됩니다. 대신 각 값에 대한 메서드를 만든 다음 최소 및 최대 값을 해당 메서드가 반환한 값으로 설정했습니다. 아래의 첫 번째 방법은 효과가 있었지만, 컴포넌트의 return() 부분은 최대한 짧고 읽기 쉬워야 하기 때문에 React에서 수행하는 것은 정확히 좋은 방법은 아닙니다. 아래 방법은 React의 정신에 더 부합합니다. 이 글의 첫 번째 코딩 블록에서 볼 수 있듯이 props를 사용하여 한 구성 요소에서 다른 구성 요소로 메서드를 전달했습니다. 이제 위의 첫 번째 코드 블록에서 App에서 전달한 내용에 이 두 번째 구성 요소가 어떻게 액세스할 수 있는지 살펴보겠습니다. 너무 게을러서 끝까지 스크롤해서 볼 수 없는 경우를 대비해 해당 부분의 모습은 다음과 같습니다. 이제 ComponentOne에서 앱에서 이 메소드를 가져와서 사용해 보겠습니다. 그래서 ChangeFont 메소드에 액세스한 후 렌더링하는 h1을 클릭하면 이를 호출합니다. 예! React는 조건부로 물건을 렌더링하는 것입니다. 그것을 할 수있는 몇 가지 방법이 있습니다. 메소드 로이 작업을 수행 한 다음 ()의 요소 값을이를 동일하게 설정할 수 있습니다. 따라서 부채 계산기 예제를 다시 사용해 봅시다. "당신은 부채가 없습니다!"라는 메시지를 표시하고 싶다고 가정 해 봅시다. 잔액의 상태 값이 0 인 경우, 잔액이 0 이상인 경우 사용자에게 다른 결제를하도록하는 버튼.
위 내용은 React.js: 첫 프로젝트에서 배운 것의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
React 앱 구축을 어떻게 시작하나요?
npx create-react-app project-name
cd project-name
npm start
일반적으로 모든 것이 설정되는 데 몇 분 정도 걸리므로 그동안 TikTok에 우스꽝스러운 춤을 업로드하거나 어느 호그와트 기숙사에 배정될지 알아보는 등 생산적인 일을 해보세요(예, 제가 퀴즈를 만들었습니다).
일반적인 구성요소는 어떤 모습인가요?
// Import React & ComponentOne:
import React from "react";
import ComponentOne from "./ComponentOne;
class App extends React.Component {
/* Add props as params here, in case state values
are to be shared with another component */
constructor(props) {
super(props);
// Initialize state values:
this.state = {
stateValue1: '',
stateValue2: ''
}
}
// Add some methods:
changeFontColor = () => {
// do something
}
changeFont= () => {
// do something
}
// Determine what the component should render:
render() {
return (
<div>
<p key="pgHeader" onClick={this.changeFontColor}>Header</p>
<p key="pgContent" onClick={this.changeFont}>Content</p>
<p key="pgFooter">Footer</p>
</div>
// Give ComponentOne access to method changeFont by passing it in as a prop:
<ComponentOne changeFont={this.changeFont} />
)
}
}
export default App;
npx create-react-app project-name
cd project-name
npm start
DOM은 메서드 내에서 직접 조작하면 안 됩니다. 그렇게 하는 것을 '안티패턴'이라고 합니다. 다음과 같이 메서드 내에서 비활성화된 속성을 설정하여 DOM 요소에 직접 액세스하지 않은 방법에 주목하세요.
// Import React & ComponentOne:
import React from "react";
import ComponentOne from "./ComponentOne;
class App extends React.Component {
/* Add props as params here, in case state values
are to be shared with another component */
constructor(props) {
super(props);
// Initialize state values:
this.state = {
stateValue1: '',
stateValue2: ''
}
}
// Add some methods:
changeFontColor = () => {
// do something
}
changeFont= () => {
// do something
}
// Determine what the component should render:
render() {
return (
<div>
<p key="pgHeader" onClick={this.changeFontColor}>Header</p>
<p key="pgContent" onClick={this.changeFont}>Content</p>
<p key="pgFooter">Footer</p>
</div>
// Give ComponentOne access to method changeFont by passing it in as a prop:
<ComponentOne changeFont={this.changeFont} />
)
}
}
export default App;
// Initialize isDebtFree:
// Should go inside the constructor, but left out here for brevity
this.state = {
// other state values
isDebtFree: false
// other state values
}
// Change isDebtFree to true if payment equals the total remaining balance
// This method will be called upon payment submission
updateValues = () => {
// other stuff
if (newBalance === 0) {
this.setState({
isDebtFree: true
})
}
}
// Set the disabled property of an input field to equal isDebtFree:
render() {
return (
<input disabled={this.state.isDebtFree} />
)
}
// DO NOT ACCESS DOM ELEMENTS DIRECTLY INSIDE A METHOD!
updateValues = () => {
if (newBalance === 0) {
document.getElementById('payment').disabled = true;
}
}
구성요소 간에 정보를 어떻게 공유할 수 있나요?
// You could put math operations directly inside elements in return()...
// ... but this is not the best way
render() {
return (
<input
type="number"
min={
this.state.principal / 100 +
(this.state.principal * Number(this.state.interestRate)) / 100 / 12;
}
max = {
this.state.principal +
(this.state.principal * Number(this.state.interestRate)) / 100 / 12;
}
/>
)
}
// A BETTER WAY
// Create 2 methods; one returns the min payment possible, the other the max:
getMinPmt = () => {
let minPmt =
this.cleanValue(this.state.principal / 100) +
this.cleanValue(
(this.state.principal * Number(this.state.interestRate)) / 100 / 12
);
let totalBalance =
this.state.principal +
this.cleanValue(
(this.state.principal * Number(this.state.interestRate)) / 100 / 12
);
if (totalBalance <= 100 && totalBalance > 0) {
minPmt = totalBalance;
}
return this.cleanValue(minPmt);
};
getMaxPmt = () => {
let maxPmt =
this.state.principal +
this.cleanValue(
(this.state.principal * Number(this.state.interestRate)) / 100 / 12
);
return this.cleanValue(maxPmt);
};
// Set the min & max values of the input to what the respective method returns:
render() {
return (
<input
type="number"
min={this.getMinPmt()}
max={this.getMaxPmt()}
/>
)
}
조건부로 물건을 반응 할 수 있습니까?