인프런 커뮤니티 질문&답변

작성한 질문수

실전 리액트 프로그래밍

추천하는 컴포넌트 파일 작성법

컴포넌트 외부에 선언한 const 호이스팅

작성

403

추천하는 컴포넌트 파일 작성법 강의 3:00 에서

MyComponent 하단에 선언된

COLUMNS 및 URL_PRODUCT_LIST는 어떻게

MyComponent에서 사용할 수 있는건가요?

hoisting이슈가 있을것 같아서 직접 돌려봤는데 에러없이 잘되네요..?

export default 처리되는 함수는 webpack이 코드 아래쪽으로 옮겨주는건가 싶기도하고.... 답을 알려주세요ㅠ 혼란스럽네요

답변 2

지식공유자

안녕하세요
죄송합니다, 답변이 좀 늦었네요;

함수 실행 시점에 변수가 초기화된 상태라면 사용할 수 있습니다
화살표 함수, 일반 함수 모두 아래쪽에서 정의된 변수를 사용할 수 있습니다

따라서 아래 코드는 잘 동작합니다

const f1 = () => console.log(v1);
const v1 = 123;
f1();

하지만 아래 코드는 에러가 납니다 (변수가 초기화 되기 전에 접근하므로)

const f1 = () => console.log(v1);
f1();
const v1 = 123;

질문자

함수 외부에서 선언된 전역 변수이기때문에 사용이 가능한것으로 이해하였습니다. 다만, 변수로 선언된 화살표함수의 경우, 하단에 선언된 const 상수를 사용을 못할것으로 생각이되는데 에러는 발생하지 않네요 이에관한 원리가 궁금합니다 ㅎㅎㅎ

작성한 질문수