1. 만약 vanilla js로 코딩한다면?

React의 도움 없이 순수 바닐라자바스크립트로 코딩을 한다고 가정해보자.

그러면 정적인 html, css파일을 js를 활용하여 동작시켜주어야 한다.
html코드와 js코드가 별도의 파일에 위치하기 때문에 UI를 직관적으로 살펴보는 것이 쉽지 않게 된다.

또한 html 태그를 직접적으로 호출하거나 조작해야 하고, html에 변경이 생기면 html 전체를 다시 불러와야 하기 때문에 동작의 흐름이 복잡해진다.

🤹🏼‍♀️ 이러한 문제점들을 React를 사용하면 해결할 수 있다!

2. jsx의 도움

React에서는 주로 jsx라는 언어를 사용하여 코드를 작성한다.
html과 css를 한 파일에 합쳐 놓은 것처럼 생긴 코드 형태를 띄는 jsx는 Javascript의 모든 기능을 갖고 있으며 확장된 언어다.
jsx 사용이 필수는 아니지만, UI 관련 작업을 할 때 JSX를 사용하는 것이 시각적으로 더 도움이 된다.

jsx의 예시
const element = <h1>Hello, world!</h1>;

💬 리액트에 대한 개인 느낀점

처음에 리액트를 사용했을 때는 js 기반으로 코딩을 하는 것임에도 불구하고 컴포넌트, props라는 개념들이 너무 낯설게 다가왔다. 그러나 3주 정도 리액트를 사용하여 작업을 하다보니, UI를 직관적으로 보여줄 수가 있다는 것이 어떤 의미인지 느낄 수 있었다.