소품 및 기타 | 3일차
20466 단어 webdevbeginnersreactjavascript
뭐
props는 속성을 나타냅니다.React Component에 전달되는 인수입니다.
소품은 HTML 속성을 통해 구성 요소에 전달됩니다.
어떻게
React Props는 HTML의 속성과 같습니다.
소품을 HTML로 보내려면 HTML 속성과 동일한 구문을 사용합니다.
처럼,
**Suppose we have a Hello
Component which takes the name as the argument
so we can give it in this way.**
ReactDOM.render(<Hello name="Harry"/>,document.getElementById('root'));
구성 요소는 인수를
props 개체로 받습니다.render 메서드에서 Console.log를 사용하는 것을 볼 수 있습니다.
console.log(this.props)이 이름을
{this.props.name}로 사용할 수 있습니다.왜
우리는 호출할 때마다 동일한 출력을 제공하는 구성 요소를 원하지 않습니다.
소품을 사용하여 구성 요소를 더 사용자 정의하거나 구성할 수 있도록 만들 수 있습니다.
아래 예시를 보세요👇
**App.js**
class App extends React.Component{
render(){
return <p>Hi Everyone!</p>
}
}
소품으로 👇
**App.js**
class App extends React.Component{
render(){
return <p> Hello {this.props.name} </p>
}
}
ReactDOM.render(<App name="Rohan"/>,document.getElementById('root'));
다른 이름을 전달할 때마다 다른 출력을 제공합니다.
또한
props는 한 구성 요소에서 다른 구성 요소로 Pass the Data 사용될 수 있습니다.처럼,
**Suppose i have 2 Components Library and Books**
class Books extends React.Component{
render(){
console.log(this.props);
return(<div>
<h2>The Availabe Books are </h2>
<p>{this.props.books[0]} , {this.props.books[1]} , {this.props.books[2]} </p>
</div>)
}
}
class Library extends React.Component{
render(){
const Types = ["Adventure","Romantic","Horror"];
return(
<div>
<h1>How many Types of Book do I have?</h1>
<Books books={Types}/>
</div>
)
}
}
ReactDOM.render(<Library/>,document.getElementById('root'));
You can Try this on Codepen 👆
변수나 객체를 보내야 한다면 중괄호 안에 넣어야 합니다.
소품의 다른 속성 →
소품은 불변입니다
일단 정의되면 변경할 수 없습니다.
처럼,
**Hello.js**
class Hello extends React.Component {
render(){
this.props.to = "Rohit"; //**This will Give Error.**
return (
<h1>Hello {this.props.to} form {this.props.from}</h1>
)
}
}
ReactDOM.render(<Hello/>,document.getElementById('root'))
class App extends React.Component{
render(){
return(
<User
name="Ringo" //**A String**
isMarried={true} //**Boolean**
age={16} **//Number (Child Marriage case Reported🤣)**
hobbies={['Reading','Playing Golf']} **//An Array**
/>
)
}
}
JSX에서 루핑
JSX에서 루프를 사용하려면 주로
Array Map Function를 사용합니다.array.map(function()) 예 →
class Books extends React.Component{
render(){
const{books} = this.props;
return(<div>
<h2>The Availabe Books are </h2>
<ul>
{books.map(m=> <li>{m}</li>)}
</ul>
</div>)
}
}
class Library extends React.Component{
render(){
const Types = ["Adventure","Romantic","Horror"];
return(
<div>
<h1>How many Types of Book do I have?</h1>
<Books books={Types}/>
</div>
)
}
}
ReactDOM.render(<Library/>,document.getElementById('root'));
기본 소품 추가 ⇒
기본 소품을 추가하려면
defaultProps 라는 키워드를 사용해야 합니다.class User extends React.Component{
static defaultProps = {
name:"Paul",
hobbies:["watching tv","cooking"]
}
render(){
return(
{/* Code */}
)
}
}
반응 스타일 지정
스타일시트 사용
style.css
.red{
background-color:red;
}
app.js
class App extends React.Component{
render(){
return(
<div className="red">
<h1>Hello</h1>
</div>
)
}
}
클래스는 예약어이므로
className.라는 단어를 사용해야 합니다.인라인 CSS →
class App extends React.Component{
render(){
const color = {color:'red'};
return(
<div style={color}>
<h1>Hello</h1>
</div>
)
}
}
Reference
이 문제에 관하여(소품 및 기타 | 3일차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jay818/props-and-more-day-3-4897텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
