1_추가 내용

컴포넌트는 반드시 하나의 엘레먼트만 리턴

라이프사이클? 

fragment 사용이유: 

state-비동기.순서 비유지.

constructor 초기화를 먼저 해줘야 함. 초기화 부분 super(prop)

constructor 쓸 떄 super(prop)은 꼭 한다고 봐도 무방. 

setState부분

-기존의 값을 참조해서 값을 변경하고 싶을때

비동기적이기 때문에 반드시 콜백함수 파라메터부분 신경쒀줘야 함

    // 1.

    // this.setState({

    //   buttonClickCount: ++this.state.buttonClickCount

    // });

    // 2.

    // this.setState((prevState/*, props*/) => {

    //   return {

    //     buttonClickCount: ++prevState.buttonClickCount

    //   };

    // });

-객체 안의 객체의 값을 변경하고 싶을 때

이전의 값을 저장한다음에 변하고 싶은 부분만 변경해야지

안그러면 bodyContents안에 있던 b는 없어지게 됨

// state안의 객체안의 객체의 값을 변경할 경우

  onChangeState() {

    this.setState(prevState => {

      const state = prevState.bodyContests;

      state.a = ++state.a;

      return state;

    });

  }

//안좋은 예

//이렇게 하면 (위에있던) bodyContents안에 있던 b는 없어지게 됨

this.setState({

bodyContests: {

a:'1234'

}

});

es6문법

...문법

props에 있는 값을 사용하고 싶을때 사용되는 메소드 

->

static getDerivedStateFromProps(nextProps, prevState) {

    // 특정 props 가 바뀔 때 state값을 초기화시킬때 사용

    console.log('Child static getDerivedStateFromProps');

    if (nextProps.number !== prevState.number) {

      return { number: nextProps.number };

    } else {

      return null;

    }

  }

가변적이지 않은 것 = props

===============================

라이프 사이클 

처음으로 렌더링 될때 시점이 mount 시점

굵은 표시들-제일 많이 쓰는

다른 것들은-최적화할 때 쓰는

componentDidMount -> 최초에 딱 한 번 실행.

맨처음 돔을 읽고 나중에 업데이트하고 변경된것들만 비교해서 리렌더링되는 구존데

맨처음 돔을 읽기위해 하는 작업. 

virtual dom이 어떻게 돌아가는지

https://www.youtube.com/watch?v=BYbgopx44vo&t=38s

=====================================

Example 예제. 함수형으로 만듦