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

State and Lifecycle

์ด ํŽ˜์ด์ง€๋Š” React ์ปดํฌ๋„ŒํŠธ ์•ˆ์˜ state์™€ ์ƒ๋ช…์ฃผ๊ธฐ์— ๋Œ€ํ•œ ๊ฐœ๋…์„ ์†Œ๊ฐœํ•ด ์ค๋‹ˆ๋‹ค. ์ž์„ธํ•œ ์ปดํฌ๋„ŒํŠธ API ๋ ˆํผ๋Ÿฐ์Šค๋Š” ์—ฌ๊ธฐ์—์„œ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด์ „ ์„น์…˜์—์„œ ๋‹ค๋ค„๋ณธ ์งธ๊น๊ฑฐ๋ฆฌ๋Š” ์‹œ๊ณ„ ์˜ˆ์‹œ๋ฅผ ๋‹ค์‹œ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์—˜๋ฆฌ๋จผํŠธ ๋ Œ๋”๋ง์—์„œ๋Š” UI๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๋Š” ํ•œ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•๋งŒ ๋ฐฐ์› ์œผ๋ฉฐ, ๋ Œ๋”๋ง ๋œ ์ถœ๋ ฅ๊ฐ’์„ ๋ณ€๊ฒฝํ•˜๊ธฐ ์œ„ํ•ด ReactDOM.render()๋ฅผ ํ˜ธ์ถœํ–ˆ์Šต๋‹ˆ๋‹ค.

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(    element,    document.getElementById('root')  );}

setInterval(tick, 1000);

CodePen์—์„œ ์‹œ๋„ํ•ด๋ณด๊ธฐ

์ด ์„น์…˜์—์„œ๋Š” Clock ์ปดํฌ๋„ŒํŠธ๋ฅผ ์™„์ „ํžˆ ์žฌ์‚ฌ์šฉํ•˜๊ณ  ์บก์Šํ™”ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šธ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด ์ปดํฌ๋„ŒํŠธ๋Š” ์Šค์Šค๋กœ ํƒ€์ด๋จธ๋ฅผ ์„ค์ •ํ•  ๊ฒƒ์ด๊ณ  ๋งค์ดˆ ์Šค์Šค๋กœ ์—…๋ฐ์ดํŠธํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์‹œ๊ณ„๊ฐ€ ์ƒ๊ธด ๊ฒƒ์— ๋”ฐ๋ผ ์บก์Šํ™”ํ•˜๋Š” ๊ฒƒ์œผ๋กœ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

function Clock(props) {
  return (
    <div>      <h1>Hello, world!</h1>      <h2>It is {props.date.toLocaleTimeString()}.</h2>    </div>  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,    document.getElementById('root')
  );
}

setInterval(tick, 1000);

CodePen์—์„œ ์‹œ๋„ํ•ด๋ณด๊ธฐ

๊ทธ๋Ÿฌ๋‚˜ ์—ฌ๊ธฐ์—๋Š” ์ค‘์š”ํ•œ ์š”๊ฑด์ด ๋ˆ„๋ฝ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. Clock์ด ํƒ€์ด๋จธ๋ฅผ ์„ค์ •ํ•˜๊ณ  ๋งค์ดˆ UI๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๋Š” ๊ฒƒ์ด Clock์˜ ๊ตฌํ˜„ ์„ธ๋ถ€์‚ฌํ•ญ์ด ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ด์ƒ์ ์œผ๋กœ ํ•œ ๋ฒˆ๋งŒ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  Clock์ด ์Šค์Šค๋กœ ์—…๋ฐ์ดํŠธํ•˜๋„๋ก ๋งŒ๋“ค๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

ReactDOM.render(
  <Clock />,  document.getElementById('root')
);

์ด๊ฒƒ์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด์„œ Clock ์ปดํฌ๋„ŒํŠธ์— โ€œstateโ€๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

