웹 게임을 만들며 배우는 React 가위바위보 & 로또 추첨기

가위바위보 ✌🏻✊🏻🖐🏻

Before We Begin

 

- 시작하기전 프로젝트 생성 명령으로 'rspname'이라는 리액트 프로젝트를 만들어준다.

 

1. 리액트 프로젝트를 생성하는 create-react-app을 -g 글로벌 옵션으로 설치

npm install -g create-react-app

 

2. rspgame이라는 프로젝트를 생성 (※리액트앱은 대문자로 네이밍을 할 수 없다고 계속 에러를 던져서 소문자로 변경해주었다.)

create-react-app rspgame

 

 

---

 

리액트의 LifeCycle 일생기

컴포넌트가 실행되거나 업데이트되거나 제거될 때 특정한 이벤트들이 발생된다. (componentDidMount(), componentDidUpdate() 등등)

 

 

 

https://www.youtube.com/watch?time_continue=2&v=dpw9EHDh2bM&feature=emb_logo 

 

Mount

 

(간단한 버전) 컴포넌트가 처음 실행될 때를 Mount라고 표현을 하는데, 

1. 컴포넌트가 시작되면 먼저 context, defaultProps 그리고 state가 저장된다.
2. componentWillMount 메소드를 호출한다. (componentWillMount에서는 props나 state 변경안됨. → Mount중이기 때문에, DOM에도 접근 불가)
3. render로 컴포넌트를 DOM에 부착한 후 Mount가 완료된 이후 시점에 componentDidMount가 호출된다. (DOM에 접근가능, 주로 비동기 AJAX 요청하거나 setTimeout, setInterval과 같은 행동)

 

강사님이 알려주신 좀 더 복잡한 버전

 

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

 

 

 

 

(setInterval()과 setTimeout()을 clear해주지 않으면 메모리 누수 이슈가 있기 때문에, 비동기 요청은 항상 clear 해준다.)

 

 

 

 

 

클로져 Closure

---

비동기함수가 바깥에 있는 변수를 참조하면 클로저가 발생한다. (자바스크립트 issue)

클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다. 클로저는 자바스크립트를 이용한 고난이도 테크닉을 구사하는데 필수적인 개념으로 활용된다.

예시)

 

 

---

 

클래스형 컴포넌트과 함수형 컴포넌트

---

벨로퍼트님 블로그에 자세하게 나와있다. 

https://react.vlpt.us/basic/24-class-component.html

24. 클래스형 컴포넌트 · GitBook

	클래스형	함수형
라이프사이클	O	X
Hooks	X	O
Render Method	O	X
state	constructor 안에서 this.state 초기 값 설정 가능	constructor 없이 바로 state 초기값 설정
props	this.props로 값을 불러올 수 있다.	props 불러올 필요 없이 바로 호출할 수 있다.
핵심	class 키워드 필요 / Component로 상속 / render() 메소드 필수	constructor 없이 바로 state 초기값 설정
선언방식
이벤트 핸들링

 

클래스형에서 함수형으로 변환시 componentDidMount와 componentDidUnmount는 useEffect 훅으로 변환 (1:1 대응은 아님)

 

왜 클래스형을 익혀야 하는가 →

1. 클래스형 컴포넌트를 사용하는 프로젝트 유지보수
2. 함수형 컴포넌트 + Hooks 로 못하는 작업있음
3. 옛날에 만들어진 리액트 관련 라이브러리의 경우, Hooks 지원이 아직 안되는 경우
4. react-native 관련 라우터 라이브러리인 react-native-navigation의 경우에도 클래스형 컴포넌트 지원

 

 

---

 

고차 컴포넌트 (HOC)

---

고차컴포넌트는 컴포넌트를 입력받아 어떤 기능을 수행 후 컴포넌트를 반환한다.
따라서 반복적인 로직을 고차 컴포넌트를 통해 추상화하면 공통기능을 분리할 수 있다.

 

함수로 컴포넌트를 인자로 받아 새로운 컴포넌트를 리턴해준다.

기존 컴포넌트는 props를 받아 UI를 만들었다면, HOC는 컴포넌트를 다른 컴포넌트로 바꿔준다.

 

React API의 일부가 아닌 리액트의 구성적 특성에서 나오는 패턴

 

어디에 쓰이나? 

1. 비즈니스 로직을 담당하는 컴포넌트와 디스플레이를 담당하는 컴포넌트를 분리
2. 로딩 중 화면표시, 유저 인증 로직 처리(컴포넌트내 권한 체크나 로그인 상태를 체크인 하기보다 인증로직을 HOC로 분리)

 

Higher-Order Components – React

 

※ HOC의 이름은 with이름 규칙을 따른다.

 

 

 

---

 

로또추첨기 🕹

 

Ball.jsx은 (데이터가 없기 때문에) PureComponent로  작업을 하고 싶다면 { memo } 로 감싸준다.

 

 

 

이렇게 컴포넌트를 다른 컴포넌트로 감싸는 것을 위해서 말한 HOC의 경우

왜?

Ball 컴포넌트는 Pure Component가 아니기 때문에 memo로 감싸준다. Pure Component라면 감싸지않아도 된다.

 

 

자잘한 Tip 

💙 let을 쓰면 Closure 문제가 생기지 않는다.

---

setTimeout은 모두 for문이 실행된 이후에 실행된다.

익명 함수로 래핑하여 변수를 익명 함수의 파라미터로 전달하게되면 0 ~4가 차례대로 출력

 

💙 this.state는 구조 분해(destructuring)를 해주자

---

클래스형 컴포넌트는 this.state를 써줘야하는 불편함이 있기때문에 구조분해문법으로 해결해준다.

 

 

 

💙 setTimeout과 setInterval은 메모리 누수를 해결하기 위해 clear작업 필수

---

setTimeout & clearTimeout
setInterval & clearTimeout

는 타이머 함수

자바스크립트는 JS 엔진에 의해서 메모리가 관리되고 있는데, 

JS 엔진은 사용하지 않는 메모리를 추적하여 메모리를 해제하는 Garbage Collecting 기능을 가지고 있다.

→ 여러 개의 타이머 함수를 사용하는 페이지에서 clear로 해제해주지 않으면 GC를 통한 메모리 해제가 정상적으로 동작하지 않을 수 있다.

 

 

💙 useMemo: 복잡한 함수 결과값을 기억 ↔ useCallback: 함수 자체를 기억(함수 자체의 비용이 클시에 유리)

 

https://leehwarang.github.io/2020/05/02/useMemo&useCallback.html

이제는 사용해보자 useMemo & useCallback - 이화랑 블로그

 

💙 useRef: 일반 값을 기억

특정 DOM을 직접 선택해야할 때, 리액트에서는 ref를 사용한다.

함수형 컴포넌트에서는 useRef라는 Hook을, 클래스형에서는 콜백 함수를 사용하거나 React.createRef라는 함수를 사용한다.