Styled-component의 호이스팅?
예전에 react-native에서 스타일링과 관련한 객체를 컴포넌트보다 아래에다가 정의하는 것을 적극 반영하여 이를 활용중이었었다
그런데 비슷한 형태로 createGlobalStyle인 템플릿 리터럴에다가 css 메서드의 스타일링 도출값을 바닥에다가 적용했더니 이번에는 에러가 나기 시작했다
이유가 뭘까
상당히 오랜 시간동안 두개의 차이를 고민하게 되다가 "아하" 하게 되는 포인트가 있었다.
일단 컴포넌트가 담겨있는 파일은 모듈스코프를 따르고 있다.
모듈 스코프를 따르고 있는 상황에서는 export default로 모듈화되어 방출되고 있는 모듈은 Home의 평가가 완료된 함수 객체이다
즉, 아직 모듈상태인 컴포넌트는 평가가 되어 객체화만 되어 있을 뿐이기에 다른 모듈에서 사용할 때에는 이미 styled component 역시 평가가 완료되어 렉시컬한 환경으로 기억된 상태이기에 에러를 만들지 않는다
그러나, template literal은 다르다.
상당히 생소하게 생겨서 눈치를 못채고 있었지만, template listeral은 함수 호출문 이다.
실제로, template literal을 사용하게 되면 호출이 완료되는 것을 알 수 있다.
탬플릿 리터럴을 활용하면, 앞에 식별자로 정의된 함수에 인자에 0번째에는 순수 string값을 분해한 배열을, 그리고 그 뒤에 순차적으로 "${}" 표시 안에 넣어져 있는 값들을 프로퍼티의 값으로 할당하며 호출하는 형태로 되어있다.
다시금 탬플릿 리터럴쪽을 본다면
해당 글로로벌 스타일에서의 모듈스코프를 생각해보면 내부적으로 위에 createGlobalStyle이 평가가 되고, css 탬플릿 리터럴도 평가가 된 후, 런타임에 함수 호출까지 해버리고 있기 때문에 식별자를 찾을 수 없다는 에러를 내고 있는 것이었다.
아무 생각없이 위치를 바꿔서 정리하다가 중요한 것을 꺠닫게 되어 기록을 남긴다.
