[React] 리액트의 컴포넌트를 작성할 때 필요로 하는 JSX 기본문법

1. JSX 란?

---

 

JSX의 형태를 먼저 보면 HTML의 형태와 굉장히 유사하다. 

const element = <h1>Hello, world!</h1>;

JSX는  자바스크립트 문법을 기반으로 한 자바스크립트 확장형 문법이다. 리액트 컴포넌트를 작성할 때 주로 사용된다.

 

 

2. JSX의 기본 규칙

---

1) 태그는 언제나 닫아줘야 한다.

HTML에서 input태그를 사용할 때 닫아주지 않고도 사용이 가능했다. 하지만 JSX에서는 어떤 태그던지 모두 닫아줘야하는 규칙이 있다.

<input type="text" value="hello"></input>

 

2) 두 개 이상의 element는 무조건 하나의 element로 감싸져있어야 한다. 

<div>
  <div>hello</div>
  <div>React</div>
</div>

 

불필요하게 <div>태그가 많아서 불편할 경우, Fragment 기능을 사용하면 된다 (v16.2부터 도입된 기능)

import React, { Component, Fragment } from 'react';

class App extends Component {
  render(){
 	return(
    <Fragment>
	  <div>
	    <div>hello</div>
	    <div>React</div>
	  </div>
    </Fragment>
    
    );
 }

 

 

3) 값을 가져오는 방식에는 중괄호 사용 {}

import React, { Component } from 'react';

class App extends Component {
  render(){
  const name = 'world';
 	return(
	  <div>
	    <div>hello {name}/div>
	  </div>
    );
 }

 

 

4) CSS를 inline방식으로 적용하는 방법

 - 객체 형식으로 적용

 - 기존 CSS에서 하이픈이 들어갔던 방식은 카멜케이스(camelCase)로 표시

 - CSS의 값은 '문자열'로 대입

render(){
  const style = {
      backgroundColor:'salmon',
      fontSize:'24px',
      marginUp:'10px'
    }
  return(  
   <p style={style}>test</p>
  );
  }

 

4) CSS파일을 따로 작성하고 class에 적용하는 방법

 

 css 파일

.App {
  background-color: powderblue;
  color:red;
  font-size:36px;
}

app.js : class라고 작성해도 되지만 className이 올바른 속성

import './App.css';

class App extends Component {
  render(){
    return (
      <div className="App">
       <p>hello</p>
      </div>
    );
  }
}

 

5) 주석을 달 때는 중괄호를 사용 {}

<div>
{/* 여기에 주석을 적습니다 */}
  <div>hello</div>
  <div>React</div>
</div>

 

참조한 URL :

https://www.youtube.com/watch?v=8RVoVvgaQdY&list=PL9FpF_z-xR_E4rxYMMZx5cOpwaiwCzWUH&index=6

https://www.youtube.com/watch?v=N96EJm09Pxo&list=PL9FpF_z-xR_E4rxYMMZx5cOpwaiwCzWUH&index=7