변수 요소에 넣기

<h1>{변수명}</h1>

저렇게 중괄호 변수명 하면 됨.

저거 계산도 됨.

 

함수 호출도 됌.

 

        <h2>

          {num}은 {num % 2 === 0? "짝수" : "홀수"}입니다.

        </h2>

 

근데 style의 경우, 객체형식으로 넘길 수 있음.

    <main style={{

      backgroundColor:"royalblue",

      color:"#fff"

    }}>

이렇게도 감싸서 객체로 만들어서도 되고,

 

  const sty = {

    backgroundColor: "royalblue",

    color: "#fff",

  };

<main style={sty}>

이렇게 해도 되고.

 

이렇게 객체로도 넣을 수 있으니,

아예 컴포넌트로 객체형태로 내보내서 다른 컴포넌트에서 import 해서 쓸 수 있음.

근데 뭐 계산도 할 수 있고 그러니..

 

중괄호는 요소 내에서 자바스크립트 문법 쓴다고 생각하면 될 듯?