We want to hear from you!Take our 2021 Community Survey!
Support Ukraine ๐Ÿ‡บ๐Ÿ‡ฆ Help Provide Humanitarian Aid to Ukraine.

Render Props

โ€œrender propโ€๋ž€, React ์ปดํฌ๋„ŒํŠธ ๊ฐ„์— ์ฝ”๋“œ๋ฅผ ๊ณต์œ ํ•˜๊ธฐ ์œ„ํ•ด ํ•จ์ˆ˜ props๋ฅผ ์ด์šฉํ•˜๋Š” ๊ฐ„๋‹จํ•œ ํ…Œํฌ๋‹‰์ž…๋‹ˆ๋‹ค.

render props ํŒจํ„ด์œผ๋กœ ๊ตฌํ˜„๋œ ์ปดํฌ๋„ŒํŠธ๋Š” ์ž์ฒด์ ์œผ๋กœ ๋ Œ๋”๋ง ๋กœ์ง์„ ๊ตฌํ˜„ํ•˜๋Š” ๋Œ€์‹ , react ์—˜๋ฆฌ๋จผํŠธ ์š”์†Œ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ  ์ด๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

<DataProvider render={data => (
  <h1>Hello {data.target}</h1>
)}/>

render props๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” React Router, Downshift, Formik์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๋ฌธ์„œ์—์„œ๋Š” render props๊ฐ€ ์™œ ์œ ์šฉํ•˜๊ณ , ์–ด๋–ป๊ฒŒ ์—ฌ๋Ÿฌ๋ถ„์˜ ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•  ์ˆ˜ ์žˆ์„์ง€์— ๊ด€ํ•ด ์ด์•ผ๊ธฐ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

ํšก๋‹จ ๊ด€์‹ฌ์‚ฌ(Cross-Cutting Concerns)๋ฅผ ์œ„ํ•œ render props ์‚ฌ์šฉ๋ฒ•

์ปดํฌ๋„ŒํŠธ๋Š” React์—์„œ ์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ์„ฑ์„ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ์ฃผ์š” ๋‹จ์œ„์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ปดํฌ๋„ŒํŠธ์—์„œ ์บก์Šํ™”๋œ ์ƒํƒœ๋‚˜ ๋™์ž‘์„ ๊ฐ™์€ ์ƒํƒœ๋ฅผ ๊ฐ€์ง„ ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ์™€ ๊ณต์œ ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ํ•ญ์ƒ ๋ช…ํ™•ํ•˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค๋ฉด, ์•„๋ž˜ ์ปดํฌ๋„ŒํŠธ๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋งˆ์šฐ์Šค ์œ„์น˜๋ฅผ ์ถ”์ ํ•˜๋Š” ๋กœ์ง์ž…๋‹ˆ๋‹ค.

class MouseTracker extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        <h1>Move the mouse around!</h1>
        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
      </div>
    );
  }
}

์Šคํฌ๋ฆฐ ์ฃผ์œ„๋กœ ๋งˆ์šฐ์Šค ์ปค์„œ๋ฅผ ์›€์ง์ด๋ฉด, ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šฐ์Šค์˜ (x, y) ์ขŒํ‘œ๋ฅผ <p>์— ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์„œ ์งˆ๋ฌธ์ž…๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ด ํ–‰์œ„๋ฅผ ์žฌ์‚ฌ์šฉํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ• ๊นŒ์š”? ์ฆ‰, ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ปค์„œ(cursor) ์œ„์น˜์— ๋Œ€ํ•ด ์•Œ์•„์•ผ ํ•  ๊ฒฝ์šฐ, ์‰ฝ๊ฒŒ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋„๋ก ์บก์Šํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

React์—์„œ ์ปดํฌ๋„ŒํŠธ๋Š” ์ฝ”๋“œ ์žฌ์‚ฌ์šฉ์˜ ๊ธฐ๋ณธ ๋‹จ์œ„์ด๋ฏ€๋กœ, ์šฐ๋ฆฌ๊ฐ€ ํ•„์š”๋กœ ํ•˜๋Š” ๋งˆ์šฐ์Šค ์ปค์„œ ํŠธ๋ž˜ํ‚น ํ–‰์œ„๋ฅผ <Mouse> ์ปดํฌ๋„ŒํŠธ๋กœ ์บก์Šํ™”ํ•˜์—ฌ ์–ด๋””์„œ๋“  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฆฌํŒฉํ† ๋ง ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

