zeroCho[3/8] 반응속도체크 - createRoot, useEffect, useRef, 조건문, return 내부 for과 if 쓰기

목차

강의 소스: https://github.com/zerocho/react-webgame

[0/8] 구구단 - state, JSX, babel, Fragment, setState, ref

[1/8] 끝말잇기 - useState, class component vs function component, webpack, module, build

[1/8] 끝말잇기 - useState, class component vs function component, webpack, module, build

[2/8] 숫자야구. 3-1. import와 require 비교

[2/8] 숫자야구 - map, key, 컴포넌트분리, props, 메서드바인딩(this), 동작원리, 구조분해, 이벤트

[2/8] 숫자야구 끝 - rendering, shouldComponentUpdate, PureComponent, React.memo, React.createRef, props&state

[3/8] 반응속도체크 - createRoot, useEffect, useRef, 조건문, return 내부 for과 if 쓰기

[4/8] Rock Scissors Paper - LifeCycle, closure, 비동기함수, 고차함수, useEffect를 이용한 lifeCycle,

[5/8] Lotto - componentDidUpdate, useEffect, useMemo, useCallback

[6/8] 틱택토 - const [state, dispatch] = useReducer(reducer, initialState), action

---

강의목차

4-1. React 조건문
4-2. setTimeout 넣어 반응속도체크
4-3. 성능 체크와 Q&A
4-4. 반응속도체크 Hooks로 전환하기
4-5. return 내부에 for과 if 쓰기

---

4-1. React 조건문

깃 링크: https://github.com/Harimad/zeroReact/commit/d38aabbfa350655d2f7494c8f30f404d98726a3d

---

reduce 메서드는 객체가 비어있을때는 작동하지 않는다. 

 

 

Q. 객체의 불변성에 대해서 질문드립니다.

state가 객체의 경우에는 복사를 활용해서 참조관계를 끊으면 되는 건가요?

그렇다면 자바스크립트 수업때 알려주셨던 JSON.parse(JSON.stringify())를 사용하면 되는 걸까요?

 

->참조관계를 너무 다 끊어서도 비효율적입니다.

JSON.parse(JSON.stringify())도 성능이 느린데다가 객체 내부의 객체마저 새로 만들면

어떤 컴포넌트의 props는 원래 변하지 않았는데도 새로운 객체가 생겨 리렌더링이 되어버립니다.

immer 라이브러리를 쓰는게 편합니다.

Q. 그럼 객체를 사용하는 것 보다는 최대한 배열을 사용하는 쪽으로 구현하는게 더 편한 건가요?

 

-> 배열도 객체입니다. 똑같은 문제가 있습니다.

 

4-2. setTimeout 넣어 반응속도체크

 깃 링크: https://github.com/Harimad/zeroReact/commit/ef39a236fd5d84fbda7914043c6779c440e0acfb

Comment 참고 - 상세하게 코드 코멘트 달아놨음

---

 

 

4-3. 성능 체크와 Q&A

함수 컴포넌트에서는 state값이 바뀌면 함수 컴포넌트 전체가 리랜더링 되기 때문에 성능저하가 발생할 수 있다.

성능 저하를 방지하기 위해 먼저 알아야 할것이 useEffect이다. 그리고 useMemo, useCallback을 이용하면 성능저하를 방지할 수 있다.

 

클래스 컴포넌트에서 return 안에 있는 state가 변경되는 코드가 있을때 return 안의 내용이 전부 리랜더링된다.
(함수 컴포넌트는 전체가 리랜더링 되는것과는 반대)

이 때 한 state가 바뀌면 그 부분만 랜더링되고 다른 부분은 랜더링 되지 않게 만들려면, 새로 컴포넌트를 쪼개고 쪼갠 컴포넌트에 props를 내려주는 방식으로 하면 해결된다.

 

이번 파트는 이런 방식도 있구나 하고 이해만 하고 넘어가자.

 

 

4-4. 반응속도체크 Hooks로 전환하기

1. npm run dev 할 때 오류 해결법

2022.04.12 - [WEB/React] - Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead.

 

2. class에서 랜더링 하고싶지 않은 변수를 바로 선언했다. 함수 컴포넌트에서는 useRef()를 사용해서 가변하는 변수를 선언해줬다.

 

3. useRef의 사용처는 첫째, DOM에 접근할때, 두 번째, state값을 변경하더라도 return 안의 코드들이 리랜더링하고 싶지않을 때 이다.

 

4. useRef를 쓸때는
const timeout = useRef();
timeout.current = ... 

이런 방식으로 쓴다.

---

🎁Q (useRef 관련 질문) 함수형 컴포넌트에서 화면의 렌더링에 영향을 주지 않는 값을 저장하기 위해서 useRef를 쓴다는 점은 이해했는데요.

그럼 혹시 그냥 컴포넌트 안에 `let timeOut` 이런 식으로 선언하는 것과 어떤 차이가 있나요?

useRef를 통해서 리턴되는 객체의 경우 const로 선언하고 .current에 저장할 수 있어서 관리상 이점이 있는 것 같기는 한데 이런 이유 때문에 useRef를 쓰는 것인가요? 아니면 다른 이유가 있을까요? 

 

-> 컴포넌트 안에 let으로 선언하면 컴포넌트가 리렌더링될때마다 새로 선언되므로 값이 초기화됩니다. useRef는 이전 값이 유지됩니다.

---

4-5. return 내부에 for과 if 쓰기

...

React Hooks: useCallback 사용법 : https://www.daleseo.com/react-hooks-use-callback/