React
this.props
WebDevLee
2021. 10. 30. 15:50
이 글은 React의 Component Interact중 this.props를 이용한 방식을
정리하고 이해하기 위해 작성하였습니다.
< this.props >
Information that gets passed from one component to another is known as "props"
< Access a Component's props >
To see a component's props object.
Every component has something called props.
A component’s props is an object. It holds information about that component.
To see a component's props object, Use the expression this.props
ex)
import React from 'react';
import ReactDOM from 'react-dom';
class PropsDisplayer extends React.Component {
render() {
const stringProps = JSON.stringify(this.props);
return (
<div>
<h1>CHECK OUT MY PROPS OBJECT</h1>
<h2>{stringProps}</h2>
</div>
);
}
}
ReactDOM.render(<PropsDisplayer />, document.getElementById('app'));
: Despite what you see in the browser, <PropsDisplayer />‘s props object isn’t really empty. It has some properties that JSON.stringify doesn’t detect. But even if you could see those properties, the props object still wouldn’t have much of value to show you right now.
< Pass 'props' to a Component >
To pass information to a component, Give the component an attribute.
- You can use any name for attribute's name.
ex)
<Example message="This is some top secret info." />
<Greeting myInfo={["top", "secret", "lol"]} />
<Greeting name="Frarthur" town="Flundon" age={2} haunted={false} />ex) in practice!
import React from 'react';
import ReactDOM from 'react-dom';
class PropsDisplayer extends React.Component {
render() {
const stringProps = JSON.stringify(this.props);
return (
<div>
<h1>CHECK OUT MY PROPS OBJECT</h1>
<h2>{stringProps}</h2>
</div>
);
}
}
ReactDOM.render(<PropsDisplayer myProp='Hello' />, document.getElementById('app'));
< Render a Component's props >
To render a component's props.
1. Find the component class that receives the information
2. Include this.props.name-of-information in that component class's render method's return statement
ex)
import React from 'react';
import ReactDOM from 'react-dom';
class Greeting extends React.Component {
render() {
return <h1>Hi there, {this.props.firstName}</h1>;
}
}
ReactDOM.render(
<Greeting firstName='Groberta' />,
document.getElementById('app')
);
< Pass props From Component to Component >
To pass props from component to component.
ex)
If <App /> is going to pass a prop to <Greeting />,
then it follows that <App /> is going to render <Greeting />.
// Greeting.js
import React from 'react';
export class Greeting extends React.Component {
render() {
return <h1>Hi there, {this.props.name}!</h1>;
}
}// App.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Greeting} from './Greeting';
class App extends React.Component {
render() {
return (
<div>
<h1>
Hullo and, "Welcome to The Newzz," "On Line!"
</h1>
<Greeting name='Lee' />
<article>
Latest newzz: where is my phone?
</article>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
< Render Different UI Based on props >
You can use props to make decisions.
ex)
class Welcome extends React.Component {
render() {
if (this.props.name === 'Wolfgang Amadeus Mozart') {
return (
<h2>
hello sir it is truly great to meet you here on the web
</h2>
);
} else {
return (
<h2>
WELCOME "2" MY WEB SITE BABYYY!!!!!
</h2>
);
}
}
}
< Event Handler in a Component Class >
To attach event handler in a component class.
< How to >
1. Define an event handler as a method on the component class.
2. Pass the event handler as a prop.
3. receive the event handler as a prop.
ex)
// Talker.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from './Button';
class Talker extends React.Component {
handleClick () {
let apeech = '';
for (let i = 0; i < 100; i++) {
speech += 'blah';
}
alert(speech);
}
render () {
return <Button onClick = {this.handleClick} />;
}
}
ReactDOM.render(<Talker />, document.getElementById('app));// Button.js
import React from 'react';
export class Button extends React.Component {
render () {
return (
<button onClick = {this.props.onClick}>
Click me!
</button>
)
}
}
< handleEvent, and onEvent >
When you pass an event handler as a prop, there are two names that you have to choose.
- The first name that you have to choose is the name of the event handler itself.
- The second name that you have to choose is the name of the prop that you will use to pass the event handler.(This is the same thing as your attribute name)
< Naming Convention >
1. The event handler name : handleEvent
ex) handleClick( ), handleHover( )...
2. The prop name : onEvent
ex) onClick, onHover...
: These two names can be whatever you want. However, there is a naming convention that they often follow. You don’t have to follow this convention, but you should understand it when you see it.
+. Names like onClick only create event listeners if they're used on HTML-like JSX
<button onClick = {~~~} /> ---> O
<Button onClick = {~~~} /> ---> X : it is just a ordinary prop name.
< this.props.children >
Every component's props object has a property named children.
- this.props.children will return everything in between a component’s opening and closing JSX tags.
- if a component has more than one child between tags, will return those child in an array.
ex)
<!-- Example 1 -->
<BigButton>
I am a child of BigButton.
</BigButton>
<!-- return 'I am a child of BigButton' -->
<!-- Example 2 -->
<BigButton>
<LilButton />
</BigButton>
<!-- return <LilButton /> component -->
<!-- Example 3 -->
<BigButton />
<!-- return undefined -->
< defaultProps >
To prepare the props did not come in using defaultProps.
- The dafultProps should be equal to an object.
- Inside of this object, write properties for any default props that you’d like to set:
ex)
class Example extends React.Component {
render() {
return <h1>{this.props.text}</h1>;
}
}
Example.defaultProps = { text: 'yo' };
// If an <Example /> doesn’t get passed any text, then it will display “yo.”
// If an <Example /> does get passed some text, then it will display that passed-in text.