React JS와 JSX

JS (JavaScript)

• 웹 페이지에서 보다 동적인 기능을 추가하기 위해 사용된다.
• 웹 페이지의 구조나 컨텐츠 등을 동적으로 제어하거나 서버와 통신 및 이벤트 처리할 때 적합하다.
• 일반적인 JavaScript의 문법을 따른다.

const greet = (name) => {
  console.log("Hello, " + name);
};
greet("John");

 

JSX (JavaScript XML)

• JavaScript와 XML(or HTML)이 결합된 문법이다.
• 주로 React에서 쓰이며 HTML처럼 생긴 코드 내에서 JavaScript를 사용할 수 있다.
• 실행 시 Babel이 JavaScript로 변환해준다.

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

<Greeting name="John" />

 

정리

React 내에서 컴포넌트의 UI와 관련된 작업은 JSX로 할 수 있겠고, 그외 동적인 처리는 JS로 할 수 있겠다. 물론 모두 JS를 사용하는 것도 좋은 방법인 것 같고, 필자도 이것을 선호한다...