제로초 리액트 강의 5.1 리액트 라이프 사이클, 고차 함수, useEffect

 componentDidMount() { // 컴포넌트가 첫 렌더링 후, 여기에 비동기 요청을 많이 함

  }

  componentDidUpdate() { // 리렌더링 후

  }

  componentWillUnmount() { // 컴포넌트가 제거되기 직전, 비동기 요청 정리를 많이 함

  }

componentDidMount

렌더가 처음 성공적으로 실행되었다면 실행됨

> 리렌더링이 일어날 때는 실행되지 않음

 

componentWillUnmount

컴포넌트가 제거되기 직전 실행됨

componentDidMount에서 했던 작업을 제거하는 용도

부모 컴포넌트가 자식 컴포넌트(본인)를 없앴을 때

setInterval같은 함수를 없애주지 않으면 계속 돌아가기 때문에 없앨 때

 

*보통 둘이 짝임

 

componentDidUpdate

리렌더링 되었을 때 실행

 

이것들을 리액트 라이프 사이클이라고 함

 

클래스의 경우

constructor -> render -> ref -> componentDidMount

-> setState, props 바뀔 때 -> shouldComponentUpdate(true) -> render ->  componentDidUpdate

부모가 나를 없앴을 때 -> componentWillUnmount -> 소멸

---

고차 함수

onClick={ }이라는 메소드 안에서 함수를 호출하는 부분이 들어 있으면 () => 를 옮겨줘서 간단히 쓸 수 있음

// 리액트에서 자주 쓰는 패턴
// 메소드안에 함수를 호출하는 부분이 들어있는 걸 간단하게 하는법
......
onClickBtn = (choice) => () => { // 2여기에 넣기 () =>
    const { imgCoord } = this.state;
    clearInterval(this.interval);
    const myScore = scores[choice];
    const comScore = scores[computerChoice(imgCoord)];
    const diff = myScore - comScore;
    if (diff === 0) {
      this.setState({
        result: '비겼습니다.',
      });
    } else if ([-1, 2].includes(diff)) {
      this.setState((prevState) => {
        return ({
          result: '이겼습니다.',
          score: prevState.score + 1,
        });
      });
    } else {
      this.setState((prevState) => {
        return ({
          result: '졌습니다.',
          score: prevState.score - 1,
        });
      });
    }
    setTimeout(() => {
      this.interval = setInterval(this.changeHand, 100);
    }, 2000);
  }

  render() {
    const { result, score, imgCoord } = this.state;
    return (
      <>
        <div id="computer" style={{ background: `url(https://en.pimg.jp/023/182/267/1/23182267.jpg) ${imgCoord} 0` }}></div>
        <div>
          <button id="rock" className="btn" onClick={this.onClickBtn('바위')}>바위</button> // 1여기있는걸
          <button id="scissor" className="btn" onClick={this.onClickBtn('가위')}>가위</button> // 1여기있는걸
          <button id="paper" className="btn" onClick={this.onClickBtn('보')}>보</button> // 1여기있는걸
        </div>
        <div>{result}</div>
        <div>현재 {score}점</div>
      </>
    );
    ......

---

useEffect

hooks에는 라이프사이클이 없어서 대신 useEffect를 쓴다

useState나 useEffect처럼 함수 컴포넌트 안에 적어줘야함

// *** 화살표 함수임!
useEffect(() => { // componentDidMount, componentDidUpdate 역할(1대1 대응은 아님)
  return() => { // componentWillUnmount 역할

  }
}, []); // 배열이 클로저문제를 해결하는 역할

[배열]의 값이 바뀌면 계속 실행됨. 여러개를 넣을 수도 있음

 

2번째 인자를 넣지 않으면

> state나 props가 바뀔 때마다 실행

 

[값]안의 값이 바뀔 때 계속 실행,종료를 반복함

그래서 setInterval을 넣으면 setTimeout과 비슷하게 작동함..

> []안에 넣어둔 값이 바뀔 때만 실행

 

[] 빈 배열을 넣으면 뭐가 바뀌던 더 이상 다시 실행하지 않겠다는 의미

> componentDidMount랑 같음, 처음 렌더될 때만 실행

 

uesEffect는 화면이 바뀌고 나서 실행되고

useLayoutEffect는 화면이 바뀌기 전에 실행됨 (화면을 리사이징 할때) 화면이 바뀌는 것을 감지함