1. 리액트 JSX

이슈

(시작하기에 앞서서... 리액트 강의가 버전 1 , 버전 2가 있는데.. 버전 2가 새롭게 리뉴얼됨에 따라 버전 1 강의는 버리고 버전 2의 강의를 듣기로 결정하게 되었다. 버전 1은 나중에 시간이 날 때 볼 듯하다.) - 기준 2024년 8월 7일.

정말 다행히도 버전 2는 HTML / CSS / 자바스크립트에 대한 기본적 내용이 "준비하기" 과정에 추가되었기에 기록하는 것에는 지장이 없다. 그 뒤에 리액트 소개와 연동까지는 별 지장이 없기에 JSX부터 기록을 버전 2로 시작하게 되었음.

> 이에 따라 Node.js / npm 을 설치하고 React App 연동까지 하였다.

리액트를 구동하고 싶다면 터미널을 열어서 npm start 라고 작성하면 된다.

JSX란 자바스크립트 파일에서도 쓰이는 html 대체품이라고 생각하면 편하다.

이때 예시 코드는 다음과 같다.

const element = <h1>Hello World!</h1>;

잘 보면 html 같으면서도 뭔가 자바스크립트를 보는 거 같다. 이건 자바스크립트 상에서도 html를 조절시키고 코드를 좀 더 축약하게 만든다.

JSX 장점

필수는 아니지만 장점이 많기에 사용하는 것이 좋다.

JSX 사용법

기본적으로 자바스크립트 문법을 전부 지원함.

1. CSS 지정하고 싶다면 예를 들어 div 태그를 설정할 때 "class"가 아닌 "className" 으로 지정해야 함.

2. 자바스크립트에서 변수 지정하고 html에 넣을 때에는 중괄호 { } 로 지정함.

3. style 지정은 { { 이름 : '값' } } 으로 지정한다.

전체적인 레이아웃

(데이터 바인딩이 무엇인지 살짝 알 수 있음)

결국은 JSX 사용하고 터미널을 열어서 npm start로 서버를 여는 것이라고 볼 수 있다.

근데 기존에 사용하던 서버가 있으면 호스트 3000이 아닌 3001로 들어가지는 상황이 발생한다.

호환성 문제는 좀 더 연구를 해봐야 할 듯 하다. (~~머리가 굉장히 아프다!~~)

관련글