React

1. JSX

JSX는 리액트에서 컴포넌트의 생김새를 정의할 때 사용하는 문법이다.
보기에는 HTML으로 보이지만 HTML이 아니라 바벨을 통해서 자바스크립트로 해석이 되는 것이다.

💡만약 JSX가 자바스크립트로 변환되는 과정을 보고싶다면?
1. https://babeljs.io에 접속한다.
2. 홈페이지 내에서 try it out에 들어가서 HTML을 작성해보면 된다.

💡JSX가 자바스크립트로 제대로 변환되려면 몇가지 규칙을 준수해야 한다.
1. 태그는 무조건 닫혀 있어야 한다.

<div></div>

2.태그를 이용시에 아무 내용도 들어가지 않는다면 self closing을 이용할 수 있다.

<div></div>
<!--self closing tag-->
<div />

3. 두 개 이상의 태그는 꼭 하나의 태그로 감싸여 있어야 한다.

<div>
	<hello />
  	<div>안녕하세요.</div>
</div>

3 - 1. 만약에 두 개의 태그가 있다고 해서 불필요하게 div를 사용하거나 table태그로 감싸기 애매한 경우에는 fragment tag를 이용하는 방법이 있다.

<>
</>

Ex2) 추가적으로 괄호로 감싸여 있는 경우가 있는데 JSX를 이용할 때에 괄호는 부과적인 것이다. 아래 예시에는 가독성을 위해서 사용된 것이다.

import React from 'react';
import hello from './Hello'

function App() {
return(
<>
  <Hello />
  <div>안녕하세요</div>
</>
);
}

4. JSX내부에서 자바스크립트를 사용하는 방법

import React from 'react';
import hello from './Hello'

function App() {
const name = 'react';
return(
<>
  <Hello />
  <div>안녕하세요</div>
</>
);
}

만약에 name이라는 상수가 있다고 가정하자.
JSX내부에서 보여주고 싶다면 단순히 name이라고 한다면 말 그대로 문자열이 나타나지만
만약 {}로 감싸주게 된다면 실제 name이라는 상수의 값이 보여지게 된다.

5. 스타일과 클래스네임을 설정하는 방법

1)HTML에서는 인라인style을 설정할 때

<div style ="fontsize: 16px"></div>

와 같이 작성하게 된다.
하지만 react나 JSX에서는 다르다 객체를 만들어줘야 한다.

function App() {
const style = {
bacgroundColor: 'black',
color:'aqua',
fontSize: 24//기본 숫자만 넣어주게 된다면 'px'가 단위가 되지만, 다른 단위를 넣어주고 싶다면 'rem'으로 넣어주면 된다.
};
}
return(
<>
  <Hello/>
  <div style={style}>{name}</div>
</>
)

여기서 알아둬야 할 사실은 우리가 아는 기본적인 스타일을 넣어줄 때 font-size: 16px;과 같이 -로 문자 사이에서 들어가는 것은 카멜표기법을 사용해야 한다. fontSize

2) CSS class를 작성할 때도 조금 다르다.

<div class="gray-box"></div>

위와 같이 작성하는 것이 일반적으로 우리가 HTML에서 작성하는 방법이다. 위와 같이 작성해도 사용은 가능하지만 개발자 콘솔을 보면 경고가 뜨게 된다. 옛날에는 작동도 안되었지만 지금은 작동은 가능하지만 경고가 뜨고, 사용 가능하다고 하더라도 사용해서는 안된다.

<div className="gray-box"></div>

이렇게 class=""으로 이용하는 것이 아니라 className=""으로 작성해야 한다.

3) 주석 사용방법
{/**/} 와 같이 '중괄호'로 감싸줘야 한다.
추가적으로 태그를 여는 부분이나 셀프클로징 태그에서도 주석을 작성할 수 있는데, //와 같이 중괄호가 없더라도 주석이 가능하다.

---