호이스팅을 알아야 하는 이유는??

🎯 최종 결론

호이스팅을 알아야 하는 이유는 호이스팅으로 인해 의도 하지 않는 버그가 발생되는 걸 막기 위해서입니다.

 

실무에서는 호이스팅에 절대 의존하지 마세요!
- ❌ var, function 선언식 사용 금지
- ✅ const/let + 함수 표현식/화살표함수 + "위 선언, 아래 사용"

ESLint로 방지

{
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  rules: {
      // 호이스팅 방지 규칙
      "@typescript-eslint/no-use-before-define": [
        "error",
        {
          functions: true,
          classes: true,
          variables: false,
          typedefs: true,
        },
      ],
      "no-var": "error", // var 키워드 사용 금지
      "prefer-const": "error", // 재할당하지 않는 변수는 const 사용 강제
      "func-style": ["error", "expression", { allowArrowFunctions: true }], // arrow function 사용 강제
    },
}

 

 

 

1. 왜 이런 결론인가? → var의 치명적 문제

// 조용한 런타임 버그의 시작
console.log(user.name);  // undefined.name → TypeError (프로덕션!)
var user = await fetchUser();

var는 선언 전에 undefined를 줘서 에러 없이 잘못된 로직이 진행됨

즉 런타임 에러!!

2. let/const는 안전장치지만 여전히 문제

console.log(x);  // ReferenceError (개발중 잡힘)
let x = 10;

호이스팅에 의존하려 하면 TDZ 에러 → 결국 순서 지켜야 함

3. 함수 선언식도 혼란만 줌

sayHello();  // 어디서 정의됐지? 언제 덮어쓰였지?
function sayHello() { console.log('hello'); }

호이스팅 때문에 코드 순서가 뒤죽박죽 → 가독성 최악

4. 그래서 나온 실무 표준

❌ 피할 것	✅ 권장 패턴
var x = 0	const x = 0
function foo() {}	const foo = () => {}
아래 선언 위 사용	TOP 선언 BOTTOM 사용

5. React Native 실제 동작

// Metro bundler가 전체 파일 분석 (호이스팅 아님!)
const styles = StyleSheet.create({...});  // TOP 선언
<View style={styles.container} />         // 안전 사용

 

 

🎨 한 줄 비유

호이스팅 = 호이스팅을 이해하여 의도하지 않는 버그가 발생되는 걸 막자
       ≠ "개발 편의를 위한 기능"

 

 

 

실무에서의 한계점(리스크)

lint에서 variables를 false로 설정을 했는데 사실 이것도 true로 해야지 호이스팅으로 생기는 버그를 미연에 방지할 수 있을 것이다. 하지만 실제로 나는 스크린 컴포넌트 기준으로 

import

변수선언, useState, hook, 상수선언 등 

라이프사이클 커스텀 hook
함수

UI

 

이런 순으로 코드가 읽히는걸 선호한다.  여기서 variables가 true가 되면 생기는 문제는 라이플사이클 커스텀 hook인데, 스크린 컴포넌트에서는 나는 라이프 싸이클 공통화 할 수 있는 커스텀 훅을 항상 필수로 사용하고 있다. 

// 2. 라이프사이클 관리
  useScreenLifecycle({
    firstFocus: () => {
      // 컴포넌트 마운트 시 탭 인증 값 체크 (한 번만 실행)
    },
    focus: () => {
      // 화면 재포커스 시 로직 (필요시)
    },
    blur: () => {
      // 화면 포커스 잃을 때 로직 (필요시)
    },
    unmount: () => {
      // 컴포넌트 언마운트 시 정리 작업
    },
  });

 

하지만 이걸 사용하기 위해서는 아래에서 선언되는 함수를 호출해야 하기 때문에 문제가 생긴다. 결국 코드 흐름이 더 중요하다고 판단하였으며, 이 부분은 허용하기로 하였다.