โ—‹ State๐Ÿ”… & Event

state : ์ƒํƒœ ํ™”๋ฉด์— ๋ณด์—ฌ์ค„ ์ปดํฌ๋„ŒํŠธ์˜ UI ์ •๋ณด(์ƒํƒœ)๋ฅผ ์ง€๋‹ˆ๊ณ  ์žˆ๋Š”ย ๊ฐ์ฒด


โ— State ๊ฐ์ฒด

- `constructor()` ์— ์œ„์น˜. `constructor()`๋Š” ํŽ˜์ด์ง€๊ฐ€ ๋ Œ๋”๋  ๋•Œ ์ดˆ๊ธฐํ™”๋˜๋Š” ๊ฐ’๋“ค
constructor() {
    super();
    this.state = {
      color: 'red',
    };
  }

<h1 style= >Class Component | State</h1>

// this : ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ
// this.state : ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ์˜ state ๊ฐ์ฒด
// this.state.color : state ๊ฐ์ฒด์˜ ํŠน์ • key(color)๊ฐ’. ์ฆ‰ "red"


โ— setState()

  • constructor()์—์„œ ์„ ์–ธ๋œ state์˜ ๊ฐ’์„ ๋ณ€๊ฒฝํ•  ๋•Œ ์‚ฌ์šฉ
import React, { Component } from "react";

class State extends Component {
  constructor() {
    super();
    this.state = {
      color: "red",
    };
  }

  // `handleColor`ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ state์˜ ๊ฐ’์„ ๋ณ€๊ฒฝํ•˜๊ฒ ๋‹ค = setState
  handleColor = () => {
    this.setState({
      color: "blue",
    });
  };

  render() {
    return (
      <div>
        <h1 style=>Class Component | State</h1>
        <button onClick={this.handleColor}>Click</button>
      </div>
    );
  }
}

export default State;



โ—‹ Props & Event

props : properties(์†์„ฑ) props๋Š” ๋ถ€๋ชจ component๋กœ๋ถ€ํ„ฐ ์ „๋‹ฌ ๋ฐ›์€ ๋ฐ์ดํ„ฐ๋ฅผ ์ง€๋‹ˆ๊ณ  ์žˆ๋Š” ๊ฐ์ฒด


โ—props ๊ฐ์ฒด

  • Parent.js
    • ๋ถ€๋ชจ component์—์„œ ์ž์‹ component๋กœ state๊ฐ’์„ ์ „๋‹ฌํ•˜๊ธฐ ์œ„ํ•œ ์ค€๋น„
      • <Child titleColor={this.state.color}/> titleColor๋ผ๋Š” Attribute๋ฅผ ์ž„์˜๋กœ ์ง€์ •ํ•˜์—ฌ state ๊ฐ์ฒด์˜ color๊ฐ’์„ ์ „๋‹ฌ
// Parent.js
import React from "react";
import Child from "../pages/Children/Children";

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      color: "red",
    };
  }

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <Child titleColor={this.state.color} />
      </div>
    );
  }
}

export default State;


  • Child.js
    • ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ ์ „๋‹ฌ ๋ฐ›์€ props ๋ฐ์ดํ„ฐ๋ฅผ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ• ๊นŒ?

      • {color : this.props.titleColor} ์ „๋‹ฌ๋ฐ›์€ props ๊ฐ์ฒด์˜ titleColor๊ฐ’
// Child.js
import React from "react";

class Child extends React.Component {
  render() {
    // console.log(this.props); ๋ถ€๋ชจ๋กœ ๋ถ€ํ„ฐ ์ „๋‹ฌ๋ฐ›์€ props๊ฐ’ ํ™•์ธ
    return (
      <div>
        <h1 style=>Child Component</h1>
        // this : ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ // this.props : ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ์˜ props ๊ฐ์ฒด // this.props.titleColor
        : props ๊ฐ์ฒด์˜ ํŠน์ • key(titleColor)๊ฐ’. ์ฆ‰ "red"
      </div>
    );
  }
}

export default State;


โ— Props & event

  • ์ž์‹์—๊ฒŒ ์ „๋‹ฌํ•  state๊ฐ’๊ณผ ํ•จ์ˆ˜๋ฅผ ์„ ์–ธ
    • state๋Š” titleColor๋ผ๋Š” Attribute๋ฅผ ํ†ตํ•ด ์ „๋‹ฌ
    • handleColor ๋ฉ”์„œ๋“œ๋Š” changeColor๋ผ๋Š” Attribute๋ฅผ ํ†ตํ•ด ์ „๋‹ฌ
// Parent.js
import React from "react";
import Child from "../pages/Children/Children";

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      color: "red",
    };
  }

  handleColor = () => {
    this.setState({
      color: "blue",
    });
  };

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <Child titleColor={this.state.color} changeColor={this.handleColor} />
      </div>
    );
  }
}

export default State;


  • ๋ถ€๋ชจ์—๊ฒŒ ์ „๋‹ฌ๋ฐ›์€ props๋ฅผ
    • h1์˜ ์Šคํƒ€์ผ๋ง์—์„œ ์‚ฌ์šฉ style=
    • button์˜ onClick ์ด๋ฒคํŠธ ๋ฐœ์ƒ์‹œ ํ•จ์ˆ˜ ํ˜ธ์ถœ onClick= this.props.changeColor}
// Child.js
import React from 'react';

class Child extends React.Component {
  render() {
    // console.log(this.props);

    return (
      <div>
        <h1 style=>Child Component</h1>
		<button onClick= this.props.changeColor}>Click</button>
      </div>
    );
  }
}

export default State;



โœ… ๋ชฉํ‘œ!

  • state์˜ ๊ฐœ๋…์— ๋Œ€ํ•ด ํ•œ ๋ฌธ์žฅ์œผ๋กœ ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ๋‹ค
    • component์˜ UI ์ƒํƒœ๊ฐ’(์ดˆ๊ธฐ ์…‹ํŒ…๊ฐ’?)์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๊ฐ์ฒด
  • ๋ถ€๋ชจ ์š”์†Œ์˜ state ๋ฐ์ดํ„ฐ๋ฅผ ์ž์‹ ์š”์†Œ์—์„œ ๋ฐ˜์˜์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค
  • ์ด๋ฒคํŠธ๋ฅผ ํ†ตํ•ด state ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋‹ค
    • setState()
  • props์˜ ๊ฐœ๋…์— ๋Œ€ํ•ด ํ•œ ๋ฌธ์žฅ์œผ๋กœ ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ๋‹ค
    • ๋ถ€๋ชจ๋กœ๋ถ€ํ„ฐ ๋ฐ›์€ ๋ฐ์ดํ„ฐ๋ฅผ ์ง€๋‹ˆ๊ณ  ์žˆ๋Š” ๊ฐ์ฒด
    • props๋Š” ์ฝ๊ธฐ ์ „์šฉ
  • ๋ถ€๋ชจ state - ์ž์‹์˜ props - ์ž์‹ component ์–ด๋–ป๊ฒŒ ์—ฐ๊ฒฐ๋˜๋Š”์ง€ ๋ช…ํ™•ํžˆ ์ดํ•ดํ•œ๋‹ค
  • props ๊ฐœ๋…์„ ํ™œ์šฉํ•˜์—ฌ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ผ์–ด๋‚œ ์ด๋ฒคํŠธ๋กœ ๋ถ€๋ชจ์˜ state ๊ฐ’์„ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋‹ค

React_doc