오늘은 드디어 간단하게 React를 배우면서 내가 들었던 용어들을 정리해보았습니다.
jsx란 JavaScriptXML으로 기존에 있던 자바스크립트 문법이 아닌 새로운 확장된 문법으로 아래와 같이 간단하게 작성을 해 줄 수 있다.
const h1 = <h1>Hello! World!</h1>;
const h1 = document.createElment("div")
h1.innerText = `Hello! World!`;
위의 비교와 같이 코드의 양이 확실이 줄어들며 jsx의 장점으로 템플릿 리터럴 없이도 해당하는 변수 지정 및 다양한 변수들을 삽입하여 조금더 쉽게 요소를 만들고 수정해줄 수 있다.
하지만 위의 문법은 브라우저는 읽을 수 없는 형태이다. 그렇기 때문에 별도의 컴파일의 과정을 통해 브라우저가 읽을 수 있는 형태로 바꿔준다. 그 컴파일러는 babel라고 불리는 라이브러리다.
babel은 자바스크립트 컴파일러로 jsx
나 기타 다른 커뮤니티에서 만든 문법을 자바스크립트가 이해 할 수 있는 형태로 변환을 도와주는 라이브러리로 굉장히 인기가 많다.
바벨을 통해 jsx문법을 사용 할 수 있다.
React Dom은 리액트에서 만든 dom 라이브러리로 가상 dom의 개념을 통해 브라우저를 더욱더 동적으로 만드는 데 도움을 주는 라이브러리다. React을 사용하려면 반드시 사용해야 하는 라이브러리다.
CRA 는 Create React App의 약어로 React를 더욱 편하게 만들어주는 일종의 BoilerPlate로 CRA를 통해 더욱 편하게 react
를 이용한 코딩을 가능하게 만들어준다. 기본으로 웹팩이 내장되어있다.
오늘은 이렇게 간단하게 React에서 자주 사용되는 키워드들을 살펴보았습니다. 다음 글에는 어떤 식으로 리액트를 사용하는지 포스트를 할 예정입니다.