State๋Š” props์™€ ์œ ์‚ฌํ•˜์ง€๋งŒ, ๋น„๊ณต๊ฐœ์ด๋ฉฐ ์ปดํฌ๋„ŒํŠธ์— ์˜ํ•ด ์™„์ „ํžˆ ์ œ์–ด๋ฉ๋‹ˆ๋‹ค.

ํ•จ์ˆ˜์—์„œ ํด๋ž˜์Šค๋กœ ๋ณ€ํ™˜ํ•˜๊ธฐ

๋‹ค์„ฏ ๋‹จ๊ณ„๋กœ Clock๊ณผ ๊ฐ™์€ ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํด๋ž˜์Šค๋กœ ๋ณ€ํ™˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  1. React.Component๋ฅผ ํ™•์žฅํ•˜๋Š” ๋™์ผํ•œ ์ด๋ฆ„์˜ ES6 class๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
  2. render()๋ผ๊ณ  ๋ถˆ๋ฆฌ๋Š” ๋นˆ ๋ฉ”์„œ๋“œ๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.
  3. ํ•จ์ˆ˜์˜ ๋‚ด์šฉ์„ render() ๋ฉ”์„œ๋“œ ์•ˆ์œผ๋กœ ์˜ฎ๊น๋‹ˆ๋‹ค.
  4. render() ๋‚ด์šฉ ์•ˆ์— ์žˆ๋Š” props๋ฅผ this.props๋กœ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค.
  5. ๋‚จ์•„์žˆ๋Š” ๋นˆ ํ•จ์ˆ˜ ์„ ์–ธ์„ ์‚ญ์ œํ•ฉ๋‹ˆ๋‹ค.
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

CodePen์—์„œ ์‹œ๋„ํ•ด๋ณด๊ธฐ

Clock์€ ์ด์ œ ํ•จ์ˆ˜๊ฐ€ ์•„๋‹Œ ํด๋ž˜์Šค๋กœ ์ •์˜๋ฉ๋‹ˆ๋‹ค.

render ๋ฉ”์„œ๋“œ๋Š” ์—…๋ฐ์ดํŠธ๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ๋งˆ๋‹ค ํ˜ธ์ถœ๋˜์ง€๋งŒ, ๊ฐ™์€ DOM ๋…ธ๋“œ๋กœ <Clock />์„ ๋ Œ๋”๋งํ•˜๋Š” ๊ฒฝ์šฐ Clock ํด๋ž˜์Šค์˜ ๋‹จ์ผ ์ธ์Šคํ„ด์Šค๋งŒ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋กœ์ปฌ state์™€ ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ์™€ ๊ฐ™์€ ๋ถ€๊ฐ€์ ์ธ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค.

ํด๋ž˜์Šค์— ๋กœ์ปฌ State ์ถ”๊ฐ€ํ•˜๊ธฐ

์„ธ ๋‹จ๊ณ„์— ๊ฑธ์ณ์„œ date๋ฅผ props์—์„œ state๋กœ ์ด๋™ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

  1. render() ๋ฉ”์„œ๋“œ ์•ˆ์— ์žˆ๋Š” this.props.date๋ฅผ this.state.date๋กœ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค.
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>      </div>
    );
  }
}
  1. ์ดˆ๊ธฐ this.state๋ฅผ ์ง€์ •ํ•˜๋Š” class constructor๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

์—ฌ๊ธฐ์„œ ์–ด๋–ป๊ฒŒ props๋ฅผ ๊ธฐ๋ณธ constructor์— ์ „๋‹ฌํ•˜๋Š”์ง€ ์œ ์˜ํ•ด์ฃผ์„ธ์š”.

  constructor(props) {
    super(props);    this.state = {date: new Date()};
  }

ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ๋Š” ํ•ญ์ƒ props๋กœ ๊ธฐ๋ณธ constructor๋ฅผ ํ˜ธ์ถœํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  1. <Clock /> ์š”์†Œ์—์„œ date prop์„ ์‚ญ์ œํ•ฉ๋‹ˆ๋‹ค.
ReactDOM.render(
  <Clock />,  document.getElementById('root')
);

