[리액트] 현명하게 리액트 작성하기

VS Code ES7 React/Redux/React-Native/JS snippets

React Roadmap

함수형 업데이트
리액트로 계산기를 만든다고 하면 다음과 같이 useState를 사용해서 만들 수 있다.

// Counter.js
import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);
  
  const onIncrease = () => {
    setNumber(number + 1);
  }
  
  const onDecrease = () => {
    setNumber(number - 1);
  }
  
  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

업데이트하고 싶은 새로운 값을 파라미터로 넣는 대신 기존 값을 어떻게 업데이트할 지에 대한 함수를 등록하는 방식으로도 값을 업데이트할 수 있다.

// 나머지 부분 동일, Setter 함수만 다름
const onIncrease = () => {
  setNumber(prevNumber => prevNumber + 1);
}

const onDecrease = () => {
  setNumber(prevNumber => prevNumber - 1);
}

컴포넌트를 최적화할 때 위와 같이 사용 가능하다. 자세한 내용은 후술!

함수형 컴포넌트 작성시 주의할 점
함수형 컴포넌트는 보통 아래와 같이 작성된다

function 컴포넌트_이름() {
  return (
    <>
      // 내용
    </>
  )
}

아래와 같이 화살표 함수로 작성할 수도 있다

const 컴포넌트_이름 = () => {
  return (
    <>
      // 내용
    </>
  )
}

이 경우 발생할 수 있는 가장 큰 문제점은 this가 바인딩되는 방식의 차이이다. (?)
또한, 화살표 함수의 경우 주로 함수를 파라미터로 전달할 때 유용하다.