TIL 20211230

웹 게임을 만들며 배우는 React - 인프런

useRef vs useState

• useState는 값이 변하면 재렌더됨
• useRef는 값이 변하지만 렌더될 필요가 없을 때 사용
  • 타임아웃이나 인터벌, 임시 값 등
  • .current로 값 접근해야함

• ex) 반응속도 체크하는 웹 사이트
  • timeout 눌러서 시작 후 눌러야 하는 화면 나오게 하는 setTimeout 담는 ref
  • startTIme 눌러서 시작 한 시각을 저장하는 ref
  • endTIme 눌러서 종료한 시각을 저장하는 ref

return 내부에 for과 if쓰기

• 즉시실행 함수로 쓰면 쓸수 있음
  • 그런데 지저분함, 외부 함수로 빼거나 삼항연산 or map 으로 하는게 나음

---

가위바위보 게임

class

리액트 라이프 사이클

• componentDidMount() 컴포넌트가 첫 렌더링 된 후
  • 여기에 비동기 요청을 많이 함
    • ex) setInterval
• componentDidUpdate() 리렌더링 후
• componentDidUpdate() 컴포넌트가 제거되기 직전
  • 여기에 비동기 요청 정리를 많이 함

• 클래스의 경우 -> constructor -> render -> ref -> componentDidMount
• setState/props 바뀔때 -> shouldComponentUpdate(true) -> render -> componentDidUpdate
• 부모가 나를 없앴을 때 -> componentWillUnmount -> 소멸

• render() 안에서 setState하면 무한하게 렌더
  • componentDidMoint에 작성
    • componentWIllUnmount에서 제거
      

이미지 바꾸는 로직

• 비동기 함수가 비동기 함수 밖의 변수를 참조하면 클로져 발생

onclick 코드 줄이기

(사실 이부분은 무슨내용인지 잘 모르겠다)

• onclick={()=> this.onclickBtn('바위')}
  • 온클릭 메서드 안에 함수를 호출하는 부분이 들어있을 때
  • ()=> 를 빼서 함수에 2번째 인자로 넣는다
    • onClickBtn = (choice) => {...} -> onClickBtn = (choice) => () => {...}
    • 고차함수 패턴

Hooks

useEffect

• 처음 시작에 한번 실행 == componentDidMount
• 두번째 인자로 넣은 값이 변하면 다시 실행 == componentDidUpdate
• return에 있는 함수는 componentWillUnmount 시기에 실행

---

로또추첨기

class

• componentDidUpdate setState될때 실행됨

componentDidUpdate(prevProps, prevState){
	if(this.state.winBalls.length === 0){
    	this.runTimeouts();
    }
}

• 매번 실행 안되게 if문으로 어떤 조건일때 실행할건지 정해야함

hooks

useEffect

useEffect(()=>{
	...
},[]); //빈 배열이면 componentDidMount와 동일
  	//배열에 요소가 있으면 componentDidMount랑 componentDidUpdate 둘 다 수행

useMemo

• useMemo: 복잡한 함수 결과값을 기억
• useRef: 일반 값을 기억

useCallback

• 함수를 저장
• 자식 컴포넌트에 함수 넘겨줄때는 꼭 useCallback으로 감싸야함
  • 프롭으로 내리는 함수가 바뀌면 자식은 프롭이 바뀐다고 판단하므로 다시 렌더됨