react

react element ?

HTML 태그 처럼 사용 할 수 있는 것을 리액트 요소라고한다.

jsx를 사용해 리액트 요소를 만든다.
ex) <input type="input" className="input__text">텍스트!!</input >

React 요소는 실제 DOM 요소가 아니고 JavaScript 객체이다.

 

JSX가 하는 일은 React Element를 만드는 것.!!!

JSX 란 ?

자바스크립트 구문 확장 . JS + XML ( ECMAScript 표준과 관련이 없다 )
HTML이 아니다 JavaScript를 확장한 문법이다.

 

개발자가 작성한 리액트의 JSX 코드를 Babel 이 React.createElement( )로 컴파일해준다. 그 후 실제 DOM에 적용

 

- jsx 는 javascript 객체를 반환.
- jsx 내부에서 js 표현식을 사용하고 싶을 경우 { } 사용하자.

 -js 표현식{ } 연산된 결과 값을 처리한다
     if 문은 표현식 내에서 사용 할 수 없다. 식이 아니기 때문이다 (문이기 때문)
    식은 결과값을 가지고 있어야한다.

    고로, 다른 함수에서 if문을 만들고 JSX를 사용해서 React Element를 리턴하자.

 

리액트 요소를 만드는 것이 컴포넌트 

---

Babel 이란?

 ES6+ ↑ 버전 -> 최신 자바스크립트 문법을 모든 브라우저가 이해하지 못하기 때문에
babel이 브라우저가 이해할 수 있는 문법으로 변환해준다

바벨을 사용하기 위해서는 노드js가 필요

자바스크립트나 타입스크립트, JSX 등 다른 언어로 분류되는 언어들에 대해서도
모든 브라우저에서 동작할 수 있도록 호환성을 지켜준다 (컴파일러)

 

---

리액트에서는 빌드가 된 최종 배포상태에서 동작하는 경로를 기준으로 설정이 된다.

 

배포되면 public/안에 있는 index.html 등 리소스들이 최상위 루트로 지정된다.