[ WebFrontend ] styled-components의 동작방식을 통한 호이스팅의 원리 이해

호이스팅이란?
변수나 함수가 어디서 선언되든지 해당 스코프 최상단에 위치하게 되어 동일 스코프 어디서든 참조할 수 있는 것을 말한다.
                                                                                                                               -함수형 자바스크립트 프로그래밍-

호이스팅의 개념은 여러번 듣고서 알고는 있었지만 실제로 호이스팅을 사용한 적이 없다는 생각에 어렵게만 다가왔던 개념이었다.
그런데 문득, 사실을 나도 모르게 호이스팅을 이용해서 코드를 지금까지 짜 왔다는것을 깨달았다.
스타일 작업을 할 때 주로 styled-components를 이용해서 작업을 해 왔었는데,
함수컴포넌트의 아래에 스타일을 정의 하는 방법으로 나도 모르게 이미 호이스팅을 사용하고 있었다는 생각이 문득 들었다.

위 코드와 같이 StyledButton이 선언 된 곳은 버튼컴포넌트의 아래인데 에러를 발생시키지 않고 코드를 실행 할 수 있다.
본능적으로 스타일을 함수아래에 정리 해 두는것이 보기가 좋아서 그렇게 사용을 하고 있었던 것인데, 호이스팅의 개념을 다시 생각을 해 보니 이것이 어떻게 가능했던 것일까에 대해서 고민 해 보게 되었다.

위 코드에서 StyledButton이 아래에 선언되었지만, 실제로는 컴파일러가 코드를 전처리할 때 이를 가장 상위에 선언한 것처럼 처리하는것이었다. 이 과정을 통해서 styled-components의 코드를 어느 순서로 작성을 하던지 상관없이 에러가 없이 실행이 가능한 것이었다.

그렇다면 styled-components의 동작방식이 호이스팅인 것인가!?

그것은 아니다, 왜냐하면 호이스팅은 변수나 함수를 미리 선언하고 초기화 하기 때문에, 코드에서 선언한 위치와 관계없이 해당 변수나 함수를 사용할 수 있는 것을 의미하는 반면에 styled-components에서는 코드 전처리 단계에서 선언한 위치와 상관없이 해당 스타일을 사용할 수 있는 것이기 때문이다.

이렇게 얘기를 하면 헷갈리수도 있겠지만 정리를 하자면,
styled-components의 동작 자체가 호이스팅은 아니지만 동작원리는 호이스팅의 원리를 이용한 것이다.

호이스팅이라는 개념이 정의만 봤을때는 어렵게 느껴졌는데 평소 많이 사용하던 styled-components의 사용 방법을 통해 원리를 이해할수 있게 되니 한층 이해하기가 편해졌다.