Optimization React rendering

랜더링 최적화는 어떻게 하나?

1차적으로 불필요한 랜더링을 먼저 막습니다. 불필요한 랜더링이란 화면에 반영되는 데이터가 동일하거나 다른 화면에 가려져 랜더링이 아예 필요 없는 경우를 말합니다.

Props로 넘겨지는 데이터가 동일 할때 React.memo 를 사용하는 방법은 두 가지가 있습니다.

1. 기본 탑재된 비교 알고리즘을 쓰는 경우

React.memo(컴포넌트)

기본 알고리즘을 쓰는 경우는 Props로 넘어오는 값들이 이뮤터블임을 전제로 합니다. 뮤터뷸 객체가 넘어오면 당연히 이 전략은 통하지 않습니다. 여기서 신경써야하는 것들이 바로 핸들러나 콜백 함수들인데, JS에서 함수는 뮤터뷸한 객체라서 useCallback 으로 일일이 감싸서 캐시(메모이제이)하지 않으면 효과가 없습니다.

그렇다고 항상 useCallback 쓸 필요도 없습니다. 캐시 비용도 비용이지만 매번 콜백 함수를 감싸는 귀차니즘도 만만치 않기 때문에 그 비용이 오히려 비효율일 경우가 많습니다. 이럴때는 비교 로직을 커스텀 하는게 더 효과적 입니다.

2. 비교 알고리즘을 커스텀 하는 경우

React.memo(컴포넌트, 비교로직함수)

비교로직을 커스텀 할경우엔 콜백함수를 useCallback 으로 넘기든 넘기지 않든 랜더링에 필요한 요소들만 선택적으로 찾아서 랜더링을 결정합니다. 따라서 메모된 값을 쓰고 싶을 경우엔 true, 새로 랜더링을 할 경우엔 false를 비교 함수에서 반환합니다.

최적화 우선순위

모든 컴포넌트를 다 useCallback 으로 감싸거나 React.memo로 감쌀 필요는 없습니다. 병목 지점을 먼저 찾고 필요한 곳 위주로 처리하면 됩니다.

예를들어 아래와 같은 구조에서 최상위 Root 컴포넌트가 랜더링되면 나머지 A~F 컴포넌트가 줄줄이 랜더링 됩니다. 이때 A가 한번 랜더링 되면 F 같은 리스트 아이템들은 수없이 많이 랜더링 됩니다.

  ---Root
      |--- A
           |-- B ( List )
               |-- F
               |-- ... N 개의 F 
               |-- F
           |-- C
      |-- D

즉, 위와 같은 구조에서 F 컴포넌트가 제일 먼저 최적화 대상이 됩니다.

극단적인 랜더링 최적화 (한번만 그리기)

가끔은 컴포넌트를 딱 한번만 그리는 경우도 있습니다. 예를 들면 고정형 네비게이션바 같은 경우엔 Props를 주입받지만 화면을 그리는 요소에 영향을 주지 않기 때문에 이런경우엔 극단적인 선택을 할수있습니다.

export default memo(NavigationBar, () => true);

클로저 변수와 함께 콜백 함수 메모하기

   1번
   const 핸들러함수 = useCallback(()=>{
         const currentItem = items[currentIndex];
      //  currentItem 처리
   },[currentIndex])

    2번 
    const 핸들러함수 = (currentItem) => {
         // currentItem 처리....
    }   

    <List>
        {for item in items 
            return <ListItem item={item} onPress={핸들러함수}>
         }
     <List>

1번처럼 useCallback 함수를 사용해 클로저 변수를 함께 패키징 할 경우 핸들러 함수는 currentIndex 값에 따라 매번 다른 함수가 만들어집니다.

그리고 이것을 <ListItem> 컴포넌트의 프로퍼티로 넘기기 때문에 <ListItem> 컴포넌트의 메모 전략은 매우 단순하게 가져갈 수 있습니다.

export default memo(ListItem);

물론 currentIndex 갯수 만큼 메모하는건 그만큼 약점입니다.

