surf react : JSX 규칙

Dino_·2021년 7월 15일

JSX React

surf react

목록 보기

2/9

🔔 Goal

JSX에 대해서 이해한다.

🌳 JSX

react의 자바스크립트 확장 문법으로 React 컴포넌트의 생김새를 정의한다.

babel을 통해 JSX문법이 자바스크립트로 변환된다.

🌳 JSX 작성 규칙

🍃 태그는 반드시 닫아야 한다.

HTML에서 input 혹은 br 태그는 닫지 않고 사용하기도 하지만, JSX에서는 반드시 닫아주어야 한다.

start Tag와 end Tag 사이에 내용이 들어가지 않을 때에는 'Self Closing' 태그를 사용한다. -> <Comp />

import React from 'react';
import Comp from './Comp';

function App() {
  return (
    <div>
      <Comp />
      <Comp />
    </div> // 태그 닫기
  );
}

🍃 두 개 이상의 태그는 반드시 하나의 태그로 감싸져야 한다.

import React from 'react';
import Comp from './Comp';

function App() {
  return (
    <div>
      <Comp />
      <div>hello, react</div>
    </div>
  );
}

위 코드에서 <Comp /\>와 <div\> 태그를 다른 태그로 묶어야 한다.

태그로 묶는 방법은 다양하다.

  <div>
    ...
  </div>
  
  /* or */
  <fragment>
    ...
  </fragment>
  
  /* or */
  <>
  	...
  </>

🍃 JSX 내부에 자바스크립트 표현식을 사용할 때에는 {} 으로 감싼다.

import React from 'react';
import ./Comp from './Comp';

function App() {
  const name = 'hello, react';
  return (
    <div>
      <Comp />
      <div>{name}</div>
    <div/>
  );
}

🍃 style은 객체로 넘긴다.

import React from 'react';

function App() {
  const style = {
    backgroundColor: 'black',
    color: '#f3f3f3',
  }

  return (
    <div>
      <Hello />
      <div style={style}>hello, react</div>
	  /*아래와 같이도 사용 가능*/
      <div stype={{fontSize:"12px"}}
    <div/>
  );
}

🍃 카멜케이스 명명법

태그 혹은 CSS의 속성에 사용되는 이름들은camelCase 형태로 작성

class
dash(-)로 구분되어 있는 이름
onclick

import React from 'react';

function App() {
  
  handleCountIncrease = () => {
     const count = this.state.count;
     this.setState({
        count: count + 1
     });        
  };
  
  return (
    <div>
      <div className="template">템플릿</div>
      <Form onClick={handleCountIncrease} />
    <div/>
  );
}