ํƒ€์ด๋จธ ์ฝ”๋“œ๋Š” ๋‚˜์ค‘์— ๋‹ค์‹œ ์ปดํฌ๋„ŒํŠธ๋กœ ์ถ”๊ฐ€ํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๊ฒฐ๊ณผ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

class Clock extends React.Component {
  constructor(props) {    super(props);    this.state = {date: new Date()};  }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,  document.getElementById('root')
);

CodePen์—์„œ ์‹œ๋„ํ•ด๋ณด๊ธฐ

๋‹ค์Œ์œผ๋กœ Clock์ด ์Šค์Šค๋กœ ํƒ€์ด๋จธ๋ฅผ ์„ค์ •ํ•˜๊ณ  ๋งค์ดˆ ์Šค์Šค๋กœ ์—…๋ฐ์ดํŠธํ•˜๋„๋ก ๋งŒ๋“ค์–ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ๋ฅผ ํด๋ž˜์Šค์— ์ถ”๊ฐ€ํ•˜๊ธฐ

๋งŽ์€ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žˆ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์‚ญ์ œ๋  ๋•Œ ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์‚ฌ์šฉ ์ค‘์ด๋˜ ๋ฆฌ์†Œ์Šค๋ฅผ ํ™•๋ณดํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

Clock์ด ์ฒ˜์Œ DOM์— ๋ Œ๋”๋ง ๋  ๋•Œ๋งˆ๋‹ค ํƒ€์ด๋จธ๋ฅผ ์„ค์ •ํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ React์—์„œ โ€œ๋งˆ์šดํŒ…โ€์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

๋˜ํ•œ Clock์— ์˜ํ•ด ์ƒ์„ฑ๋œ DOM์ด ์‚ญ์ œ๋  ๋•Œ๋งˆ๋‹ค ํƒ€์ด๋จธ๋ฅผ ํ•ด์ œํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ React์—์„œ โ€œ์–ธ๋งˆ์šดํŒ…โ€์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

์ปดํฌ๋„ŒํŠธ ํด๋ž˜์Šค์—์„œ ํŠน๋ณ„ํ•œ ๋ฉ”์„œ๋“œ๋ฅผ ์„ ์–ธํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ๋˜๊ฑฐ๋‚˜ ์–ธ๋งˆ์šดํŠธ ๋  ๋•Œ ์ผ๋ถ€ ์ฝ”๋“œ๋ฅผ ์ž‘๋™ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {  }
  componentWillUnmount() {  }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

์ด๋Ÿฌํ•œ ๋ฉ”์„œ๋“œ๋“ค์€ โ€œ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œโ€๋ผ๊ณ  ๋ถˆ๋ฆฝ๋‹ˆ๋‹ค.

componentDidMount() ๋ฉ”์„œ๋“œ๋Š” ์ปดํฌ๋„ŒํŠธ ์ถœ๋ ฅ๋ฌผ์ด DOM์— ๋ Œ๋”๋ง ๋œ ํ›„์— ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค. ์ด ์žฅ์†Œ๊ฐ€ ํƒ€์ด๋จธ๋ฅผ ์„ค์ •ํ•˜๊ธฐ์— ์ข‹์€ ์žฅ์†Œ์ž…๋‹ˆ๋‹ค.

  componentDidMount() {
    this.timerID = setInterval(      () => this.tick(),      1000    );  }

this (this.timerID)์—์„œ ์–ด๋–ป๊ฒŒ ํƒ€์ด๋จธ ID๋ฅผ ์ œ๋Œ€๋กœ ์ €์žฅํ•˜๋Š”์ง€ ์ฃผ์˜ํ•ด์ฃผ์„ธ์š”.

