웹 게임을 만들며 배우는 React 4강, 5강

강의 내용을 정리한 포스팅입니다.

😈반응 속도 체크

React 조건문

• react에서의 조건문은 삼항연산자를 많이 사용한다.

  jsx에서 false, undefined, null은 태그 없음을 의미한다.

Ref의 사용

• hooks에서는 this의 속성을 Ref로 대체하여 사용한다.

  import React, { useState, useRef } from 'react';
  
  const ResponseCheckHooks = () => {
    const [state, setState] = useState('waiting');
    const [message, setMessage] = useState('클릭해서 시작하세요');
    const [result, setResult] = useState([]);
    const timeOut = useRef(null);
    const startTime = useRef();
    const endTime = useRef();
  
    const onClickScreen = () => {
      if (state === 'waiting') {
        setState('ready');
        setMessage('초록색이 되면 클릭하세요')
        timeOut.current = setTimeout(() => {
          setState('now');
          setMessage('지금 클릭');
          startTime.current = new Date(); // state로 놓으면 렌더링이 되기 때문에 this로 선언한다.
        }, Math.floor(Math.random() * 1000) + 2000);
      } else if (state === 'ready') { // 성급하게 클릭
        clearTimeout(timeOut.current);
        setState('waiting');
        setMessage('너무 성급하시군요!, 초록색이 된 후에 클릭하세요');
      } else if (state === 'now') { // 반응속도 체크
        endTime.current = new Date();
        setState('waiting');
        setMessage('클릭해서 시작하세요');
        setResult((prevResult) => {
          return [...prevResult, endTime - startTime];
        });
      }
    }
  }

useRef: 값이 바뀌기는 하지만 렌더링 즉 화면에는 영향을 미치고 싶지 않은 경우 사용

• return 내부에 즉시실행 함수를 만들어서 if문과 for을 사용할수있다.

• 예시

<ul>
	{(() => {
	const arr = [];
	for (let i = 0; i < tries.length; i++) {
		arr.push()/...
	}
}()) // 즉시실행함수
</ul>

하지만 추천하는 방법은 아니다.

---

📌 리액트 라이프 사이클

✅ componentDidMount

• 첫 렌더링이 성공적으로 실행이 됐다면, componentDidMount가 실행된다.
• 리렌더링이 된다면, componentDidMount 는 다시 실행되지 않는다.
• componentDidMount을 통해 주로 비동기 요청을 많이 한다.

주의
비동기 함수를 사용하는 경우, 밖에 있는 변수를 참조하면 클로저가 발생한다.

✅ componentWillUnmount

• componentDidMount에서 실행 됐던 작업들을 제거하는 용도로 사용한다.
• 컴포넌트가 제거되기 직전에 실행된다.

componentDidMount, componentWillUnmount 는 한 쌍으로 사용된다.

✅ componentDidUpdate

• 리렌더링 후에는 componentDidUpdate이 실행된다.

✅ 클래스 라이프 사이클

클래스의 경우 -> constructor -> render -> ref -> componentDidMount ->

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

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

📌 setInterval과 라이프 사이클 연동하기

• setInterval → clear를 하지 않으면 메모리 누수가 생기게 된다.

• setTimeout → clear를 하지 않으면 메모리 누수가 생기게 된다.

  class RSP extends Component {
    state = {
      result: '',
      imgCoord: rspCoords.바위,
      score: 0,
    };
  
    interval;
  
    componentDidMount() { // 컴포넌트가 첫 렌더링된 후, 여기에 비동기 요청을 많이 해요
      this.interval = setInterval(this.changeHand, 100);
    }
  
    componentWillUnmount() { // 컴포넌트가 제거되기 직전, 비동기 요청 정리를 많이 해요
      clearInterval(this.interval);
    }
  
    changeHand = () => {
      const {imgCoord} = this.state;
      if (imgCoord === rspCoords.바위) {
        this.setState({
          imgCoord: rspCoords.가위,
        });
      } else if (imgCoord === rspCoords.가위) {
        this.setState({
          imgCoord: rspCoords.보,
        });
      } else if (imgCoord === rspCoords.보) {
        this.setState({
          imgCoord: rspCoords.바위,
        });
      }
    };

📌 Hooks의 라이프 사이클

• hooks에는 라이프 사이클이 없다. 하지만 클래스의 라이프 사이클과 비슷하게 사용할 수 있는 개념이 있다.

✅ useEffect

• useEffect가 componentDidMount, componentDidUpdate 역할을 대신 합니다. 하지만 1대 1 대응은 아닙니다.
• 함수 컴포넌트는 렌더링이 될때마다 작성한 함수가 실행하고 더불어 useEffect가 실행한다.

class의 경우 componentDidMount나 componentDidUpdate에서 모든 state를 조건문으로 분기 처리한다.

배열에는 꼭 useEffect를 다시 실행할 값만 삽입한다.