리액트 기초 문법

리액트는 JSX라는 문법을 사용한다.
JSX는 HTML과 비슷하지만 JS의 역할을 하며 자신만의 규칙을 갖고있다.

<JSX의 규칙>

1.태그는 꼭 닫혀있어야 한다.

일반적으로 HTML을 쓸때는 INPUT TYPE는 닫혀있지않다.
그러나 JSX에서는 <input /> 처럼
모든 항상 닫혀있어야 한다.

2.모든 태그는 2개 이상이 된다면 꼭 하나로 감싸져야 한다.

import React from "react";
class App extends React.Component{
  render(){
     return (
      <div>
        첫 번째 div입니다.
      </div>
      <div>
        두 번째 div입니다.
      </div>
      )
    }
}

export default App; 

위와 같이 div가 하나로 감싸져있지 않으면
[Adjacent JSX elements must be wrapped in an enclosing tag.]
에러가 발생한다.

그렇기 때문에 다음과 같이 코딩해야 한다.

import React from "react";
class App extends React.Component{
  render(){
     return (
      <div>
         <div>
          첫 번째 div입니다.
         </div>
         <div>
          두 번째 div입니다.
        </div>
      </div>
      )       
    }
}

export default App; 

<JSX안에서 자바스크립트 값을 사용하는 방법>

1.중괄호 사용하기

JSX안에서 JS를 사용하는 방법은 다음과 같이 중괄호를 사용해서 값을 표현하는 것이다.

import React from "react";
class App extends React.Component{
 render(){
	const greeting = "hello";
	return 
 	       <h1>{greeting}</h1>
    }
}

중괄호를 사용하면 단순히 변수의 값을 표현하는 것 뿐 만 아니라 함수의 사용도 가능하다.
보통은 삼항연산자를 이용해 표현한다.

import React from "react";
class App extends React.Component{
  render(){
     return (
      <h1>
        {
         1+1==2? 
          "1+1은 2다"
          :"1+1은 2가 아니다"}
      </h1>
      )        
    }
}

export default App;

삼항문 이외에 함수를 구현하고 싶은 경우 JSX밖에서 사용하는 것이 일반적이지만
생성 후 바로 실행되는 IIEF함수를 사용한 구현도 가능하다.

import React from "react";
class App extends React.Component{
  render(){
    const value = 3;
     return (
      <div>
        {
         (function(){
           if (value === 1) return <div>값은 1이다.</div>
           if (value === 2) return <div>값은 2이다.</div>
           if (value === 3) return <div>값은 3이다.</div>
         })()}
      </div>
      )   
    }
}

export default App;

2.주석을 사용하는 방법

일반적인 방법을 사용해서 주석을 설정할 경우 HTML값으로 렌더링 될 수 있다.
이것을 주의해야한다.

import React from "react";
class App extends React.Component{
  render(){
     return (
      <div className="App">
        <div>//일반 주석달기 - 화면에 그대로 표현되어 버림</div>
        <div>/* 멀티라인 주석달기 */ - 화면에 그대로 표현되어 버림 </div>
        {/* <div>제대로 주석달기 </div> - 알맞은 주석 설정하는 방법*/}
      </div>
      )   
    }
}