[TIL] React-props

link717ยท2020๋…„ 10์›” 12์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
9/53
post-thumbnail

๐Ÿ™Š this.props

๋ชจ๋“  Component๋“ค์€ props๋ผ๊ณ  ๋ถˆ๋ฆฌ๋Š” ๊ฒƒ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. component's์˜ props ๊ฐ์ฒด๋Š” component์˜ ์ •๋ณด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”๋ฐ, prop's ๊ฐ์ฒด์— ์ ‘๊ทผํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” this.props๋ผ๋Š” ํ‘œํ˜„์‹์„ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.

  • props ์ •๋ณด๋ฅผ React component์— ์ „๋‹ฌํ•˜๋ ค๋ฉด component์˜ attribute ์†์„ฑ์œผ๋กœ ์ „๋‹ฌํ•ดํ•˜๋Š”๋ฐ string type์ด ์•„๋‹Œ ์ •๋ณด๋Š” { } ์•ˆ์— ์ž‘์„ฑํ•ด์•ผ ํ•œ๋‹ค.
<Greeting name="Frarthur" town="Flundon" age={2} haunted={false} />
<Greeting myInfo={["top", "secret", "lol"]} />
  • this.props๋Š” component์˜ ์ •๋ณด๋ฅผ ๊ฐ๊ฐ์˜ component์— ์ „๋‹ฌํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๊ฐ€์žฅ ํ”ํ•œ ๋ฐฉ๋ฒ•์ด๋‹ค.

๐Ÿ™‰ Render a Component's props

  • component์— props ์ •๋ณด๋ฅผ ์ „๋‹ฌํ•˜์—ฌ ํ™”๋ฉด์— ๋ณด์ด๊ฒŒ ํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ๊นŒ? โ‘  ํ•ด๋‹น ์ •๋ณด๋ฅผ ๋ฐ›๋Š” class๋ฅผ ์ฐพ๋Š”๋‹ค. โ‘ก class render ํ•จ์ˆ˜์˜ return๋ฌธ์— this.props.name-of-information์„ ์ž…๋ ฅํ•œ๋‹ค.
class Greeting extends React.Component {
  render() {
    return <h1>Hi there, {this.props.firstName}</h1>;
  }
}
  • component์˜ props๋Š” ๊ทธ ๊ฐ’์„ ์ง์ ‘์ ์œผ๋กœ ํ™”๋ฉด์— ํ‘œํ˜„ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ ์™ธ์— ์–ด๋–ค ๊ฐ’์„ ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•œ ์กฐ๊ฑด์‹์˜ ์ฝ”๋“œ๋ฌธ์— ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ๋‹ค.
export class Greeting extends React.Component {
  render() {
  	if (this.props.signedIn === false) {
  	  return <h1>GO AWAY</h1>;
  	} else {
  	  return <h1>Hi there, {this.props.name}!</h1>;
  	}
  }
}

๐Ÿ™ˆ this.props.children

๋ชจ๋“  component์˜ props ๊ฐ์ฒด๋Š” children์ด๋ผ๋Š” ์†์„ฑ์„ ๊ฐ–๊ณ  ์žˆ๋Š”๋ฐ this.props.children์€ JSX syntax๋กœ ์ž‘์„ฑ๋œ ์ฝ”๋“œ, opening/closing tag ์‚ฌ์ด์˜ ๋ชจ๋“  ๋‚ด์šฉ์„ returnํ•œ๋‹ค. ๊ทธ๋ž˜์„œ Children ์†์„ฑ์„ ์œ„ํ•ด์„œ๋Š” self-closing tag๊ฐ€ ์•„๋‹Œ opening/closing tag๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด์•ผ ํ•œ๋‹ค.

  • component๊ฐ€ 2๊ฐœ ์ด์ƒ์˜ ์ž์‹ ์š”์†Œ๋ฅผ ๊ฐ–๊ณ  ์žˆ์„ ๊ฒฝ์šฐ
    . this.props.children์€ array ํ˜•ํƒœ๋กœ children์„ return ํ•œ๋‹ค.
  • component๊ฐ€ 1๊ฐœ์˜ ์ž์‹ ์š”์†Œ๋ฅผ ๊ฐ–๊ณ  ์žˆ์„ ๊ฒฝ์šฐ
    . this.props.children์€ ํ•ด๋‹น ์š”์†Œ๋ฅผ ๋ฐ”๋กœ return ํ•œ๋‹ค.