this.props๊ฐ€ React์— ์˜ํ•ด ์Šค์Šค๋กœ ์„ค์ •๋˜๊ณ  this.state๊ฐ€ ํŠน์ˆ˜ํ•œ ์˜๋ฏธ๊ฐ€ ์žˆ์ง€๋งŒ, ํƒ€์ด๋จธ ID์™€ ๊ฐ™์ด ๋ฐ์ดํ„ฐ ํ๋ฆ„ ์•ˆ์— ํฌํ•จ๋˜์ง€ ์•Š๋Š” ์–ด๋–ค ํ•ญ๋ชฉ์„ ๋ณด๊ด€ํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค๋ฉด ์ž์œ ๋กญ๊ฒŒ ํด๋ž˜์Šค์— ์ˆ˜๋™์œผ๋กœ ๋ถ€๊ฐ€์ ์ธ ํ•„๋“œ๋ฅผ ์ถ”๊ฐ€ํ•ด๋„ ๋ฉ๋‹ˆ๋‹ค.

componentWillUnmount() ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ ์•ˆ์— ์žˆ๋Š” ํƒ€์ด๋จธ๋ฅผ ๋ถ„ํ•ดํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

  componentWillUnmount() {
    clearInterval(this.timerID);  }

๋งˆ์ง€๋ง‰์œผ๋กœ Clock ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งค์ดˆ ์ž‘๋™ํ•˜๋„๋ก ํ•˜๋Š” tick()์ด๋ผ๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ๊ตฌํ˜„ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ์ปดํฌ๋„ŒํŠธ ๋กœ์ปฌ state๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๊ธฐ ์œ„ํ•ด this.setState()๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {    this.setState({      date: new Date()    });  }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

CodePen์—์„œ ์‹œ๋„ํ•ด๋ณด๊ธฐ

์ด์ œ ์‹œ๊ณ„๋Š” ๋งค์ดˆ ์งธ๊น๊ฑฐ๋ฆฝ๋‹ˆ๋‹ค.

