⑤ 가위바위보

🔗 웹 게임을 만들며 배우는 React

💡
vscode에 리액트 플러그인을 이제 설치했다..^^
매우 편리
(ES7 React/Redux/GraphQL/React-Native snippets)

1. 리액트 라이프사이클 소개

• 클래스의 경우
  • constructor render ==> ref ==> componentDidMount
    ( ==> setState/props 바뀔 때 ==> shouldComponentUpdate(true) ==> render ==> componentDidUpdate)
    ==>부모가 나를 없앴을 때 ==> componentWillUnmount ==> 소멸
• componentDidMount(): 컴포넌트가 첫 렌더링된 후 실행 (비동기 요청)
• componentDidUpdate(): 리렌더링 후 실행
• componentWillUnmount(): 컴포넌트가 제거되기 직전 실행 (비동기 요청 정리)

2. setInterval과 라이프사이클 연동하기

• componentDidMount(): 비동기 요청 (ex. setInterval)
• componentWillUnmount(): 비동기 요청 정리
  👉 정리하지 않으면 메모리 누수가 발생할 수 있으므로 필요!

RSP.jsx

interval;

componentDidMount() {   // 컴포넌트가 첫 렌더링된 후 (비동기 요청)
  this.interval = setInterval(() => {...}, 1000);
}

componentWillUnmount() {  // 컴포넌트가 제거되기 직전 (비동기 요청 정리)
  clearInterval(this.interval);
}

3. 가위바위보 게임 만들기

코드 복붙도 귀찮네.. 😅

4. 고차 함수와 Q&A

• 고차함수

onClick={() => this.onClickBtn('바위')}
onClickBtn = (choice) => { ... }
// ============================== 위를 아래처럼 변경할 수 있음
onClick={this.onClickBtn('바위')}
onClickBtn = (choice) => () => { ... } 

5. Hooks와 useEffect

useEffect(() => {   // componentDidMount, componentDidUpdate 역할 (일대일 대응은 아님)
  interval.current = setInterval(changeHand, 100);
  return () => {  // componentWillUnmount 역할
    clearInterval(interval.current);
  }
}, [imgCoord]); // 인수 배열에 넣은 값이 바뀔 때 useEffect가 실행됨 (값이 없으면 처음 한 번만 실행)

👉 Hooks에서는 매번 clearInterval을 하기 때문에 setTimeout과 동일한 동작이 됨

6. 클래스와 Hooks 라이프사이클 비교

• 변하는 값마다 다른 효과를 주고 싶은 경우 useEffect를 여러 개 선언할 수도 있음

• 클래스: 변하는 값을 한번에 바꾸고 componentDidMount, componentDidUpdate, componentWillUnmount를 각각 처리

• Hooks: 변하는 값을 각각 감지하여 모든 효과를 한번에 처리