반대로 useCallback 을 쓰지 않을 경우에는 당연히 ListItem의 최적화 전략이 달라져야합니다.

export default memo(ListItem, (prev: Props, next: Props) => {
  return prev.language === next.language;
});

그리고 2번처럼 핸들러 함수에 넘겨받은 값을 그대로 같이 반환해야합니다.

function ListItem(props){
  const { item } = props;

  return( 
     <TouchableOpacity onPress={() => onPress(item)}>
       // 블라블라...
     </TouchableOpacity>
  )
}

주의! 최적화 전략은 케바케라서 상황에 따라 적절히 취사 선택하려면 잘 알아야한다. 암튼 간만에 회사 일 하다가 긴 PR을 올려서 그대로 블로그에 옮겨 왔음.

React에 Flow 적용기

타입은 왜 필요한가?

개인적인 경험에서 타입에 대한 필요성을 느끼기 시작한 것은 이뮤터블JS를 쓰기 시작하면서부터다. 이 녀석은 실제로 까보지 않으면 안에 뭐가 들어가 있는지 참 알기 어렵다. 최근 코드 리뷰에서도 “이게 뭐하는 녀석이죠?” 라는 질문을 자주 하는 나를 발견한다. 가령 어떤 함수에 이뮤터블 객체 A 를 인자로 넘겨버리면 저 A 안에 어떤 값이 있는지 알기 어렵다. 그래서 코드를 따라가기를 반복하다 지치면 결국 작성자에게 물어보게 된다. 이럴때마다 타입이 있었으면 하는 생각도 들고 차라리 주석을 꼼꼼히 달아보자고 제안을 해볼까? 하는 생각을 해보기도 하지만 역시.. 후자는 나도 잘 안하기 때문에 결국엔 약간의 강제가 필요하면 좋겠다는 생각을 했다.

Flow와 TypeScript

최근엔 타입스크립트에 대한 주목도와 관심도가 높아지는(?).. 관심도가 높은지는 사실 모르겠고, 그냥 그런 분위기가 있어서 나도 해야하는게 아닐까싶어서 TS 주변을 기웃거렸다. 컨퍼런스도 가고 주변에 TS 좀 한다는 녀석들에게 레퍼랜스를 물어물어서 시작하긴 했는데….

아!!!!!!!!!!!! 빡쳐!!!!
이게 결론이다. TS를 하려면 처음부터 해야지 중간에 잘돌아가는 환경을 뒤엎을려니 쉽지 않다. 결국 기존 react 기반 프로젝트에 ts를 적용하는 건 실패~~

이렇게 또 몇주가 지나고 TS와 씨름에 지쳐갈때쯤 내가 왜 이러고 있나 싶기도하고 그러다가 미워도 다시한번 Flow를 어제부터 다시보기 시작했다. 그런데 너무 간단하다. 헐퀴!! 나 그동안 뭐한거니…-_-;;;

Flow 설치

create-react-app 으로 시작한다면 Flow 환경의 절반은 이미 설정되어 있다. 밥상에 숟가락 얻는 정도다.

1. 먼저 flow-bin 모듈을 설치한다.

$> npm install --save-dev flow-bin  // or yarn add --dev flow-bin`

2. package.json 파일을 열어서 “scripts” 섹션에 "flow": "flow"를 추가한다

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",
    "flow": "flow"       <======= 요기!
  }

3. Flow 환경 설정 파일을 만든다.

아래 명령을 실행하면 루트 폴더에 .flowconfig 파일이 생성된다.

$> npm run flow init
$> npm run flow

.flowconfig 기본 설정

[ignore]  
.*/node_modules

[include]  
./src

[libs]

[options]

4. 외부 라이브러리에 대한 타입 정의를 추가한다.

아래 명령을 실행하면 루트폴더 하위에 /flow-typed 폴더가 생성되면서 외부 라이브러리에 대한 flowType을 찾아준다. 물론 모든 라이브러리를 찾아주는건 아니다.

$> npm install -g flow-typed 
$> cd /path/to/my/project 
$> flow-typed install

