[React] 01. React의 JSX 문법

 

 

 

 

🙆‍♂️JSX란

---

JSX는 JavaScript에 XML을 추가 확장한 문법으로 React 프로젝트에서 개발할 때 사용됩니다.

쉽게말하면 JavaScript 안에서 HTML을 쉽게 사용할 수 있게 합니다.

 

 

🚀className

---

JSX에서 HTML 처럼 class를 부여하고 CSS를 통해서 스타일을 변경할 수 있습니다.

 

먼저 css파일을 import 하는 법은

이렇게 간단하게 할 수 있습니다.

 

 

<header className='header'>
   <h3>계산기 앱</h3>
</header>

.header{
  display: flex;
  background-color: black;
  width: 100%;
  color: white;
  padding-left: 2em;
}

class를 부여할 때 HTML에서는 class = "어쩌구" 로 하지만  JSX에서는 className="어쩌구"로 해야합니다.

 

 

React로 잘 적용되는 모습입니다!! 신기하네요.

 

 

🚀Data Binding

---

데이터 바인딩이란 데이터를 HTML에 꽂아 넣는 것입니다.

 

기존 자바스크립트에서 변수를 찾을 때면

document.getElementeByID("%ID%).innerHTML = 변수

이렇게 길게 코드를 작성해서 HTML 요소에 변수 값을 연동할 수 있었는데

React에서는 아주 간단합니다.

 

{} 중괄호를 사용해서 그 안에 변수를 넣기만 하면 됩니다.

 

function App() {

  let simple = "간단 계산기";

  return (
    <div className="App">
      <header className='header'>
        <h3>계산기 앱</h3>
      </header>
      <h4>{simple}</h4>
    </div>
  );
}

이렇게 simple 변수에 값을 넣고 h4 태그에 출력되게 하면

 

잘 출력됩니다.

재밌는 것이 className과 id에도 변수를 통해서 할 수 있습니다.

 

 

🚀style 넣기

---

<h3 style="color : red">계산기 앱</h3>

보통 HTML 이라면 인라인태그로 style을 줄 때 이렇게 "큰 따옴표" 안에 작성을 합니다.

그러나 React는 그렇게 하면 안됩니다.

 

<h3 style={{color : 'red'}}>계산기 앱</h3>

이렇게 중괄호 안에 작성을 해야합니다.

 

{{스타일 이름 : "값", 스타일 이름2 : "값2"}}

 이런식으로 작성할 수 있습니다.

주의할 점은 font-size 같이 빼기 표시가 있는 스타일들은

붙여주고 뒤에 글자 첫번째 알파벳을 대문자로 해야합니다.

그래서 fontSize가 됩니다.