리액트는 자바스크립트를 포함한 HTML문법을 사용할 수 있다.
엄밀히 말하자면 HTML문법에 익숙해진 프론트엔드놈들을 위해 리액트가 친절히 번역하는 기능을 넣었다.
당연히 리액트는 자바스크립트의 라이브러리 격이므로, HTML문법이 마냥 절로 통하지는 않는다 따라서~ 다음 세가지 조건을 만족해야한다.
1. 태그에 class주는 방법
[HTML] <div class = "클래스명"> </div>
[JSX] <div className = "클래스명"> </div>
Do you know camel case?
번외) 그대는 카멜케이스에 대해 알고 있는가?
변수명을 정할 때 어떤 방식으로 변수명을 정했는지 모르겠지만, 대개의 변수명 정하는 방법은 카멜 케이스 방법을 채택한다.
상기 서술한 className 또한 카멜 케이스 방법을 채택하였다. 꼭 기억하도록 하자.
다음으로 넘어가기 전에, 변수명을 정하는 방법 세가지에 대해 간단하게 훑고가자. 재밌잖아
변수명을 정하는 방법은 모두 띄어쓰기와 연관되어있다! 각 언어에 따라 변수명을 정하는 방법을 따라야 하는 경우가 있다!
1) camelCase : 카멜 케이스 🐪
낙타 등 표기법이라고도 이야기 하며, 낙타 등에 생긴 혹처럼 중간에 톡 튀어 나와있다는 느낌으로 사용되어 카멜 케이스라고 한다.
띄어쓰기가 필요한 부분에 대문자를 써보도록 하자. 그럼 당신도 카멜 케이스 마스터 👍
2) snake_case : 스네이크 케이스 🐍
마찬가지로 띄어쓰기가 필요한 부분에 언더바(_)를 사용하여 변수를 만든다. 생긴게 뱀처럼 생겼다나 뭐라나~
3) PascalCase : 파스칼 케이스 🌬️
첫글자는 대문자로 띄어쓰기도 대문자로 이게 왜 파스칼 케이스라고 불리우는지 숙제 주도록 하겠다. 알아오세요.
2. 리액트 데이터 바인딩
const [num, setNum] = useState(0);
<div> 현재 숫자 : {num} </div>
3. style 속성 집어 넣기
style = {{color: 'blue', fontSize : '30px'}}
태그에 상기 서술된 코드를 작성하는데, 앞서 설명한 카멜케이스로 넣어야한다.
font-size가 헷갈릴 수 있는데 하이픈(-)은 뺄셈기호 그 이상도 그 이하도 아니야 라는 생각을 하고 있자.
이정도만 알고 있어도 JSX문법은 완벽하게 파악했다고 할 수 있댄다.
아직은 그 세계에 다 발들이지는 못했지만 아주 기본적인 문법을 나타내었다.
도움이 되었길 바란다.