Introduction

오늘은 드디어 간단하게 React를 배우면서 내가 들었던 용어들을 정리해보았습니다.

jsx?

jsx란 JavaScriptXML으로 기존에 있던 자바스크립트 문법이 아닌 새로운 확장된 문법으로 아래와 같이 간단하게 작성을 해 줄 수 있다.

 const h1 = <h1>Hello! World!</h1>;
const h1 = document.createElment("div")
h1.innerText = `Hello! World!`;

위의 비교와 같이 코드의 양이 확실이 줄어들며 jsx의 장점으로 템플릿 리터럴 없이도 해당하는 변수 지정 및 다양한 변수들을 삽입하여 조금더 쉽게 요소를 만들고 수정해줄 수 있다.

하지만 위의 문법은 브라우저는 읽을 수 없는 형태이다. 그렇기 때문에 별도의 컴파일의 과정을 통해 브라우저가 읽을 수 있는 형태로 바꿔준다. 그 컴파일러는 babel라고 불리는 라이브러리다.

babel

babel은 자바스크립트 컴파일러로 jsx 나 기타 다른 커뮤니티에서 만든 문법을 자바스크립트가 이해 할 수 있는 형태로 변환을 도와주는 라이브러리로 굉장히 인기가 많다.

바벨을 통해 jsx문법을 사용 할 수 있다.

React Dom?

React Dom은 리액트에서 만든 dom 라이브러리로 가상 dom의 개념을 통해 브라우저를 더욱더 동적으로 만드는 데 도움을 주는 라이브러리다. React을 사용하려면 반드시 사용해야 하는 라이브러리다.

CRA

CRA 는 Create React App의 약어로 React를 더욱 편하게 만들어주는 일종의 BoilerPlate로 CRA를 통해 더욱 편하게 react를 이용한 코딩을 가능하게 만들어준다. 기본으로 웹팩이 내장되어있다.

마무리

오늘은 이렇게 간단하게 React에서 자주 사용되는 키워드들을 살펴보았습니다. 다음 글에는 어떤 식으로 리액트를 사용하는지 포스트를 할 예정입니다.

profile
항상 즐겁고 재밌게!

0개의 댓글