// <Mouse> ์ปดํฌ๋„ŒํŠธ๋Š” ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ํ–‰์œ„๋ฅผ ์บก์Šํ™” ํ•ฉ๋‹ˆ๋‹ค...
class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>

        {/* ...ํ•˜์ง€๋งŒ <p>๊ฐ€ ์•„๋‹Œ ๋‹ค๋ฅธ๊ฒƒ์„ ๋ Œ๋”๋งํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ• ๊นŒ์š”? */}
        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
      </div>
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      <>
        <h1>Move the mouse around!</h1>
        <Mouse />
      </>
    );
  }
}

์ด์ œ <Mouse> ์ปดํฌ๋„ŒํŠธ๋Š” ๋งˆ์šฐ์Šค ์›€์ง์ž„ ์ด๋ฒคํŠธ๋ฅผ ๊ฐ์ง€ํ•˜๊ณ , ๋งˆ์šฐ์Šค ์ปค์„œ์˜ (x, y)์œ„์น˜๋ฅผ ์ €์žฅํ•˜๋Š” ํ–‰์œ„๋ฅผ ์บก์Šํ™”ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์•„์ง ์™„๋ฒฝํ•˜๊ฒŒ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฑด ์•„๋‹™๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ๋งˆ์šฐ์Šค ์ฃผ์œ„์— ๊ณ ์–‘์ด ๊ทธ๋ฆผ์„ ๋ณด์—ฌ์ฃผ๋Š” <Cat> ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒ๊ฐํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” <Cat mouse={{x, y}}> prop์„ ํ†ตํ•ด Cat ์ปดํฌ๋„ŒํŠธ์— ๋งˆ์šฐ์Šค ์ขŒํ‘œ๋ฅผ ์ „๋‹ฌํ•ด์ฃผ๊ณ  ํ™”๋ฉด์— ์–ด๋–ค ์œ„์น˜์— ์ด๋ฏธ์ง€๋ฅผ ๋ณด์—ฌ์ค„์ง€ ์•Œ๋ ค ์ฃผ๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.

์ฒซ ๋ฒˆ์งธ ๋ฐฉ๋ฒ•์œผ๋กœ๋Š”, ๋‹ค์Œ๊ณผ ๊ฐ™์ด <Mouse> ์ปดํฌ๋„ŒํŠธ์˜ render ๋ฉ”์„œ๋“œ์•ˆ์— <Cat> ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋„ฃ์–ด ๋ Œ๋”๋งํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค.

class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
    );
  }
}

class MouseWithCat extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>

        {/*
          ์—ฌ๊ธฐ์„œ <p>๋ฅผ <Cat>์œผ๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ... ๊ทธ๋Ÿฌ๋‚˜ ์ด ๊ฒฝ์šฐ
          Mouse ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๋งˆ๋‹ค ๋ณ„๋„์˜ <MouseWithSomethingElse>
          ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค, ๊ทธ๋Ÿฌ๋ฏ€๋กœ <MouseWithCat>๋Š”
          ์•„์ง ์ •๋ง๋กœ ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•œ๊ฒŒ ์•„๋‹™๋‹ˆ๋‹ค.
        */}
        <Cat mouse={this.state} />
      </div>
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <MouseWithCat />
      </div>
    );
  }
}

์ด๋Ÿฌํ•œ ์ ‘๊ทผ ๋ฐฉ๋ฒ•์€ ํŠน์ • ์‚ฌ๋ก€์—์„œ๋Š” ์ ์šฉํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ํ–‰์œ„์˜ ์บก์Šํ™”(๋งˆ์šฐ์Šค ํŠธ๋ž˜ํ‚น)๋ผ๋Š” ๋ชฉํ‘œ๋Š” ๋‹ฌ์„ฑํ•˜์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด์ œ ์šฐ๋ฆฌ๋Š” ๋‹ค๋ฅธ ์‚ฌ์šฉ ์˜ˆ์‹œ์—์„œ๋„ ์–ธ์ œ๋“ ์ง€ ๋งˆ์šฐ์Šค ์œ„์น˜๋ฅผ ์ถ”์ ํ•  ์ˆ˜ ์žˆ๋Š” ์ƒˆ๋กœ์šด component(<MouseWithCat>๊ณผ ๊ทผ๋ณธ์ ์œผ๋กœ ๋‹ค๋ฅธ)๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์— render prop๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. <Mouse> ์ปดํฌ๋„ŒํŠธ ์•ˆ์— <Cat> ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ•˜๋“œ ์ฝ”๋”ฉ(hard-coding)ํ•ด์„œ ๊ฒฐ๊ณผ๋ฌผ์„ ๋ฐ”๊พธ๋Š” ๋Œ€์‹ ์—, <Mouse>์—๊ฒŒ ๋™์ ์œผ๋กœ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ๋Š” ํ•จ์ˆ˜ prop์„ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.โ€Šโ€”โ€Š์ด๊ฒƒ์ด render prop์˜ ๊ฐœ๋…์ž…๋‹ˆ๋‹ค.

