[TIL] 220323

dev·2022년 3ė›” 23ėž
0

TIL

ëŠĐ록 ëģīęļ°
201/204
post-thumbnail

📝 ė˜Ī늘 한 ęēƒ

  1. react state

📖 학ėŠĩ ėžë̌

  1. ėŧī폮넌íŠļ State

  2. setState()

  3. State and Lifecycle

  4. ėīëēĪíŠļ ėē˜ëĶŽí•˜ęļ°


📚 ë°°ėšī ęēƒ

ėƒˆëĄ­ęēŒ ė•ŒęēŒ ëœ ë‚īėšĐėī거나 ėīí•ī하ęļ° ė–īë Īė› ë˜ ëķ€ëķ„ë§Œ ė •ëĶŽ

1. state

1) setState()

setState()는 ėīëēĪíŠļ í•ļë“Ī럮 ë‚īė—ė„œ ëđ„동ęļ°ė ėœžëĄœ ėˆ˜í–‰ëœë‹Ī.
setState()가 ę°™ė€ ėĢžęļ° ë™ė•ˆ ė—ŽëŸŽ ëēˆ í˜ļėķœëë‹ĪëĐī ë‹ĪėŒęģž ę°™ėī ėžęī„ė ėœžëĄœ ėē˜ëĶŽë  눘 ėžˆë‹Ī.

const handleClick = () => {
  this.setState({quantity: this.state.quantity + 1});
  this.setState({quantity: this.state.quantity + 1});
};

ėī는 ë‹ĪėŒ ė―”ë“œė™€ ë™ėží•œ ęē°ęģžëĨž ėķœë Ĩ한ë‹Ī.

// Object.assgin()ė€ 객ėēīë“Īė˜ ëŠĻ든 ė—īęą° 가ëŠĨ한 ėžėēī ė†ė„ąė„ ëģĩė‚Ží•ī ëŒ€ėƒ 객ėēī뗐 ëķ™ė—Žë„Ģė€ 후 ėīëĨž 반환하는 ëĐ”ė„œë“œėīë‹Ī
Object.assign(
  previousState, // ëŒ€ėƒ 객ėēī
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1}, // ęģ„ė† ëŪė–īė“°ęļ°í•  ëŋėīë‹Ī
  ...
);

ė›í•˜ëŠ” 대로 ë‹ĪėŒ state 값ėī ėīė „ state 氒뗐 ęļ°ë°˜í•˜ë„록 하ęļ° ėœ„í•īė„œëŠ” setState()ė˜ ėļėžëĄœ í•Ļ눘ëĨž ë„Ģė–īėĪ˜ė•ž 한ë‹Ī.

const handleClick = () => {
  this.setState((state) => {
    return {quantity: state.quantity + 1};
  });
};

2) State and Lifecycle

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);

ėœ„ė™€ ę°™ė€ í•Ļ눘 ėŧī폮넌íŠļëĨž class로 ëģ€í™˜í–ˆë‹Ī. (React ėŧī폮넌íŠļ뙀 this ė°ļęģ )

cf. ė―œë°ą í•Ļ눘 ë‚īëķ€ė—ė„œė˜ this는, í•īë‹đ ė―œë°ąí•Ļėˆ˜ė˜ 렜ė–īęķŒė„ 넘ęēĻë°›ė€ í•Ļ눘(ė•„ëž˜ ė˜ˆė œė˜ ęē―ėš°ė—ëŠ” setInterval)가 ė •ė˜í•œ ë°”ė— 따ëĨīëа, ė •ė˜í•˜ė§€ ė•Šė€ ęē―ėš°ė—ëŠ” ė „ė—­ 객ėēīëĨž ė°ļėĄ°í•œë‹Ī.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
    this.handleState = this.handleState.bind(this); // 3. thisëĨž 바ėļ드í•īėĪŽë‹Ī
    
    console.log(this); // Clock {...}
  }

  componentDidMount() { // ðŸ’Ą ėŧī폮넌íŠļ가 ėē˜ėŒ 렌더링 되ëĐī í˜ļėķœëĻ
    this.timer = setInterval(this.handleState, 1000);
    // 4. thisëĨž 바ėļë“œí•˜ė§€ ė•Šėœžë ĪëĐī ė—Žęļ°ė„œ 화ė‚ī표 í•Ļ눘ëĨž ė‚ŽėšĐí•īė•ž 한ë‹Ī
    // () => this.handleState()
  }
  
  handleState() {
    console.log(this); // 1. ė—Žęļ°ė„œ this는 ė „ė—­ 객ėēīėīęļ° ë•ŒëŽļ뗐
    
    this.setState((state) => { // 2. ė—Žęļ°ė„œ ė―”ë“œę°€ ëŽļė œė—†ėī ė‹Ī행되도록 하ęļ° ėœ„í•ī
      return { date: new Date() };
    });
  }
  
  UNSAFE_componentWillUnmount() { // ðŸ’Ą ėŧī폮넌íŠļ뗐 ė˜í•ī ėƒė„ąëœ DOMėī ė‚­ė œë˜ëĐī í˜ļėķœëĻ
    clearInterval(this.timer);
    
    console.log(this); // cf. ë‹ĪëĨļ ėƒëŠ…ėĢžęļ° ëĐ”ė„œë“œë“Ī ë‚īëķ€ė˜ this는 Clock {...} ėīë‹Ī
  }

  render() { // ðŸ’Ą ėŧī폮넌íŠļ ë‚īė—ė„œ ë°˜ë“œė‹œ ęĩŽí˜„되ė–īė•ž 할 ėœ ėží•œ í•„ėˆ˜ ëĐ”ė„œë“œ
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

í˜đė€ ë‹ĪėŒęģž ę°™ėī ėž‘ė„ąí•  ėˆ˜ë„ ėžˆë‹Ī.

const Clock = () => {
  const [date, setDate] = useState(new Date());
  
  const updateDate = () => {
    setInterval(() => setDate(new Date()), 1000);
  };
  
  useEffect(updateDate, []); // ėŧī폮넌íŠļ가 ėē˜ėŒ 렌더링 되ëĐī ė‹Ī행ëĻ
  
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
};

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

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

3) ėīëēĪíŠļ ėē˜ëĶŽí•˜ęļ°

ES6 classė˜ ëģļëŽļė€ ęļ°ëģļė ėœžëĄœ strict modeė—ė„œ ė‹Ī행된ë‹Ī.
ėīëēĪíŠļ í•ļë“Ī럮 í•Ļ눘 ë‚īëķ€ė—ė„œė˜ this는 바ėļë”Đ í•īėĢžė§€ ė•ŠëŠ” 한 undefinedė˜ ę°’ė„ 氀맄ë‹Ī.

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    this.handleClick = this.handleClick.bind(this); // thisëĨž 바ėļ드í•īėĪŽë‹Ī. ë§Œė•― thisëĨž 바ėļë“œí•˜ė§€ ė•Šė•˜ë‹ĪëĐī
  }

  handleClick() {
    console.log(this); // ė—Žęļ°ė„œ this는 undefined가 되ė–ī

    this.setState(prevState => ({ // ėī ė―”ë“œëĨž ė‹Ī행할 때 ëŽļė œę°€ ë°œėƒí–ˆė„ ęēƒėīë‹Ī
      isToggleOn: !prevState.isToggleOn
    }));
  }

  add() {
    console.log(this);
  }
  
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

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

âœĻ ë‚īėž 할 ęēƒ

  1. react controlled

  2. react ę°•ė˜ ë“Ģęļ°

profile
dev log

0ę°œė˜ 댓ęļ€