JSX문법에 대한 몇가지 주의 사항

아래 문법사항은 C:\FrequentlyUsedFiles\ReactProjects\react-webgame 구구단 파일에서 가져온 것임

반드시 기억할 것이 우리가 만든 컴포넌트(예를들면 위의 LikeButton)는 반드시 첫문자를 대문자로 기록하고 기본적으로 제공되는 엘러먼트는 반드시 소문자로 해준다. html 같은 경우 대문자도 되지만 xml은 html의 조상격으로 html보다 까다롭다. 이렇게 까다로움에서 생긴 문법이 또 하나 있는데 input 태그에서 반드시 닫는 열린태그 맨 뒤에 닫는 태그의 의미로 /를 꼬옥~ 기입해 주어야 함. 안 붙이면 에러남. 

    그리고 js코드 부분은 반드시 중괄호로 감싸야한다!!!!!!! 따라서
    <button onClick={() => {this.setState({liked: true});}} obj={a:'b',c:'d'}>   가 아닌
    <button onClick={() => {this.setState({liked: true});}} obj={{a:'b',c:'d'}}>   로 해주어야 한다.

      또한 jsx문법은 한계가 많아서 아래와 같은 코드

      return (
        <button onClick={() => this.setState({liked: true})}>
          Like
        </button>
      );

      안에서 for 문과 if문을 사용할 수 없다. 따라서 if문이 필요할 때는 아래와 같이 3항 연산자가 사용된다.물론 이때에도 JS코드에는 예외없이 중괄호로 처리해 준다.
      return (
        <button onClick={() => this.setState({liked: true})}>
          {this.setState.liked?'Liked':'Disliked'}//jsx에서는 이와 같이 if문 대신에는 3항 연산자를 사용
          {[1,2,3].map((i)=>{return <div>i</div>;})};//jsx에서는 이와 같이 for문 대신에 map을 사용함. 
        </button>
      );

또한, return의 결과로 2개이상의 태그를 return할 수는 없다. 따라서 2개 이상의 태그를 반환할때는 반드시 아래와 같이 하나의 태그로 감싸준 후에 반환해야 한다. 
             return<div>
            <button onClick={() => this.setState({ liked: true })}>Like</button>
            <input type="text" />
</div>;

흥미로운 것이 fragment태그 라고 하여 아래와 같이 비어있는 태그는 또 사용될 수 있다.
             return(<>
            <button onClick={() => this.setState({ liked: true })}>Like</button>
            <input type="text" />
</>
);

또한 return 문이 여러 줄로 구성될 경우 소괄호로 묶어 줍니다. 

또한 JSX에서 우리가 만든 컴포넌트도 태그, 엘러먼트 이다!!!!