인프런 커뮤니티 질문&답변
작성한 질문수
jsx와 js를 구분해서 사용하는 이유
작성
·
9
0
섹션 13강의 중 "폰트, 이미지, 레이아웃 설정하기" 강의를 보면,
이미지 가져오는 것을 컴포넌트화 하는 부분이 나옵니다.
util폴더 아래에 get-emotion- image라는 파일을 만드는 부분인데,
해당 파일을 jsx가 아닌 js로 만드는 이유가 궁금합니다.
제가 해당 파일을 jsx로 해도 정상 작동이 되던데, 리액트에서 js로 하신 이유가 뭘까요?
문의드립니다.
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
nurookman님, 질문 주셔서 감사합니다. JSX와 JS를 구분해서 사용하는 이유에 대해 설명드리겠습니다.
JSX와 JS 파일의 차이점 및 사용하는 이유
JSX와 JS는 리액트 코드를 작성할 때 형태에 따라 차이가 있지만, 실제로 컴파일되는 결과는 동일합니다. 주요 차이는 다음과 같습니다:
JSX파일: JSX는 JavaScript의 확장 문법으로, HTML 코드처럼 보이게 작성할 수 있습니다. 리액트 컴포넌트를 정의할 때 주로 사용됩니다.
JS파일: 일반 JavaScript 코드로, 비주얼적으로 HTML 요소를 포함하지 않는 로직이나 유틸리티 함수 등의 코드를 작성할 때 사용됩니다.
왜 Util 파일은 JS로 작성되었을까요?
기능의 명확성: util 폴더는 여러 컴포넌트나 기능에서 공통으로 사용될 수 있는 함수나 로직을 포함하는 경우가 많습니다. 비주얼 레이어를 다루지 않는 순수 함수들이기 때문에 JSX보다는 JS 파일로 작성하는 것이 더욱 적절합니다.
일관성 및 가독성: util 파일들은 주로 로직 중심의 코드가 작성되기 때문에 사람들에게 해당 파일이 사용자 인터페이스를 포함하지 않는다는 것을 명확히 하려면 JS 파일을 사용하는 것이 좋습니다.
이와 같은 관점에서는, 기능의 명확성을 위해서 util 디렉토리에 위치한 로직 파일들은 대부분 JS로 작성되는 것이 일반적입니다.
혹시 더 구체적인 상황이나 코드에 대한 추가적인 질문이 있으시면 언제든지 말씀해 주세요. 비슷한 주제를 다루는 질문 중에서는 JSX와 JS의 차이 및 사용례: 링크를 참고하실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.