[React #2] JSX 문법을 익혀보자!

이번 시간은 JSX 문법을 익혀볼 것이다.

React의 기본만 다루는 것이 목표기 때문에, 자세히 들여다보진 말자.

 

• JS문법에 HTML 문법을 넣을 수 있다.

return (
  <div>
    안녕
</div>
  );

일반적으로 JS문법에서는 "<div> 안녕 </div>" 이렇게 "" 사이에 html 구문을 입력한다.

JSX에서는 ""를 표시할 필요가 없다.

 

※ return이 무엇인지 모르는 사람이 있을 수 있다. 리액트는 설정에서 index.js를 실행하도록 설정이 되어있다.

index.js는 아래의 코드가 있다.

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

<App /> 는 App.js의 function App()을 실행하라는 것이다.

document.getElementById('root')는 index.html에서 root라는 id값을 찾으라는 말이다.

실제로 index.html을 가보면 root라는 div 태그가 있다. 그리고 해당 태그에 return을 해서 적용이 된다.

 

• 하나의 태그만 return 한다.

아래와 같이 return을 하게 되면 오류가 난다.

<div>
	하이
</div> 
<h1>
	하이2
</h1>

그럼 어떻게 해야하나?

그냥 태그 하나 더 씌워주자!

<div> 
	<div> 
    	하이 
    </div> 
    <h1> 
    	하이2
    </h2> 
</div>

이렇게 하면 return은 1개의 태그이다.

 

• {}로 변수 표시가 가능하다.
• if는 사용 불가능하다. 대신 삼항 연산자를 사용한다.

let a = 20;
  return (
  <div>
  
    <div style = {mystyle}>
        안녕{a === 10 ? '10입니다' : '10아닙니다.'}
    </div>
    
  </div>
  );

조건 ? 값(true) : 값 (false)

 

• css 디자인을 입힐 수 있다.

내부 디자인, 외부 디자인, 라이브러리

3가지의 방법이 있다.

내부 디자인은 사용하지 않기로 하자.

 

외부 디자인은 어떻게 하나?

App.css 파일에서 기존에 css를 입력한다.

그리고 똑같이 태그에 입력해준다.