class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
    );
  }
}

class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>

        {/*
          <Mouse>๊ฐ€ ๋ฌด์—‡์„ ๋ Œ๋”๋งํ•˜๋Š”์ง€์— ๋Œ€ํ•ด ๋ช…ํ™•ํžˆ ์ฝ”๋“œ๋กœ ํ‘œ๊ธฐํ•˜๋Š” ๋Œ€์‹ ,
          `render` prop์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ฌด์—‡์„ ๋ Œ๋”๋งํ• ์ง€ ๋™์ ์œผ๋กœ ๊ฒฐ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
        */}
        {this.props.render(this.state)}
      </div>
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}

์ด์ œ ์ปดํฌ๋„ŒํŠธ์˜ ํ–‰์œ„๋ฅผ ๋ณต์ œํ•˜๊ธฐ ์œ„ํ•ด ํ•˜๋“œ ์ฝ”๋”ฉํ•  ํ•„์š” ์—†์ด render ํ•จ์ˆ˜์— prop์œผ๋กœ ์ „๋‹ฌํ•ด์คŒ์œผ๋กœ์จ, <Mouse> ์ปดํฌ๋„ŒํŠธ๋Š” ๋™์ ์œผ๋กœ ํŠธ๋ž˜ํ‚น ๊ธฐ๋Šฅ์„ ๊ฐ€์ง„ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ •๋ฆฌํ•˜์ž๋ฉด, render prop์€ ๋ฌด์—‡์„ ๋ Œ๋”๋งํ• ์ง€ ์ปดํฌ๋„ŒํŠธ์— ์•Œ๋ ค์ฃผ๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค.

์ด ํ…Œํฌ๋‹‰์€ ํ–‰์œ„(๋งˆ์šฐ์Šค ํŠธ๋ž˜ํ‚น ๊ฐ™์€)๋ฅผ ๋งค์šฐ ์‰ฝ๊ฒŒ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค. ํ•ด๋‹น ํ–‰์œ„๋ฅผ ์ ์šฉํ•˜๋ ค๋ฉด, <Mouse> ๋ฅผ ๊ทธ๋ฆฌ๊ณ  ํ˜„์žฌ (x, y) ์ปค์„œ ์œ„์น˜์— ๋ฌด์—‡์„ ๊ทธ๋ฆด์ง€์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ prop์„ ํ†ตํ•ด ๋„˜๊ฒจ์ฃผ๊ธฐ๋งŒ ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

render props์— ๋Œ€ํ•ด ํ•œ๊ฐ€์ง€ ํฅ๋ฏธ๋กœ์šด ์ ์€ ๋Œ€๋ถ€๋ถ„์˜ higher-order components(HOC)์— render props pattern์„ ์ด์‹ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค๋ฉด, <Mouse> ์ปดํฌ๋„ŒํŠธ๋ณด๋‹ค withMouse HOC๋ฅผ ๋” ์„ ํ˜ธํ•œ๋‹ค๋ฉด render prop์„ ์ด์šฉํ•ด์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์‰ฝ๊ฒŒ HOC๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// ์–ด๋–ค ์ด์œ  ๋•Œ๋ฌธ์— HOC๋ฅผ ๋งŒ๋“ค๊ธฐ ์›ํ•œ๋‹ค๋ฉด, ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
// render prop์„ ์ด์šฉํ•ด์„œ ์ผ๋ฐ˜์ ์ธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“œ์„ธ์š”!
function withMouse(Component) {
  return class extends React.Component {
    render() {
      return (
        <Mouse render={mouse => (
          <Component {...this.props} mouse={mouse} />
        )}/>
      );
    }
  }
}

๋”ฐ๋ผ์„œ render props๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋‘ ๊ฐ€์ง€ ํŒจํ„ด ๋ชจ๋‘ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

render ์ด์™ธ์˜ Props ์‚ฌ์šฉ๋ฒ•

์—ฌ๊ธฐ์„œ ์ค‘์š”ํ•˜๊ฒŒ ๊ธฐ์–ตํ•ด์•ผ ํ•  ๊ฒƒ์€, โ€œrender props patternโ€์œผ๋กœ ๋ถˆ๋ฆฌ๋Š” ์ด์œ ๋กœ ๊ผญ prop name์œผ๋กœ render๋ฅผ ์‚ฌ์šฉํ•  ํ•„์š”๋Š” ์—†์Šต๋‹ˆ๋‹ค. ์‚ฌ์‹ค, ์–ด๋–ค ํ•จ์ˆ˜ํ˜• prop์ด๋“  render prop์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์œ„ ์˜ˆ์‹œ์—์„œ๋Š” render๋ฅผ ์‚ฌ์šฉํ–ˆ์ง€๋งŒ, ์šฐ๋ฆฌ๋Š” children prop์„ ๋” ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<Mouse children={mouse => (
  <p>The mouse position is {mouse.x}, {mouse.y}</p>
)}/>

