리액트에서 변동 가능성이 없는 변수의 위치는? 함수 내부 VS 함수 외부

 

---

함수 내부 인가, 함수 외부인가

리액트에서 함수 컴포넌트를 사용하다보면 한 가지 의문이 들 때가 있습니다. 변수는 함수 외부에 두는 것이 좋을까? 아니면 내부에 그대로 두는 것이 좋을까? 에 관해서 입니다.

 

예를 들어, 다음과 같은 변수가 컴포넌트 내부에 선언되어 있다고 가정해 봅시다.

import React from 'react';

const MyComponent = () => {
  const value = 42; 

  return (
    <div>
      The value is: {value}
    </div>
  );
};

 

여기서, value 은 MyComponent 내부에 선언되어 있습니다. 컴포넌트는 함수이므로 상태가 업데이트 될 때 마다 변수는 매번 메모리에 재할당이 됩니다. 그럼 한 가지 생각해볼 수 있습니다. value 변수는 변동이 없는 상수인데, 굳이 함수 내부에서 관리할 필요가 있는가 입니다. 애초에 업데이트 가능한 값이라면 State 로 관리하면 될텐데 말이죠.

 

개선한다면?

곰곰이 생각해 봤을때, 해당 변수를 함수 내부에서 매번 렌더링 시 마다 할당 후 사용해야 할 이유가 없다면, value 은 컴포넌트 외부에 두는 것이 좋습니다. 이렇게 된다면, value 은 함수가 업데이트되든 말든 모듈 실행 컨텍스트가 살아 있는 동안 딱 한 번만 선언되므로 미묘한 차이이긴 하지만 불필요한 연산을 줄여 성능을 향상시킬 수 있습니다. 또한, 메모리 할당도 한 번만 이루어지기 때문에, 매번 메모리 공간을 할당하는 비효율적인 문제를 개선할 수 있습니다. 그리고, 관리할 게 많은 함수 내부를 조금이라도 더 가볍게 만들어 줄 수도 있습니다.

import React from 'react';

const value = 42; 

const MyComponent = () => {

  return (
    <div>
      The value is: {value}
    </div>
  );
};

 

다만 한 가지 주의할 점이 있습니다. 

 

위 예시에서 사용된 변수는 상수 였습니다. 즉, const 를 사용해서 함수 외부에서 선언되어도 재할당이 불가능합니다. 반면 let 의 경우 사용 시 주의가 필요할 수 있습니다. let 은 재할당이 가능하므로 함수 내부에서 코드가 복잡해지는 경우,  예기치 못한 상황에서 의도하는 동작과 다른 동작을 수행할 수 있는 문제의 여지가 있습니다. 

 

나가는 말

처음 리액트로 공부할 당시에는 let 이든 const 든 변수 자체를 함수 외부에 두지 말라고 언뜻 들었던 기억이 있습니다(아닐 수도 있지만 기억에 남아 있네요).  그런데 최근에는 그래도 괜찮다. 오히려 const 는 외부에 두는 것이 여러 면에서 효율적이라는 이야기를 듣고 있습니다. 이는 언제든지 정답처럼 보이는 것도 달라질 수 있다는 선례와 같다고 생각합니다.

 

분명 클린코드든 뭐든, 그것을 주장하는 사람은 여러 장점과 단점을 비교하며 설득하듯이 말하겠지만, 한 가지 확실한 점은 무조건 정답이 아닐 수 있다는 점 입니다.

 

따라서, 맹목적인 신뢰보다는 과연 이 방식이 나의 상황에 맞는가를 판단하고, 비판하며 스스로를 납득할만한 이유를 찾아가며 자신의 상황에 맞는 개선 방식을 알아가 보는 것도 좋겠다는 생각이 듭니다.