ํ˜„์žฌ ์–ด๋–ค ์ƒํ™ฉ์ด๊ณ  ๋ฉ”์„œ๋“œ๊ฐ€ ์–ด๋–ป๊ฒŒ ํ˜ธ์ถœ๋˜๋Š”์ง€ ์ˆœ์„œ๋Œ€๋กœ ๋น ๋ฅด๊ฒŒ ์š”์•ฝํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

  1. <Clock />๊ฐ€ ReactDOM.render()๋กœ ์ „๋‹ฌ๋˜์—ˆ์„ ๋•Œ React๋Š” Clock ์ปดํฌ๋„ŒํŠธ์˜ constructor๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. Clock์ด ํ˜„์žฌ ์‹œ๊ฐ์„ ํ‘œ์‹œํ•ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํ˜„์žฌ ์‹œ๊ฐ์ด ํฌํ•จ๋œ ๊ฐ์ฒด๋กœ this.state๋ฅผ ์ดˆ๊ธฐํ™”ํ•ฉ๋‹ˆ๋‹ค. ๋‚˜์ค‘์— ์ด state๋ฅผ ์—…๋ฐ์ดํŠธํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.
  2. React๋Š” Clock ์ปดํฌ๋„ŒํŠธ์˜ render() ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด React๋Š” ํ™”๋ฉด์— ํ‘œ์‹œ๋˜์–ด์•ผ ํ•  ๋‚ด์šฉ์„ ์•Œ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ ๋‹ค์Œ React๋Š” Clock์˜ ๋ Œ๋”๋ง ์ถœ๋ ฅ๊ฐ’์„ ์ผ์น˜์‹œํ‚ค๊ธฐ ์œ„ํ•ด DOM์„ ์—…๋ฐ์ดํŠธํ•ฉ๋‹ˆ๋‹ค.
  3. Clock ์ถœ๋ ฅ๊ฐ’์ด DOM์— ์‚ฝ์ž…๋˜๋ฉด, React๋Š” componentDidMount() ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ์•ˆ์—์„œ Clock ์ปดํฌ๋„ŒํŠธ๋Š” ๋งค์ดˆ ์ปดํฌ๋„ŒํŠธ์˜ tick() ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๊ธฐ ์œ„ํ•œ ํƒ€์ด๋จธ๋ฅผ ์„ค์ •ํ•˜๋„๋ก ๋ธŒ๋ผ์šฐ์ €์— ์š”์ฒญํ•ฉ๋‹ˆ๋‹ค.
  4. ๋งค์ดˆ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ tick() ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ์•ˆ์—์„œ Clock ์ปดํฌ๋„ŒํŠธ๋Š” setState()์— ํ˜„์žฌ ์‹œ๊ฐ์„ ํฌํ•จํ•˜๋Š” ๊ฐ์ฒด๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด์„œ UI ์—…๋ฐ์ดํŠธ๋ฅผ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค. setState() ํ˜ธ์ถœ ๋•๋ถ„์— React๋Š” state๊ฐ€ ๋ณ€๊ฒฝ๋œ ๊ฒƒ์„ ์ธ์ง€ํ•˜๊ณ  ํ™”๋ฉด์— ํ‘œ์‹œ๋  ๋‚ด์šฉ์„ ์•Œ์•„๋‚ด๊ธฐ ์œ„ํ•ด render() ๋ฉ”์„œ๋“œ๋ฅผ ๋‹ค์‹œ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. ์ด ๋•Œ render() ๋ฉ”์„œ๋“œ ์•ˆ์˜ this.state.date๊ฐ€ ๋‹ฌ๋ผ์ง€๊ณ  ๋ Œ๋”๋ง ์ถœ๋ ฅ๊ฐ’์€ ์—…๋ฐ์ดํŠธ๋œ ์‹œ๊ฐ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. React๋Š” ์ด์— ๋”ฐ๋ผ DOM์„ ์—…๋ฐ์ดํŠธํ•ฉ๋‹ˆ๋‹ค.
  5. Clock ์ปดํฌ๋„ŒํŠธ๊ฐ€ DOM์œผ๋กœ๋ถ€ํ„ฐ ํ•œ ๋ฒˆ์ด๋ผ๋„ ์‚ญ์ œ๋œ ์ ์ด ์žˆ๋‹ค๋ฉด React๋Š” ํƒ€์ด๋จธ๋ฅผ ๋ฉˆ์ถ”๊ธฐ ์œ„ํ•ด componentWillUnmount() ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค.

State๋ฅผ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์‚ฌ์šฉํ•˜๊ธฐ

setState()์— ๋Œ€ํ•ด์„œ ์•Œ์•„์•ผ ํ•  ์„ธ ๊ฐ€์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

์ง์ ‘ State๋ฅผ ์ˆ˜์ •ํ•˜์ง€ ๋งˆ์„ธ์š”

์˜ˆ๋ฅผ ๋“ค์–ด, ์ด ์ฝ”๋“œ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‹ค์‹œ ๋ Œ๋”๋งํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

// Wrong
this.state.comment = 'Hello';

๋Œ€์‹ ์— setState()๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

// Correct
this.setState({comment: 'Hello'});

this.state๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋Š” ์œ ์ผํ•œ ๊ณต๊ฐ„์€ ๋ฐ”๋กœ constructor์ž…๋‹ˆ๋‹ค.

State ์—…๋ฐ์ดํŠธ๋Š” ๋น„๋™๊ธฐ์ ์ผ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

React๋Š” ์„ฑ๋Šฅ์„ ์œ„ํ•ด ์—ฌ๋Ÿฌ setState() ํ˜ธ์ถœ์„ ๋‹จ์ผ ์—…๋ฐ์ดํŠธ๋กœ ํ•œ๊บผ๋ฒˆ์— ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