์‹ค์ œ๋กœ JSX element์˜ โ€œ์–ดํŠธ๋ฆฌ๋ทฐํŠธโ€๋ชฉ๋ก์— ํ•˜์œ„ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ ์ด๋ฆ„(์˜ˆ๋ฅผ๋“ค๋ฉด render)์„ ์ง€์ •ํ•  ํ•„์š”๋Š” ์—†์Šต๋‹ˆ๋‹ค. ๋Œ€์‹ ์—, element ์•ˆ์— ์ง์ ‘ ๊ฝ‚์•„๋„ฃ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

<Mouse>
  {mouse => (
    <p>The mouse position is {mouse.x}, {mouse.y}</p>
  )}
</Mouse>

์ด ํ…Œํฌ๋‹‰์€ react-motion API์—์„œ ์‹ค์ œ๋กœ ์‚ฌ์šฉ๋œ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ํ…Œํฌ๋‹‰์€ ์ž์ฃผ ์‚ฌ์šฉ๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์—, API๋ฅผ ๋””์ž์ธํ•  ๋•Œ children์€ ํ•จ์ˆ˜ ํƒ€์ž…์„ ๊ฐ€์ง€๋„๋ก propTypes๋ฅผ ์ง€์ •ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

Mouse.propTypes = {
  children: PropTypes.func.isRequired
};

์ฃผ์˜์‚ฌํ•ญ

React.PureComponent์—์„œ render props pattern์„ ์‚ฌ์šฉํ•  ๋• ์ฃผ์˜ํ•ด์ฃผ์„ธ์š”.

render props ํŒจํ„ด์„ ์‚ฌ์šฉํ•˜๋ฉด React.PureComponent๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ์ด์ ์ด ์‚ฌ๋ผ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์–•์€ prop ๋น„๊ต๋Š” ์ƒˆ๋กœ์šด prop์— ๋Œ€ํ•ด ํ•ญ์ƒ false๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ฒฝ์šฐ render๋งˆ๋‹ค render prop์œผ๋กœ ๋„˜์–ด์˜จ ๊ฐ’์„ ํ•ญ์ƒ ์ƒˆ๋กœ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

์œ„์—์„œ ์‚ฌ์šฉํ–ˆ๋˜ <Mouse> ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ์˜ˆ๋ฅผ ๋“ค์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. mouse์— React.Component ๋Œ€์‹ ์— React.PureComponent๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฝ”๋“œ๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.

class Mouse extends React.PureComponent {
  // ์œ„์™€ ๊ฐ™์€ ๊ตฌํ˜„์ฒด...
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>

        {/*
          ์ด๊ฒƒ์€ ์ข‹์ง€ ์•Š์Šต๋‹ˆ๋‹ค! `render` prop์ด ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๊ฐ’์€
          ๊ฐ๊ฐ ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋ง ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.
        */}
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}

์ด ์˜ˆ์‹œ์—์„œ <MouseTracker>๊ฐ€ render ๋ ๋•Œ๋งˆ๋‹ค, <Mouse render>์˜ prop์œผ๋กœ ๋„˜์–ด๊ฐ€๋Š” ํ•จ์ˆ˜๊ฐ€ ๊ณ„์† ์ƒˆ๋กœ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ React.PureComponent๋ฅผ ์ƒ์†๋ฐ›์€ <Mouse> ์ปดํฌ๋„ŒํŠธ ํšจ๊ณผ๊ฐ€ ์‚ฌ๋ผ์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด์„œ, ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ธ์Šคํ„ด์Šค ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์„œ prop์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.

class MouseTracker extends React.Component {
  // `this.renderTheCat`๋ฅผ ํ•ญ์ƒ ์ƒ์„ฑํ•˜๋Š” ๋งค์„œ๋“œ๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.
  // ์ด๊ฒƒ์€ render๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๋งˆ๋‹ค *๊ฐ™์€* ํ•จ์ˆ˜๋ฅผ ์ฐธ์กฐํ•ฉ๋‹ˆ๋‹ค.
  renderTheCat(mouse) {
    return <Cat mouse={mouse} />;
  }

  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={this.renderTheCat} />
      </div>
    );
  }
}

prop์„ ์ •์ ์œผ๋กœ ์ •์˜ํ•  ์ˆ˜ ์—†๋Š” ๊ฒฝ์šฐ์—๋Š” <Mouse> ์ปดํฌ๋„ŒํŠธ๋Š” React.Component๋ฅผ ์ƒ์†๋ฐ›์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค.

Is this page useful?Edit this page