JSX란?

• 자바스크립트 문법을 확장하여 UI가 어떻게 보일지 정의하는 문법
• 리액트 컴포넌트 파일에서 XML형태로 코드를 작성하면, Babel이 JSX문법을 JavaScript로 변환 해준다

JSX 규칙

태그는 닫혀 있어야한다

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

export default App;

자바스크립트 값 및 표현식은 {}로 감싼다.

function App() {
  const name = "RYU"
  return (
      <div>
       <hello/>
      </div>
      <div>{name}</div>
  );
}

export default App;

inline stle CSS는 객체형태로 작성

function App() {
  const name = "RYU"
  const style ={
    backgroundColor : 'red',
    fontSize : '2rem',
    padding : 10
  return (
      <div>
       <hello/>
      </div>
      <div style={style}>{name}</div>
  );
}

export default App;

class설정은 className으로 작성

function App() {
  const name = "RYU"
  const style ={
    backgroundColor : 'red',
    fontSize : '2rem',
    padding : 10
  return (
      <div className='hello'>
       <hello/>
      </div>
      <div style={style}>{name}</div>
  );
}

export default App;

null, false, undefined를 렌더링하는 경우

• 컴포넌트에서 사용하면 웹페이지에 아무것도 나타나지 않는다.

이벤트를 등록할때 onclick={함수명}으로 작성

function Likeup() {
  const [Like,setLike] = useState(0)
  
  const clicktoLickUp = () => {
  	setLike(like+1)
  }
  return (
      <div>
      <h1>{Like}</h1>
      <button onClick={clicktoLickUp}>Like</button>
      </div>
  );
}

export default Likeup;