React - 리액트에서 레이아웃 만들 때 쓰는 JSX문법 3개

기존의 html,css,js로 웹사이트를 만들때에는 html에 코드를 작성했었는데

React에는 html 대신 JSX라는걸 사용합니다. 

 

App.js가 우리가 작성할 메인페이지입니다.

이미 채워져있던 부분들은 없애고 <div>하나만 남겨놓고 시작합니다. 

 

우리는 블로그를 만드는 것을 목표로 삼았기 때문에 먼저 블로그 상단 nav를 제작해봅시다.

 

 

JSX문법1

• HTML에 class 넣을 땐 className

 

아래처럼 h1~h4태그를 사용하거나 p태그를 사용하여 내용을 삽입할 수 있습니다.

그리고 기존의 html에서는 css를 설정할때 class=이름 형식으로 설정했는데 

React에서는 className=이름 형식으로 설정해줘야합니다. 설정 후 App.css파일로가서 css를 설정할 수 있습니다. 

 

왜냐하면 실은 App.js에 짜고 있는건 html이 아니라 JSX라고 부르는 언어라서 그렇습니다. 

JSX는 일종의 자바스크립트라서 자바스크립트에서 사용하는 예약어인 class라는 키워드를 막 사용하면 안됩니다. 

(App.js)

function App(){
  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그임</h4>
      </div>
    </div>
  )
}

(App.css)

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

 

 

 

JSX 문법 2. 변수를 HTML에 꽂아넣을 때는 {중괄호}

자바스크립트 변수같은 곳에 있던 자료를 HTML중간에 꽂아서 보여주고 싶을 때가 많습니다. 

일단 post라는 변수를 만들어서 저장해줍니다. 

옛날 자바스크립트 문법을 쓴다면 document.getElementById().innerHTML = ?? 이런식이었지만 더 쉽게 할 수 있습니다.

 

function App(){

  let post = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>블로그임</div>
        <div>{ post }</div>
      </div>
    </div>
  )
}

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

(참고로 변수에 있던걸 html에 넣는 작업을 데이터바인딩이라고 합니다)

그리고 온갖 곳에 {}중괄호를 열어서 변수들을 집어넣을 수 있습니다. 

href, id, className, src 등 여러가지 html 속성들에도 가능합니다. 

아래처럼 태그 id에도 가능합니다. 

function App() {

  let post = '강남 우동 맛집';

  return (
    <div className="App">
      <div className="black-nav">
        <h4 id={post}>블로그임</h4>
      </div>
      <h4>{post}</h4>
    </div>
  );
}

실제 사이트에서 콘솔창으로 확인해보면 id가 맞습니다. 

 

JSX문법 3. HTML에 style 속성 넣고싶으면

<div style="color:blue">이런걸 넣고 싶으면

JSX상에서는 style={}안에 {}자료형으로 집어넣어야합니다. 

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

이렇게 넣어야합니다. 주의사항은

• { 속성명 : ' 속성값 ') 이렇게 넣어야합니다.
• font-size처럼 속성명에 대쉬기호를 쓸 수 없습니다. 즉 fontSize를 써야합니다.(대쉬기호 대신 모든 단어를 붙여써야하고 붙여쓸 땐 앞글자를 대문자로 치환해야합니다)

 

---

참고자료

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