[React] 함수형 컴포넌트에서의 constructor 구현

필자는 React에서 함수형 컴포넌트만 사용한다. 다른 class나 const의 코딩 방식보다 코드가 간결하고 직관적이라 생산성이 높다고 생각하기 때문이다.

하지만, function에서 class에서의 constructor를 대체하는 기능은 따로 없다.

따라서 이를 99% 구현하는 방법을 소개하고자 한다.

우선 constructor는 다음의 목적과 방식으로 사용된다.

• state 초기화
• 해당 인스턴스에 이벤트 바인딩
• 해당 돔이 마운트되기 전에 실행되는 것
• 수명주기 동안 단 한번만 실행

즉, 다른 것들보다 먼저 실행되어야 하고 렌더링 전에 실행되어야 한다는 것

하지만 함수에서는 수명주기라는 것이 없다. 그냥 실행되는 것일뿐.. 따라서 constructor를 대체하는 기능이 없는 것은 그야말로 자연스러운 것이다. 따라서 constructor를 구현하기 위해서는 수동적인 방법 밖엔 없다..!

그 방법은 다음과 같다.

import React, { useState } from 'react';

// 우리가 만든 customConstructor
function customConstructor(callBack) {
  // 2. useState를 사용, custom hook으로 false인 값을 생성
  const [Called, setCalled] = useState(false);
  // 7. 순서 5로 인해 이제 Called는 true이므로 그냥 return됨
  if (Called) return;
  // 3. 젤 첨에는 false이므로 그냥 콜백함수가 실행됨
  callBack();
  // 5. 콜백함수 실행 후, custom hook은 true로 변경됨
  setCalled(true);
}

// 실행할 컴포넌트
export default function App() {
  // 첫 줄에 우리가 만든 customConstructor실행 코드 작성!
  // 콜백함수로 렌더링 전에, 단 한번만 실행되는 지 확인을 위해 console을 찍음
  // 1. customConstructor 실행
  customConstructor(() => {
    // 4. 콜백함수 실행됨
    console.log('우악!!');
  });
  // 6. counter가 변경되어 App 컴포넌트가 리렌더링 되어 customConstructor이 재실행
  // 8 이후, 이제 콜백함수는 실행되지 않음.
  const [counter, setCounter] = useState(0);

  return (
    <>
      <div>Counter: {counter}</div>
      <div style={{ marginTop: 20 }}>
        <button type="button" onClick={() => setCounter(counter + 1)}>
          Increment
        </button>
      </div>
    </>
  );
}

가장 중요한 것은 실행할 컴포넌트 바로 첫 줄에 customConstructor실행 코드를 작성해야한다는 점이다.

 

그리고 customConstructor함수 내부에 useState 대신 useRef를 사용해도 좋다.

useRef는 useState 와 비슷하지만, 변경에 따른 리렌더링이 발생하지 않는 차이점이 있다.

 

 

가장 먼저 콜백함수(우악!!)가 켜지고, 이후 리렌더링에도 실행되지 않는 모습