초보자 가이드 React Props [구문 포함]
게시 됨: 2020-09-16React는 응용 프로그램을 위한 대화형 UI를 설계하는 데 사용되는 MIT 라이선스 오픈 소스 JavaScript 라이브러리입니다. 구성 요소 기반의 선언적이며 유연하고 효율적인 라이브러리로 개발자의 삶을 더 쉽게 만듭니다. 컴포넌트 기반 라이브러리이기 때문에 UI를 컴포넌트라고 하는 여러 개별 조각으로 나눕니다. 이러한 구성 요소는 적절하게 작동하기 위해 서로 통신해야 하며, 이때 React 소품이 등장합니다.
목차
리액트 소품이란?
"Props"라는 단어는 속성을 의미하는 React 라이브러리의 키워드입니다. 또한 React 구성 요소에서 전역 변수 또는 객체라고도 합니다. React props는 HTML의 인수와 유사합니다. React props에 대해 주목할 가치가 있는 몇 가지 사항은 항상 단방향으로 흐르고 그 안의 데이터는 읽기 전용이라는 것입니다. 이것은 그것들을 불변으로 만듭니다. 즉, 한 구성 요소에서 흐르는 데이터는 다른 구성 요소에서 변경할 수 없습니다. 순수하고 불순한 함수의 예를 들어 이것을 이해할 수 있습니다.
이것은 동일한 입력에 대해 항상 동일한 출력을 제공하므로 순수 함수입니다.
함수 prod(a, b) {
반환 * b;
}
이것은 자체 입력을 조작하는 불순한 함수입니다.
기능 입금(계좌, 금액){
account.total += 금액;
}
React props는 변경할 수 없으므로 구성 요소는 순수한 기능으로 작동해야 합니다. 이것은 유연한 React 라이브러리의 유일한 엄격한 규칙입니다.
React Props 전달 및 액세스 구문
앞서 언급했듯이 React props는 HTML 인수와 유사하므로 구성 요소에 props를 전달하거나 추가하려면 HTML 속성을 전달하는 것과 유사하게 수행할 수 있습니다.
통사론:
<component_name props_name = "값" />
위의 구문에서 ' component_name' 은 props를 전달해야 하는 구성 요소의 이름이고 props_name 은 props의 이름이며 value 는 props 값입니다.
구성 요소의 클래스 내에서 모든 소품에 액세스할 수 있습니다.
통사론:
this.props .props_name;
위 구문에서 this.props는 구성 요소의 클래스 내에서 모든 props에 액세스하는 데 사용되는 전역 개체이고 props_name 은 액세스하려는 React props의 이름입니다.
읽기: JavaScript와 JQuery: JavaScript와 JQuery의 차이점
React Props를 사용하는 방법?
모든 구성 요소에서 불변의 React props 데이터를 사용하는 두 가지 방법이 있습니다. 이 두 가지 방법은 기본 파일의 reactDom.render() 함수에 props를 추가하거나 구성 요소 자체에 기본 props로 데이터를 추가하는 것입니다. 두 가지 방법으로 React props를 사용하는 방법은 다음과 같습니다.
react.Dom.render() 함수에서 React Props 사용하기
먼저 구성 요소 파일에 소품을 추가해야 합니다.
'반응'에서 React 가져오기; //리액트 라이브러리 가져오기
class Example extends React.component { /* example은 React 컴포넌트 클래스의 속성을 확장하는 컴포넌트 이름 */
렌더링() {
반품 (
<div>
<h2>{this.props. h2의 firstProp }</h2>
<h3>{이것, 소품. h3의 secondProp }</h3>
</div>
);
}
}
내보내기 기본 예; //컴포넌트 내보내기
이제 기본 파일의 reactDom.render() 함수를 통해 props에 값을 추가하고 거기에서 액세스해야 합니다.
'반응'에서 React 가져오기;
'react-dom'에서 ReactDom을 가져옵니다.
'./Example.jsx'에서 예제 가져오기 ;
ReactDom.render(< 예제 firstProp = “이것은 firstProp 입니다. ” secondProp = “이것은 secondProp 입니다. ”/>, document.getElementById('example'));
내보내기 기본 예;
결과:
이것은 h2 의 firstProp 입니다.
이것은 h3 의 두 번째 속성 입니다.
컴포넌트 생성자에서 기본 props와 함께 React props 사용하기
구성 요소 파일에 소품과 해당 값을 추가합니다.
'반응'에서 React 가져오기; //리액트 라이브러리 가져오기
class Example extends React.component { /* example은 React 컴포넌트 클래스의 속성을 확장하는 컴포넌트 이름 */
렌더링() {
반품 (
<div>
<h2>{this.props. 첫 번째 소품 }</h2>
<h3>{이것, 소품. 두 번째 소품 }</h3>
</div>
);
}
}
예 .deafultProps = {
firstProp : "이것이 firstProp입니다 ",
secondProp : "이것은 secondProp입니다 "
}
내보내기 기본 예; //컴포넌트 내보내기
기본 파일에서 React 소품에 액세스합니다.
'반응'에서 React 가져오기;
'react-dom'에서 ReactDom을 가져옵니다.
'./Example.jsx'에서 예제 가져오기 ;
ReactDom.render(< 예제 />, document.getElementById('예제'));
이에 대한 출력은 기본 소품의 도움으로 수행된다는 점을 제외하고는 reactDom.render() 함수 사용과 유사합니다.
확인: Vue 대 React: Vue와 React의 차이점
한 구성 요소에서 다른 구성 요소로 React Props를 전달하는 방법
React props의 주요 용도는 React의 구성 요소 간에 데이터를 전달하는 것입니다. 다음 예는 데이터가 전달되는 방식을 이해하는 데 도움이 됩니다.
'반응'에서 React 가져오기;
클래스 과일 은 React.Component {를 확장합니다.
렌더링() {
return <h4>저는 {this.props입니다. 이름 } in h4</h4>
}
}
클래스 질문 확장 React.Component {
렌더링() {
반품 (
<div>
<h3>당신은 어떤 과일입니까? h3에서</h3>
< 과일 이름 = "망고" / > //소품 생성 및 값 할당
</div>
);
}
}
ReactDom.render(<질문 />, document.getElementById('과일'));
그러면 다음과 같은 출력이 표시됩니다.
당신은 어떤 과일입니까? h3에서
나는 h4의 망고다
State와 Props를 함께 사용하기
우리 모두가 알고 있듯이 React는 동적 언어이며 유연성은 USP입니다. 따라서 React props를 단독으로 사용하는 것만으로는 애플리케이션 개발에 충분하지 않습니다. 이 문제는 국가의 도움으로 해결됩니다. 상태는 데이터 관리에 사용되는 또 다른 React 기능입니다. React props와 state를 결합하여 애플리케이션을 보다 대화형이고 동적으로 만드는 방법을 살펴보겠습니다.
'반응'에서 React 가져오기;
클래스 Car는 React.Component {를 확장합니다.
생성자(소품) {
슈퍼(소품);
this.state = {
firstCar: "이것은 메르세데스 벤츠입니다! in h2”, //상태에 값 할당
세컨드카: “이게 BMW다! In h3” //상태에 값 할당
}
}
렌더링() {
반품 (
<div>
<FirstCar firstProp = {this.state.firstCar}/> // props에 값 할당
<SecondCar secondProp = {this.state.secondCar}/> //props에 값 할당
</div>
);
}
}
클래스 FirstCar는 React.Component {를 확장합니다.
렌더링() {
반품 (
<div>
<h2>{this.props.firstProp}</h2>
</div>
);
}
}
클래스 SecondCar는 React.Component {를 확장합니다.
렌더링() {
반품 (
<div>
<h3>{this.props.secondProp}</h3>
</div>
);
}
}
기본 자동차 내보내기;
이제 기본 파일에서 데이터에 액세스해야 합니다.
'반응'에서 React 가져오기;
'react-dom'에서 ReactDOM을 가져옵니다.
'./Car.jsx'에서 자동차 가져오기;
ReactDOM.render(<자동차 />, document.getElementById('자동차'));
결과:
메르세데스-벤츠다! h2에서
이것은 BMW다! h3에서
또한 읽기: 노드 JS와 React JS의 차이점
요약하자면
React props와 React에서 데이터를 관리하기 위한 상태의 조합은 React를 가장 유용한 JavaScript 라이브러리 중 하나로 만듭니다. 수많은 React 프로젝트 아이디어 가 있으며 개발자만이 아이디어를 실현할 수 있습니다. 따라서 ReactJS 개발자에 대한 수요가 많고 급여 도 인상 됩니다.
기업이 애플리케이션을 만들 수 있도록 돕고 막대한 수입을 얻기 위해 수많은 React 프로젝트에 참여한다는 아이디어가 마음에 든다면 너무 늦기 전에 조치를 취해야 합니다. upGrad 에서 제공하는 온라인 과정을 수강 하여 React에 대한 모든 것을 배우고 풀스택 소프트웨어 개발자가 될 수 있습니다.
리액트, 풀스택 개발에 대해 자세히 알아보려면 upGrad & IIIT-B의 풀스택 소프트웨어 개발 PG 디플로마를 확인하세요. 이 디플로마는 일하는 전문가를 위해 설계되었으며 500시간 이상의 엄격한 교육, 9개 이상의 프로젝트, 및 과제, IIIT-B 동문 자격, 실질적인 실습 캡스톤 프로젝트 및 최고의 기업과의 취업 지원.