[react] The Basics of React

jungmin kim·2021년 11월 8일
0

React_nomad

목록 보기
1/24

바닐라 JS와 React.JS의 코드 비교

좌) react.js / 우) vanila.js

리액트와 바닐라의 궁극적 차이점은 html의 활용방식이라고 생각한다.

바닐라 자바스크립트의 경우, html요소를 모두 코딩하고 그 다음에
script태그를 기입해서 넣는 것이라고 보면 된다.
리액트에서 html에 직접적으로 쓰는 코드는

<div id = "root>

이게 끝이다.

JSX


위,아래 코드는 서로 다르지만 같은 결과를 구현한다.
그러나 주로 쓰는 방식은 아래 JSX방식이다.

component의 시작은 무조건 대문자이다.
소문자는 HTML 태그명으로 인식한다.

함수 형태로만 component 내부에 넣을 수 있다.
Title과 같은 함수 형식도 있고 Button, Containter와 같은 함수형식도 있는데
후자의 함수 형식을 더 선호한다.
= () => ()

React CDN링크
@babel/standalone관련 reference
JSX 관련 reference

노마드코더 참고
https://nomadcoders.co/react-for-beginners/lectures/3258

0개의 댓글