1. 함수나 오브젝트는 변수에 담아 쓰기
리액트적인 개념은 아니고 그냥 메모리공간을 아낄 수 있는 JS 코딩 관습이다.
컴포넌트가 재렌더링될 때 변수에 저장되지 않은 이름없는 object, function 류의 자료형들은
매번 새로운 메모리 영역을 할당해줘야하기 때문에 컴퓨터가 바빠질 수 있다.
그걸 방지하기 위해 컴포넌트 바깥에 변수를 마련해 갖다쓰면된다.
2. 애니메이션 막주지말고 CSS transform 속성 위주로 쓰기
리액트만 적용되는건 아닌 전반적인 CSS 코딩 팁이다.
레이아웃은 width, margin, padding, left right top bottom 이런 것들을 뜻하는데
자바스크립트나 transition을 이용해 레이아웃을 변경시키는건 브라우저 입장에서 큰 부담이 된다.
그래서 애니메이션을 넣어도 성능에 큰 지장이 없게 만들고 싶으면
transform, opacity 같은 CSS 속성을 이용해 애니메이션을 주는게 좋다.
3. 컴포넌트 import할 때 lazy 하게 import 하는 법
웹앱 사이트들의 특징인데, 각 페이지마다 import해야하는 컴포넌트가 매우 많다.
나쁜건 아니지만 많은 컴포넌트파일을 import 해오라고 써놓으면 사이트 초기 접속속도가 굉장히 느려질 수 있다.
그래서 페이지 방문시 바로 import를 해오는 것이 아니라 "컴포넌트들이 필요해질 때 import를 해주세요" 라고 코드를 작성할 수도 있다.
- react 라이브러리에서 lazy, Suspense를 import 하고
import React, {useState, useContext, lazy, Suspense} from 'react';- import 컴포넌트명으로 적던걸 lazy 함수를 이용해 이렇게 바꿔준다.
cosnt 컴포넌트명 = lazy( ()=>{ return import('./컴포넌트.js') } );- 라는 컴포넌트로 <불러 올 컴포넌트>을 감싸줍니다.
<Suspense fallback={ <div>로딩중입니다~!</div> }>
<불러 올 컴포넌트/>
</Suspense>- fallback 속성엔 <불러 올 컴포넌트> 컴포넌트 로딩 전까지 띄울 원하는 HTML을 적어줍니다.
4. React Dev Tools 개발자 도구 설치하기 (크롬 확장프로그램)
- props가 잘 전해졌는지 확인
- state가 잘 변하고 있는지 확인
- 실시간 state, props 수정해보기
- 시계모양 버튼을 눌러 해당 컴포넌트 렌더링을 잠깐 정지해보기
- Profiler 탭으로 들어가 녹화 버튼(파란점) 을 눌러서 컴포넌트 렌더링 되는 속도를 측정해보기
등등 유용한 기능들이 많다.
5. 쓸데없는 재렌더링을 막는 memo
컴포넌트는 컴포넌트와 관련된 state 혹은 props가 변경되면 항상 자동 재렌더링된다.
그러나 가끔 가만히 있어야할 컴포넌트들도 이유없이 재렌더링되는 경우가 있다.
예를 들어 컴포넌트안에 컴포넌트가 여러개 있을 때,
부모 컴포넌트의 props 내용이 일부 변경되면 props를 전송받고 있는 자식 컴포넌트들도 전부 재렌더링된다.
이렇게 두면 사이트 구동 속도가 저하 될 수 있는데 이때 memo라는 함수로 재렌더링을 막을 수 있다.
memo() 함수는 "props 변경이 안된 컴포넌트는재렌더링 하지말아주세요"라고 쓰고싶을 때 사용한다.
- 먼저 import해오고
import React, {useEffect, memo} from 'react';- 원하는 컴포넌트를 memo로 감싼다.
const 변수명 = memo(function(){
useEffect( ()=>{ console.log('렌더링됨2') } );
return <div>2222</div>
})그러나 이런 memo함수는 props가 매우 방대하고 큰 경우엔 오히려 손해일 수 있다.
memo로 감싼 컴포넌트는 헛되게 재렌더링을 안시키려고 기존 props와 바뀐 props를 비교하는 연산이 추가로 진행되는데
props가 크고 복잡하면 이거 자체로도 부담이 될 수도 있다.
그래서 작은 사이트를 만들거나 컴포넌트 내부에 있는 HTML 양이 매우 적을 경우엔 memo는 쓰지않는게 좋다.
