React JSX??

JSX가 뭐죠?

//App.js
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
			....
    </div>
  );
}

export default App;

App.js 파일을 열어보자
위에 App.js 파일에서는 HTML 태크를 반환하는 App이라는 함수를 선언하고 있다.

HTML을 반환한다고? ㅇㅇ
이렇게 HTML 형식의 값을 반환해 주거나 변수에 HTML을 대입할 수 있는 문법을 JavaScript eXtension 바로 JSX라고 한다.

리엑트에서 레이아웃 만들 때 쓰는 JSX 문법 3개를 알아보자

1. HTML에 class를 넣을 때는 className을 사용

스타일을 주기 위한 class명을 넣을 때 class=""이 아니라 아래와 같이 className=""이라고 쓴다.

(App.js)
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
		<h1>헬로 월드!</h1>
    </div>
  );
}

export default App;

(App.css)

.App {
  background : black;
  width : 100%;
  display : flex;
  color : white;
  padding : 20px;
}

JSX 쉽다... 다음 나와

2. 변수를 HTML에 넣을 때는 {}사용

바로 코드로 알아보자

function App(){

  let post = '하이 월드';
  return (
    <div className="App">
      <div className="hi">
        <div>인사해 내 친구 월드야</div>
        <div>...</div>
      </div>
    </div>
  )
}

위에 post라는 변수를 만들어 문자를 저장해 놨다. 저 let post 안에 있는 자료를 ...에 넣어보자
자바스크립트 문법을 쓴다면document.getElementById().innerHTML = ?? 이런 식이었겠지만 리엑트는 더 쉽다.

function App(){

  let post = '하이 월드';
  return (
    <div className="App">
      <div className="hi">
        <div>인사해 내 친구 월드야</div>
        <div>{ post }</div>
      </div>
    </div>
  )
}

이렇게 중괄호 안에 데이터바인딩을 하고 싶은 변수명만 담으면 된다.

참고로 변수에 있던걸 html에 꽂아넣는 작업을 있어보이는 말로 데이터바인딩이라고 한다.

3. HTML에 style 속성을 넣고 싶다면

<h1 style="color : red"></h1>

이렇게 HTML에 style 속성을 넣고 싶다면 style={} 이런식으로 괄호 안에 자료형으로 넣어야 한다.

<h1 style={ {color : 'blue', fontSize : '30px'} }> 글씨 </h1>

{속성명 : '속성값'} 이렇게 넣어햐 한다.

font-size 처럼 속성명에 대쉬기호를 쓸 수 없으니 모든 단어를 붙여 쓰고 앞글자를 대문자로 바꿔준다. 이 방식을 camelCased 라고 한다.