02. JSX 문법 3개

서론

오늘은 JSX의 대표적인 문법 3개에 대해 배웠다. JSX란 리액트에서 사용하는 언어로 html과 사용방식은 비슷하지만 훨씬 편하게 코드를 짤 수 있도록 해주는 언어이다. 가장 기본 문법 3가지에 대해 알아보겠다.

 

 

본론

1. class 아닌 className !

 

블로그를 만들기 위해 상단바를 제작해볼 것이다. html과 똑같이 <div> 를 이용해 레이아웃을 설정해주면 된다. 기본 틀을 잡아놓은 후에 상단바를 검은색으로 글자를 흰색으로 설정할 것이다. css 스타일은 App.css 파일 열어서 똑같이 써주면 된다.

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

//아래 언어는 사실 html이 아니라 JSX
function App() {
  return (
    <div className="App">
      {/* 상단메뉴 만들기 */}
      <div className="black-nav">
        <h4>블로그입니다.</h4>
      </div>
    </div>
  );
}

export default App;

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

 

이처럼 class명을 black-nav라고 설정해주고 <div class="black-nav">라고 설정해주면 되는데 이때 class가 아니라 className이라고 설정해줘야 한다. 왜냐하면 자바스크립트에서 class라는 예약어가 있기 때문에 중복이 될 수 있으므로 className이라고 써야한다. 이게 바로 첫번째 문법이다.

 

 

2. 데이터바인딩은 { } 중괄호 !

 

실제 프론트엔드 개발을 하게되면 DB에서 데이터를 가지고와 html에 꽂아넣는 작업을 굉장히 많이 하게 된다고 한다. 이처럼 변수에 있던걸 html에 꽂아넣는 작업을 데이터바인딩이라고 한다. 현재 DB가 따로 없기 때문에 임의로 하나의 변수를 만들어 데이터바인딩시켜주려고 한다. 실제 블로그나 쇼핑몰을 제작한다고 생각했을 때 하나하나 손으로 하드코딩한다고 생각하면 아찔할 것이다. 이럴 때 중괄호를 이용하면 간편하게 데이터들을 가져와 뿌릴 수 있다.

function App() {

  let post = '강남 우동 맛집'; //DB에서 가져왔다고 가정

  return (
    <div className="App">
      {/* 상단메뉴 만들기 */}
      <div className="black-nav">
        <h4>블로그입니다.</h4>
      </div>
      <h4>{post}</h4>
    </div>
  );
}

 

이처럼 post라는 변수에 '강남 우동 맛집'이라는 데이터를 넣어두고 넣고싶은 곳에 중괄호를 치고 변수명을 입력하면 메인 페이지에 해당 변수 값이 보여지게 될 것이다. 해당 중괄호는 내가 원하는 곳 어디든 넣어 사용할 수 있다. href, id, className 등 여러 html 속성에도 이용할 수 있다. <h4 id = {post}> 라고 입력해주면 해당 h4의 아이디명은 '강남 우동 맛집'이 되어 있을 것이다.

미리보기한 화면

 

** 참고로 리액트를 사용하지 않고 자바스크립트 문법을 이용해 변수를 꽂아넣으려면 

    document.getElementById('h4').innerHTML = ?? 이런 식으로 작성해야 했다고 하는데, 리액트의 편리함을 또 한번 느낄 수 있다.

 

 

3. style 넣을 땐 {{속성명 : '속성값'}} !

 

css 파일을 이용하지 않고 style을 이용해 스타일을 바꾸고 싶을 땐 어떻게 할까? html 짜듯이 똑같이 style = 을 해주면 되는데 "" 이 아니라 {} 중괄호를 사용해야 한다. 또한 JSX는 {} 안에 오브젝트(객체) 자료형을 넣어줘야 한다. 키 : 값 형태로 이루어져 있는 자료형으로

style = { {color: 'red', fontSize: '20px'} } 이라고 입력해줘야 에러가 뜨지 않고 적용될 것이다.

한가지 참고사항은 font-size처럼 대쉬기호를 사용할 수 없다. JSX에서 '-'는 실제 뺄셈을 뜻하므로 대쉬기호를 사용하지 않고 모든 기호를 붙여써야 한다.

function App() {

  let post = '강남 우동 맛집'; //DB에서 가져왔다고 가정

  return (
    <div className="App">
      {/* 상단메뉴 만들기 */}
      <div className="black-nav">
        <h4 style={{color: 'red', fontSize: '20px'}}>블로그입니다.</h4>
      </div>
      <h4>{post}</h4>
    </div>
  );
}

미리보기한 화면

 

** 리액트의 에러메시지는 터미널 혹은 브라우저에서 확인할 수 있다. 만약 터미널도 브라우저도 에러메시지가 뜨지 않는데 뭔가 이상한 점이 있다면 개발자도구 콘솔에서 확인하면 된다!