210126 TIL #React#Typescript

React

웹 게임을 만들며 배우는 React(4)

불변성

일반적으로 배열에 요소를 추가할 때 push()를 사용하는데, 리액트에서는 push를 사용한 변화를 인지하지 못한다. 리액트는 렌더링 여부를 참조값이 바뀌었는가를 확인하여 결정하기 때문이다. 따라서 리액트에서 배열에 요소를 추가하기 위해서는 새로운 배열을 만들어 기존 배열을 복사함과 동시에 요소를 추가해야 한다.

const array = []

//push를 이용하여 배열에 1을 추가하기
array.push(1)	//[1]
//array === array: true	-> 리액트가 변화를 감지하지 못해 렌더링 불가


//새로운 배열을 선언 후 배열에 2를 추가하기
const array2 = [...array, 2]	//[1, 2]
//array === array2: false -> 리액트가 변화 감지 후 렌더링

추가 팁

리액트에서 클래스를 사용할 때의 단점 중 하나는 변수 앞에 this.state를 항상 붙여야한다는 것이다. 까먹고 안 썼다가 오류 나면 버그 찾는 데만 한 세월일 테다.
비구조화 할당을 사용하면 이러한 수고로움을 덜어준다. this.state를 사용해야하는 변수들을 구조분해로 선언하는 것이다. 같은 방식으로 this.props 또한 가능하다.

state = {
  result: '',
  value: '',
}

const { result, value } = this.state;	//구조분해

sholudComponentUpdate

리액트가 렌더링을 할 때 전혀 상관이 없는 컴포넌트가 함께 렌더링이 된다면 성능에 문제가 생길 가능성이 커진다. 값이 변하지 않아도 클래스에서 setState를 사용하면 렌더링이 되기 때문이다. 이러한 상황을 막기 위해 shouldComponentUpdate를 사용한다.

import React, { Component } from 'react';

class Test extends Component {
  state = {
    counter: 0,
  };

  onClick = () => {
    this.setState({});
  };

  render() {
    return (
      <div>
        <button onClick={this.onClick}>클릭</button>
      </div>
    );
  }
}

위 코드의 onClick에서 counter 값의 변화가 일어나지 않지만 클릭할 때마다 렌더링이 된다. shouldComponentUpdate를 다음과 같이 사용하면 불필요한 렌더링을 줄일 수 있다.

shouldComponentUpdate(nextProps, nextState, nextContext) {
  if (this.state.counter !== nextState.counter) {
    return true;
  }
  return false;
}

현재 counter와 미래의 counter의 값이 다른 경우 true를 리턴하고, 그렇지 않은 경우 false를 리턴한다. true인 경우에만 렌더링을 진행한다.


훨씬 쉬운 방법으로는 PureComponent를 사용하면 된다. 리액트에서 구조분해로 Component를 불러오는 대신 PureComponent를 불러온다.

import React, { PureComponent } from 'react';

class Test extends PureComponent {
  …
}

PureComponent는 sholudComponentUpdate 내부에서 직접 렌더링 여부를 결정하는 코드를 짜야했던 걸 state를 확인해 자동으로 판단하여 알려준다. 단지 state에 객체나 배열 구조처럼 참조 값에 영향을 받는 변수가 있을 때에는 앞서 말한 것과 같이 리액트가 변화를 잘 감지하지 못할 수도 있기 때문에 state에 객체 구조를 사용하지 않는 게 좋다.

훅스는 PureComponent와 sholudComponentUpdate가 없는 대신 memo를 사용하면 된다.

import React, { memo } from 'react';

const Test = memo(() => {
  …
});

Typescript

타입스크립트 입문 - 기초부터 실전까지(1) 타입스크립트 핸드북

타입스크립트는 Microsoft에서 개발한 오픈 소스이다. 가독성이 높고 컴파일 환경에서 바로 오류 코드를 발견할 수 있는 장점이 있다. 자바스크립트에서는 기본적으로 제공하지 않았던 자동 완성 기능도 지원해주기 때문에 코드 품질 또한 높아진다. 한눈에 보는 타입스크립트

별도의 타입스크립트 라이브러리를 설치하지 않아도 자바스크립트에서 간단하게 사용이 가능하다. 자바스크립트 주석에 파라미터를 미리 할당하면 타입스크립트처럼 사용이 가능하다.

//@ts-check

/**
*
* @param {number} a
* @param {number} b
*/
function sum(a, b) {
  return a + b;
}

@ts-check는 자바스크립트에서 타입스크립트처럼 코드 오류를 알려주는 기능을 사용할 수 있게 해준다.