제로초 리액트 강의 3.5

render() 안에는 절대 setState를 넣지 않는다!

무한 반복 됨

---

자식은 props를 바꾸지 않아야하지만

어쩔수없이 부모로부터 받은 props를 바꿔야 할 때는 props를 state로 넣어서 바꾼다

그래야 부모에게 영향이 가지 않음

> 자식이 props를 바꾸면 부모도 뜻하지 않게 바뀔 수 있음

// hooks
import React, { memo, useState } from 'react';

const Try = memo( ({ tryInfo }) => {
  const [result, setResult] = useState(tryInfo.result);

  const onClick = () => {
    setResult('1');
  };

  return (
    <li>
      <div>{tryInfo.try}</div>
      <div onClick={onClick}>{result}</div>
    </li>
  )
});

export default Try;

// class
import React, { PureComponent } from 'react';

class Try extends PureComponent {
  state = {
    result: this.props.result,
    try: this.props.try,
  }
    render() {
        return (
           <li>
               <div>{this.props.tryInfo.try}</div>
               <div>{this.props.tryInfo.result}</div>
           </li>
        )
    }
}

export default Try;

class는 이렇게도 가능(constructor 사용) > 기본 객체로는 부족할 때 정밀한 설정이 필요할 때

import React, { PureComponent } from 'react';

class Try extends PureComponent {
  constructor(props){
    super(props);
    // 다른 동작 가능
    const filtered = this.props.filtered (() => {

    });
    this.state = {
      result: filtered,
      try: this.props.try,
    }
  }
    render() {
        return (
           <li>
               <div>{this.props.tryInfo.try}</div>
               <div>{this.props.tryInfo.result}</div>
           </li>
        )
    }
}

export default Try;