5. 타입 체크를 원하는 파일에 // @flow 라는 주석 달기.

Flow 컴파일러는 3번에서 설정한 환경에 따라 파일을 읽게 되는데, 파일 상단 주석에 // @flow 라는 어노테이션을 지정한 파일만 컴파일한다.

6. 인텔리J(WebStorm)에서 Flow Type Checker 적용하기

  1. 일단 인텔리J에 NodeJS 플러그인을 설치하고 Enable 시켜놓자.
  2. Flow Type Checker 모듈을 설치한다. 전역으로 하든 로컬로 하든 알아서 판단하자.

    $> npm install -g flow-bin // global
    $> npm install flow-bin // local

  3. 인텔리J에 Flow를 사용하겠다고 설정한다.

    Cmd+(,) > Languages & Frameworks > JavaScript > choose Flow

  4. 3번에서 Flow executable 필드에 2번에서 설치한 flow-bin 을 지정한다

Flow 적용

Flow를 이용해 타입 체크를 하는 이유를 잘 생각해봐야한다. 진행중인 프로젝트에 어떤 부분을 타입으로 만들어서 점검할지 생각하면서 적용하자. React-Redux 프로젝트에 Flow를 적용한다면 이 문서를 참고하자.

create-react-app with Flow

내가 React로 프로젝트를 시작하는 가장 큰 이유는 아키텍처를 내가 선택할수있기 때문인데, 아키텍처에 집중하기 위해서는 사실 기본기가 튼튼해야한다. 큰 그림을 그리는데 JSX 문법을 몰라 삽질한다거나 한땀한땀 웹팩 구성하느라 시간을 허비하기엔 그 시간이 좀 아깝다. 그런면에서 create-react-app 으로 리액트를 시작할 것을 강력히 추천한다. 이와 같은 이유로 최근엔 TS를 적용한 create-react-app-typescript도 생겼다.

트러블슈팅

Q1. 특정 라인에 대한 에러 체크를 하고 싶지 않아요!

$FlowFixMe 를 이용하세요.

// $FlowFixMe 
import './UserProfile.less';

Q2. flow-typed 를 이용해 외부 라이브러리에 대한 타입을 설치하긴 했는데, immutablejs는 없네요 ㅜㅜ

immutable.js 는 라이브러리 안에 타입을 내장해서 배포하고 있습니다. 일단 .flowconfig 파일을 열어서 [include] 항목에 아래와 같이 추가합니다.

[include]
./src
.*/node_modules/immutable/.*

그런데 이것만 가지고는 충분하지 않습니다. 그래서 누군가 이걸 해결한 타입정의 파일이 있어요. 일단 요 파일을 /flow-typed/ 폴더하위에 immutable_vx.x.x.js 라고 저장해주세요.

참고문서

  1. create-react-app#adding-flow
  2. https://flow.org/en/docs/
  3. https://raw.githubusercontent.com/facebook/immutable-js/master/type-definitions/immutable.js.flow
  4. https://www.jetbrains.com/help/webstorm/2017.1/flow-type-checker.html

React를 SpringBoot에서 서버사이드 랜더링하기 #1

최근 React Korea 커뮤니티에서 Spring과 React를 접목하려는 분들이 많아서 개인적으로 왜 저런 조합을 가져갈까 의아해 했는데 그 이유를 이제야 알았다. 첫번째 이유는 우리나라에 Java 개발자가 많다는 것이고, 두번째는 그 개발자들이 주로 서버 프로젝트로 Spring을 쓰기 때문이고, 그래서 많은 회사들은 Spring을 레거시로 들고 있을테고, 개발자는 여전히 힘들고, React는 뭔가 쉬울것 같고, 그러다보니 기존 레거시에 한번 적용해보고 싶은 욕망은 당여한거고, 막상해보니 어렵고,… 뭐 이런 흐름과 생각이 존재한다는 것을 최근에 복직하고서 알게 됐다. 아무튼 그래서 이번 포스트는 그런 개발자들을 수고를 좀 줄여보고자 정리해봤다.