this.props์™€ this.state๊ฐ€ ๋น„๋™๊ธฐ์ ์œผ๋กœ ์—…๋ฐ์ดํŠธ๋  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค์Œ state๋ฅผ ๊ณ„์‚ฐํ•  ๋•Œ ํ•ด๋‹น ๊ฐ’์— ์˜์กดํ•ด์„œ๋Š” ์•ˆ ๋ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ๋‹ค์Œ ์ฝ”๋“œ๋Š” ์นด์šดํ„ฐ ์—…๋ฐ์ดํŠธ์— ์‹คํŒจํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

์ด๋ฅผ ์ˆ˜์ •ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ์ฒด๋ณด๋‹ค๋Š” ํ•จ์ˆ˜๋ฅผ ์ธ์ž๋กœ ์‚ฌ์šฉํ•˜๋Š” ๋‹ค๋ฅธ ํ˜•ํƒœ์˜ setState()๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ํ•จ์ˆ˜๋Š” ์ด์ „ state๋ฅผ ์ฒซ ๋ฒˆ์งธ ์ธ์ž๋กœ ๋ฐ›์•„๋“ค์ผ ๊ฒƒ์ด๊ณ , ์—…๋ฐ์ดํŠธ๊ฐ€ ์ ์šฉ๋œ ์‹œ์ ์˜ props๋ฅผ ๋‘ ๋ฒˆ์งธ ์ธ์ž๋กœ ๋ฐ›์•„๋“ค์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

์œ„์—์„œ๋Š” ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ–ˆ์ง€๋งŒ, ์ผ๋ฐ˜์ ์ธ ํ•จ์ˆ˜์—์„œ๋„ ์ •์ƒ์ ์œผ๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

// Correct
this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

State ์—…๋ฐ์ดํŠธ๋Š” ๋ณ‘ํ•ฉ๋ฉ๋‹ˆ๋‹ค

setState()๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ React๋Š” ์ œ๊ณตํ•œ ๊ฐ์ฒด๋ฅผ ํ˜„์žฌ state๋กœ ๋ณ‘ํ•ฉํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, state๋Š” ๋‹ค์–‘ํ•œ ๋…๋ฆฝ์ ์ธ ๋ณ€์ˆ˜๋ฅผ ํฌํ•จํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  constructor(props) {
    super(props);
    this.state = {
      posts: [],      comments: []    };
  }

๋ณ„๋„์˜ setState() ํ˜ธ์ถœ๋กœ ์ด๋Ÿฌํ•œ ๋ณ€์ˆ˜๋ฅผ ๋…๋ฆฝ์ ์œผ๋กœ ์—…๋ฐ์ดํŠธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments      });
    });
  }

๋ณ‘ํ•ฉ์€ ์–•๊ฒŒ ์ด๋ฃจ์–ด์ง€๊ธฐ ๋•Œ๋ฌธ์— this.setState({comments})๋Š” this.state.posts์— ์˜ํ–ฅ์„ ์ฃผ์ง„ ์•Š์ง€๋งŒ this.state.comments๋Š” ์™„์ „ํžˆ ๋Œ€์ฒด๋ฉ๋‹ˆ๋‹ค.

๋ฐ์ดํ„ฐ๋Š” ์•„๋ž˜๋กœ ํ๋ฆ…๋‹ˆ๋‹ค

๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๋‚˜ ์ž์‹ ์ปดํฌ๋„ŒํŠธ ๋ชจ๋‘ ํŠน์ • ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์œ ์ƒํƒœ์ธ์ง€ ๋˜๋Š” ๋ฌด์ƒํƒœ์ธ์ง€ ์•Œ ์ˆ˜ ์—†๊ณ , ๊ทธ๋“ค์ด ํ•จ์ˆ˜๋‚˜ ํด๋ž˜์Šค๋กœ ์ •์˜๋˜์—ˆ๋Š”์ง€์— ๋Œ€ํ•ด์„œ ๊ด€์‹ฌ์„ ๊ฐ€์งˆ ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

