React JSX문법 7가지 규칙

1. React JSX문법 7가지 규칙

1) 꼭 태그는 최상위 태그로 감싸줘야 함.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>안녕하세요?</h1>
      </div>
    );
  }
}

export default App;

• 레이아웃을 유지하고 싶은 경우, React.Fragment 태그 사용
• "<></>" 짧게 쓰고 싶을 땐 요거

const Features = (props) => {
  const { tweets, Notice, currentPage } = props;

  return (
    <section className="features">
      {!currentPage ? (
        'loading'
      ) : currentPage === 'tweets' ? (
        // <></> <React.Fragment></React.Fragment> 약자
        // 최상위 노드를 추가하지 않아도 자식들을 그룹화할수 있음.
        // 장점: 불필요한 노드 생성하지 않기에 메모리를 좀더 적게 사용함.
        // 그러므로 추가적인 최상위 노드를 생성하지 않기에 레이아웃 유지에 용이
        <>
          <div className="tweetForm__container ">
            <div className="tweetForm__wrapper">
              <div className="tweetForm__profile"></div>
              <Counter total={tweets.length} />
            </div>
          </div>
          <Tweets tweets={tweets} />
        </>
      ) : (
        <>
          <NotificationContainer notifications={Notice} />
          <Notifications notifications={Notice} />
        </>
      )}
      <Footer />
    </section>
  );
};

• React.Fragment 태그의 장점
  • 불필요하게 최상위 태그를 감싸필요가 없어서 메모리를 불필요하게 사용하지 않음.
  • 기존의 레이아웃을 망가지지 않고 그대로 유지할 수 있음.

2) 태그를 열었으면 꼭 닫아야 한다.

• 태그는 무조건 닫혀 있어야 합니다.
• 일반태그들은 닫혀있지만, 종료태그가 없는 태그는 반드시 />를 처리해줘야 합니다.
• 에러 상황의 예(Parsing error: unterminated jsx contents)

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <>
        <h1>안녕하세요?
      </>
    );
  }
}

export default App;

3) JSX안에서 자바스크립트 값을 사용하고 싶을때는 {}를 사용

• 컴포넌트는 UI를 구현하는 것 이외에도 여러가지 기능을 합니다.
• 그 중 하나가 자바스크립트로 값을 처리하는 것입니다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    const text = '안녕하세요';

    return (
      <>
        { alert('자바스크립트에요~') }
        <h1>{ text }</h1>
      </>
    );
  }
}

export default App;

4) JSX의 { }안의 주석은 /* */만 사용 가능

• return문 바깥쪽은 // 이걸로 주석처리가 가능하지만,
• 안쪽부터는 JSX문법이 적용되기에 주석처리를 하고 싶으면
  /* */ 사용해야 한다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    const text = '안녕하세요'; 

    return (
      <>
        <h1>
          { text /* 변수사용 */ }
        </h1>
      </>
    );
  }
}

export default App;

5) 조건부 렌더링

• (조건식)?(참표현식):(거짓표현식)

import React, { Component } from 'react';

class App extends Component {
  render() {
    const score = 100; 

    return (
      <>
        {
          (score>=80)
            ?(<h1>합격</h1>)
            :(<h1>불합격</h1>)
        }
      </>
    );
  }
}

export default App;

• 짧은 조건문 문법: (조건식)&&(참표현식) / (조건식)||(거짓표현식)

import React, { Component } from 'react';

class App extends Component {
  render() {
    const score = 100; 

    return (
      <>
        {
          (score>=80)&&(<h1>합격</h1>)
        }
      </>
    );
  }
}

export default App;

• 즉시실행함수 함수형(함수를 선언하자마자 실행하는 함수)

(function(){
})();

• 즉시실행함수 화살표함수형

(() => {

})();

import React, { Component } from 'react';

class App extends Component {
  render() {
    const score = 100; 

    return (
      <>
        {
          (() => {
            if(score >= 80){
              return (<h1>합격</h1>);
            }else{
              return (<h1>불합격</h1>);
            }
          })()
        }
      </>
    );
  }
}

export default App;

6) JSX 스타일링

• 태그 문법에 스타일링
  • jsx에서 자바스크립트 문법을 쓰려면 {}
  • 거기에서 스타일 속성명과 값을 쓰려면 객체형식으로
  • 그래서 최종적으로 {{}}

<태그명 style={{ 속성명: 값 }}></태그명>

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <>
        <h1 style={{
          backgroundColor: 'black',
          color: 'pink'
        }}>스타일링</h1>
      </>
    );
  }
}

export default App;

• 변수에 할당하여 스타일 적용

import React, { Component } from 'react';

class App extends Component {
  render() {
    const h1Style = {
      backgroundColor: 'black',
      color: 'pink'
    }

    return (
      <>
        <h1 style={ h1Style }>스타일링</h1>
      </>
    );
  }
}

export default App;

7) 외부 스타일 시트의 class 가져오기

• class 속성을 className 속성으로 처리

import React, { Component } from 'react';
import './test.css';

class App extends Component {
  render() {
    return (
      <>
        <h1 className="h1Style">스타일링</h1>
      </>
    );
  }
}
export default App;