JSX 기초 - html을 품은 JS

 

•  태그는 꼭 닫아주어야한다.

 

• 하나의 Element만 반환할 수 있다. ( 마지막에 <div></div> 태그에 담아주면 된다.)

return (
    <p>안녕하세요! 리액트 반입니다 :)</p>

    <div className="App">
      <input type='text'/>
    </div>
  );

위 코드를 실행하면 엘리먼트가 2개라서 에러가 난다.

return (
	<div>
        <p>안녕하세요! 리액트 반입니다 :)</p>

        <div className="App">
          <input type='text'/>
        </div>
    </div>
  );

이렇게 return안에 맨 앞에 맨 뒤에 <div> </div>태그를 넣어주면 하나로 인식되서 정상 작동 된다!

 

 

• JSX안에서 자바스크립트를 사용하려면 중괄호를 사용해야한다. { }
  삼항연산자를 사용할때도 중괄호를 사용해서 하면 된다.
  
  

 

• class를 사용하지 않고 className을 사용한다.
  
  

 

• Html태그에 style을 직접 사용할 수 없다.

<button style="color: black"> btn </button>
// 기존 html에서 사용하던 방식


<button style={{color: 'black'}}> btn </button>
// JSX에서 사용할 수 있는 방식


const styles = {
	color: 'black'
};
// JSX에서 변수를 선언해 사용하는 방식