Why use .jsx

현재 근황

5월에 연이 닿아 입사하게 된 회사에서 정신없이 일하느라 블로그 관리가 너무 소흘했던 것을 2021년이 되어서야 새삼 느끼게 되었다. 내부 일정, 상황 속에서 여러가지를 느끼며 개발하고 있는 와중에도 레거시에 흔들리지 않기 위해 항상 코드의 근거를 찾고 기본 개념을 잊지 않기 위해 노력해왔고, 이들을 시간을 내어 다시 정리하며 앞으로 나아가기로 다짐하여 오랜만에 다시 글을 적는다.
( 오랜만이라 정해진 틀 없이 의식의 흐름대로 적어보기로 한다. )

왜 이런 주제를 다루게 되었을까 ?

사실 이런 주제는 처음 리액트를 접할 때부터 알아야하는게 아닌가 싶지만, 보통 토이프로젝트의 기본 틀을 잡을 때에는 기본 개발 템플릿인 create-react-app 을 사용했고, 또는 구글링을 통해 접한 코드들에서는 js, jsx 이 두가지 확장자가 공존하는 와중에 이 둘 중 어느 확장자를 사용하더라도 문제없이 코드가 돌아가서 인지하고있지 못하던 도중, 레거시에서 js 와 jsx가 공존하고있는 현상을 보았고, 문득 이 둘의 차이에 대해 명확히 인지하지 못한 자신을 반성하며 다시 짚고 넘어가기로 했다.

그렇다면 둘의 차이는 ?

이 부분은 역시 react 공식문서에서 찾을 수 있었는데, 결론부터 말하자면 JSX 를 React Project에서 사용해왔던 이유는 React.createElement 없이 return 부분에서 HTML 태그만 입력했을 경우에도 자동으로 createElement 함수를 적용시켜주는 formatting이 되어있기 때문이다.

그러면 왜 안써도 문제가 안생겼을까?

당연히 이 질문에 도달하게 되었고, 그것은 create-react-app 을 사용했기 때문이었다.

세부 내용을 살펴보면 create-react-app 을 설치할 때 같이 설치되는 babel plugin 중

// babel plugin

plugin-transform-react-jsx

이 plugin 이 있기 때문인데, 이 plugin이 js 파일로 만들고 jsx와 같이 return 부분에 html 태그를 단순하게 작성하더라도 자동으로 변환하여 실행시켜주고 있었던 것이다.

마치며 ...

어떻게보면 정말 별거 아닌 내용이지만 실무를 경험해보니 문득 중간중간 놓치고 있던 기본 개념도 계속해서 리마인드 해야겠다는 생각이 들었고, 그로 인한 결과 중 하나로 이렇게 간단한 개념도 한번 돌아보게 되었다.
주어진 환경속에서 개선할 방향들을 여러가지 찾아보고 있고, 요새 눈여겨 보는 부분들은 recoil, react-testing-library, storybook, docker, atomic-design 과 같은 주제들이 있다.
이 주제들을 공부해오고 있었고, 개인적으로 익혀보고싶다는 생각이 들어 블로그 글도 앞으로 다시 자주는 장담할 수 없어도 꾸준히 올리면서 해당 주제들에 대해 정말 간단한 todo라도 한번 만들어볼 예정이다.