์ด ๋•Œ๋ฌธ์— state๋Š” ์ข…์ข… ๋กœ์ปฌ ๋˜๋Š” ์บก์Šํ™”๋ผ๊ณ  ๋ถˆ๋ฆฝ๋‹ˆ๋‹ค. state๊ฐ€ ์†Œ์œ ํ•˜๊ณ  ์„ค์ •ํ•œ ์ปดํฌ๋„ŒํŠธ ์ด์™ธ์—๋Š” ์–ด๋– ํ•œ ์ปดํฌ๋„ŒํŠธ์—๋„ ์ ‘๊ทผํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์ปดํฌ๋„ŒํŠธ๋Š” ์ž์‹ ์˜ state๋ฅผ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์— props๋กœ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<FormattedDate date={this.state.date} />

FormattedDate ์ปดํฌ๋„ŒํŠธ๋Š” date๋ฅผ ์ž์‹ ์˜ props๋กœ ๋ฐ›์„ ๊ฒƒ์ด๊ณ  ์ด๊ฒƒ์ด Clock์˜ state๋กœ๋ถ€ํ„ฐ ์™”๋Š”์ง€, Clock์˜ props์—์„œ ์™”๋Š”์ง€, ์ˆ˜๋™์œผ๋กœ ์ž…๋ ฅํ•œ ๊ฒƒ์ธ์ง€ ์•Œ์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค.

function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

CodePen์—์„œ ์‹œ๋„ํ•ด๋ณด๊ธฐ

์ผ๋ฐ˜์ ์œผ๋กœ ์ด๋ฅผ โ€œํ•˜ํ–ฅ์‹(top-down)โ€ ๋˜๋Š” โ€œ๋‹จ๋ฐฉํ–ฅ์‹โ€ ๋ฐ์ดํ„ฐ ํ๋ฆ„์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  state๋Š” ํ•ญ์ƒ ํŠน์ •ํ•œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์†Œ์œ ํ•˜๊ณ  ์žˆ์œผ๋ฉฐ ๊ทธ state๋กœ๋ถ€ํ„ฐ ํŒŒ์ƒ๋œ UI ๋˜๋Š” ๋ฐ์ดํ„ฐ๋Š” ์˜ค์ง ํŠธ๋ฆฌ๊ตฌ์กฐ์—์„œ ์ž์‹ ์˜ โ€œ์•„๋ž˜โ€์— ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ์—๋งŒ ์˜ํ–ฅ์„ ๋ฏธ์นฉ๋‹ˆ๋‹ค.

ํŠธ๋ฆฌ๊ตฌ์กฐ๊ฐ€ props๋“ค์˜ ํญํฌ๋ผ๊ณ  ์ƒ์ƒํ•˜๋ฉด ๊ฐ ์ปดํฌ๋„ŒํŠธ์˜ state๋Š” ์ž„์˜์˜ ์ ์—์„œ ๋งŒ๋‚˜์ง€๋งŒ ๋™์‹œ์— ์•„๋ž˜๋กœ ํ๋ฅด๋Š” ๋ถ€๊ฐ€์ ์ธ ์ˆ˜์›(water source)์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์™„์ „ํžˆ ๋…๋ฆฝ์ ์ด๋ผ๋Š” ๊ฒƒ์„ ๋ณด์—ฌ์ฃผ๊ธฐ ์œ„ํ•ด App ๋ Œ๋”๋งํ•˜๋Š” ์„ธ ๊ฐœ์˜ <Clock>์„ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

function App() {
  return (
    <div>
      <Clock />      <Clock />      <Clock />    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

CodePen์—์„œ ์‹œ๋„ํ•ด๋ณด๊ธฐ

๊ฐ Clock์€ ์ž์‹ ๋งŒ์˜ ํƒ€์ด๋จธ๋ฅผ ์„ค์ •ํ•˜๊ณ  ๋…๋ฆฝ์ ์œผ๋กœ ์—…๋ฐ์ดํŠธ๋ฅผ ํ•ฉ๋‹ˆ๋‹ค.

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

Is this page useful?Edit this page