참고로 나는 Java를 jdk 1.6이 막 나오던 시절에 쓴게 마지막이고 Spring 2.0이 막 나오던 시절에 설정에 치여서 접었던 경험이 있다. 한마디로 Java와 Spring은 내 전문 분야가 아니다. 따라서 뭔가 친절하고 디테일한 설명이 없음을 미리 말해둔다.

0. 삽질을 막기 위한 안내

최신 트렌드에 맞게 일단 모든걸 최신버전으로 해봤다. 따라서 아래 조건이 아니면 안될수도 있음을 미리 말해둔다. React가 IE8 이하 버전은 사실상 버렸기 때문에 웹프로젝트로 React를 쓰려는 사람은 일단 말리고 싶다. 굳이 또 그 어려운 길을 걷겠다면 말리진않겠다. 참고로 IE8을 쓰려면 React 1.4 버전을 써야하고 ES3를 위해 몇가지 pollyfil을 해야하니 알아서들 잘 찾아보시라. IE8도 지원안한다면서 이게 쓸만한건가? 라는 생각이 들수도 있을텐데 다행히 모바일웹에는 IE가 없기 때문에 모바일웹만 서비스한다면 괜찮은 조합이 아니라 아주 훌륭한 조합니다.

  • SpringBoot + JSP + Gradle
  • JDK 1.8 (Java8 nashorn Javascript Engine)
  • React 1.5
  • Webpack

1. SpringBoot 시작하기

SpringBoot는 스프링 이니셜라이져라는 사이트에서 설정을 스켓폴딩했다. 이 사이트에서 디펜던시로 ‘Web’을 추가하고 다운로드받자. 그리고 압축을 풀어서 인텔리J로 연다. 그럼 인텔리J가 빌드를 뭘로 할꺼냐고 묻는다. 나는 Gradle로 선택했다.

2. SpringBoot 서버 설정하기

다음으로 인텔리J에서 서버를 추가하자.

서버는 SpringBoot를 선택한다.

Name과 Main class 그리고 Use classpath of modthod를 지정한다. 마지막으로 JDK는 1.8로 지정한다. Java8에는 크롬V8 자바스크립트 엔진과 호환되는 nashorn(나스호른, 코뿔소)이라는 자바스크립트 엔진이 들어가 있다. 서버사이드 랜더링을 위해 Java8에 기본 탑재된 자바스크립트 엔진을 이용할 예정이기 때문에 1.8이 필요하다. 물론 JDK 1.7 이하 버전에서는 rhino(라이노, 예도 코뿔소)라는 자바스크립트 엔진이 들어가 있는데 라이노 최신버전도 ES5까지는 지원한다고하니까 될수도 있지 싶은데 테스트는 안해봤다.

서버를 설정한 뒤에 실행해서 http://localhost:8080 에서 확인해보자. 여기까지 안되면 다음을 진행을 못한다.

3. JSP 로드하기

2번까지 됐다는 전제하에 이제는 JSP 로드를 위해 추가 설정을 해야한다. src/main/resources/application.properties 파일을 열어서 JSP 설정을 추가한다.

spring.mvc.view.prefix: /WEB-INF/jsp/  
spring.mvc.view.suffix: .jsp

다음으로 build.gradle 파일을 열어서 JSP를 불러올수있는 서블릿 모듈과 jasper 모듈을 추가한다.

dependencies {
    compile('org.springframework.boot:spring-boot-starter-web')
    testCompile('org.springframework.boot:spring-boot-starter-test')
    compile("javax.servlet:jstl")
    compile("org.apache.tomcat.embed:tomcat-embed-jasper")
}

그리고 잊지말고 꼭 그래들 빌드를 실행하자! 기본 SpringBoot 라이브러리에는 jasper가 기본으로 탑재되어 있지 않기 때문에 빌드를 실행해서 라이브러리를 땡겨오지 않으면 jsp 인식이 안된다. 요것때메 몇시간 삽질한 아픔이….OTL….

오늘은 여기까지
2편에서는 별도의 프로젝트로 리액트 샘플을 만들어본다.