<List>  // opening tag
  <li></li> // child
</List> // closing tag

// Childrend โ†’ I am a child of BigButton.
<BigButton>
  I am a child of BigButton.
</BigButton>

// Childrend โ†’ <LilButton />
<BigButton>
  <LilButton />
</BigButton>

// Childrend โ†’ undefined
<BigButton />

๐Ÿ™‰ defaultProps

props์— ์–ด๋–ค ๊ฐ’๋„ ์ „๋‹ฌ๋˜์ง€ ์•Š์•˜์„ ๋•Œ, default message๋ฅผ ์ง€์ •ํ•˜๋Š” ์šฉ๋„๋กœ ์‚ฌ์šฉํ•œ๋‹ค. ์ด ๋•Œ defaultProps์˜ ์†์„ฑ์€ ๊ฐ์ฒด์ด๋‹ค.

class Example extends React.Component {
 render() {
   return <h1>{this.props.text}</h1>;
 }
}

Example.defaultProps = { text: 'yo' }; 

๐Ÿ™Š Event Handler in a Component Class

props๋กœ ํ•จ์ˆ˜๋„ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ ์ด ๋•Œ ๋ณดํ†ต ์ „๋‹ฌ๋˜๋Š” ํ•จ์ˆ˜๋Š” event handler function ์ด๋‹ค. ์ด๋ ‡๊ฒŒ ์ „๋‹ฌ๋˜๋Š” ํ•จ์ˆ˜๋Š” class ์•ˆ์— ์ •์˜๋˜์–ด์•ผ ํ•œ๋‹ค.

//props๋กœ ํ•จ์ˆ˜ ์ „๋‹ฌํ•˜๊ธฐ: this.props.ํ•จ์ˆ˜๋ช…

export class Button extends React.Component {
  render() {
    return (
      <button onClick={this.props.talk}>
        Click me!
      </button>
    );
  }
}
  • Event Handler ๋ช…๋ช…๋ฒ•
    โ‘  Event Handler ํ•จ์ˆ˜์˜ ์ด๋ฆ„์€ handleEventType๋กœ ํ•œ๋‹ค. (ex: handleKeyPress)
    โ‘ก Event handler๋ฅผ ํ™œ์šฉํ•˜๋Š” Attribute์˜ ์ด๋ฆ„์€ onEventType๋กœ ํ•œ๋‹ค. (ex: onKeyPress)
    โŽ Event Handler ํ•จ์ˆ˜๊ฐ€ ์žˆ๋Š” component์—์„œ onEventType ์œ ํ˜•์˜ attribute๋ฅผ ๋ถ€์—ฌํ•˜๋Š” ๊ฒƒ์€ ๋‹จ์ˆœํžˆ ์†์„ฑ์˜ ์ด๋ฆ„์„ ์ •ํ•˜๋Š” ํ–‰์œ„๋กœ ํฐ ์˜๋ฏธ๊ฐ€ ์žˆ์ง€๋Š” ์•Š๋‹ค. ์‹ค์ œ Event๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒƒ์€ ๊ทธ๊ฒƒ์„ ๋ฐ›์•„ ๋™์ž‘ํ•˜๋Š” ํ•˜์œ„ Component์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
 class MyClass extends React.Component {
  handleHover() {
    alert('I am an event handler.');
    alert('I will listen for a "hover" event.');
  }

  render() {
    return <Child onHover={this.handleHover} />;
  }
}
profile
Turtle Never stop

0๊ฐœ์˜ ๋Œ“๊ธ€