React - JSX

리액트 프로젝트에서는 메인으로 작업하는 페이지가 App.js 파일입니다. 이 파일에서 HTML도 작성할 수 있습니다. 

 

function App() {
  return (  )
}

 

return 뒤에 오는 소괄호 안에 HTML을 바로 작성해주면 됩니다. 그런데 사실 이 안에 작성되는 엄밀히 말해서 HTML이 아닙니다. 여기에 사용되는 문법을 JSX 문법이라고 합니다. 생긴 건 HTML과 비슷하지만 문법이 조금씩 다릅니다. 왜냐하면 JSX가 쓰이는 파일이 App.js 파일, 즉 자바스크립트 문법이기 때문입니다. 

 

그렇지만 HTML 파일을 작성할 때와 거의 비슷하기는 합니다. 다만 좀 차이가 나는 지점이 있는데요. 차이가 나는 지점 위주로 공부해보겠습니다.

 

 

1️⃣  div에 class를 주고 싶을 때

 

div에 클래스를 주고 싶은 경우는 주로 css를 이용하여 스타일을 주고 싶을 때입니다. 그럴 때는 아래 코드처럼 주면 됩니다.

 

function App(){
  return (
    <div className="App">
      <div className="black-nav"></div>
    </div>
  )
}

 

예를 들어 웹 페이지의 nav 메뉴를 만드는 상황이라고 가정해보겠습니다. div 태그를 주고 class를 줬습니다. 그런데 HTML과 조금 차이가 나는 지점이 확인될 것입니다. class 라고 쓰지 않고 className 이라고 사용하고 있습니다. 

 

이것은 App.js 가 자바스크립트 파일이기 때문에 이렇게 작성을 하는 것입니다.  Javascript ES6 문법에 나오는 class 키워드와 구분하기 위해서 JSX에서 class를 줄 때는 className 이라는 키워드를 사용합니다.

 

 

2️⃣  Data Binding 하는 법

 

리액트를 사용하는 가장 큰 이유 중 하나가 데이터 바인딩이 쉽다는 이유 때문입니다. 데이터 바인딩이란 자바스크립트 데이터를 HTML에 꽂아넣는 작업이라 생각하면 됩니다. 최근 프론트엔드 개발자가 정말 많이 하는 작업 중 하나입니다. 

 

function App(){

  const data = '안녕하세요';
  return (
    <div className="App">
      <div className="nav">
        <div>개발 blog</div>
        <div>여기에 꽂고 싶으면?</div>
      </div>
    </div>
  )
}

 

원래 쌩자바스크립트로 작성한다고 하면 document.getElementById().innerHTML 뭐 이런 식으로 했을 것입니다. 그러나 리액트에선 이렇게 복잡하게 하지 않아도 됩니다.

 

function App(){

  const data = '안녕하세요';
  return (
    <div className="App">
      <div className="nav">
        <div>개발 blog</div>
        <div>{ data }</div>
      </div>
    </div>
  )
}

 

이렇게 { } 중괄호 안에 자신이 원하는 데이터를 담은 변수를 넣어주기만 하면 됩니다. 훨씬 코드를 간결하게 작성하면서 데이터바인딩을 할 수 있게 되었습니다. 리액트에선 중괄호가 굉장히 많은 곳에 사용됩니다.(중괄호와 친해지면 좋습니다👍🏻) 중괄호는 변수명 뿐 아니라 미리 만들어 둔 함수, className, src 등 정말 다양한 것을 다 넣을 때 사용됩니다.

 

 

3️⃣ JSX에 바로 style을 주고 싶을 때

 

<div style="color: blue"></div>

 

HTML 작성하면서 바로 style을 주고 싶을 때 이런 식으로 작성했습니다. 그런데 JSX에선 이렇게 작성하면 안 됩니다. JSX에서 style을 바로 넣고 싶을 때는 무조건 중괄호 안에 object 자료형을 이용하여 넣어야 합니다.

 

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

이렇게 넣어야 합니다. 중괄호 안에 object 자료형으로 넣어야 하니 중괄호가 두 개 등장하겠네요. 여기서 또 하나 주의할 점은 fontSize 부분입니다. 원래 css 속성을 넣을 때는 font-size 이렇게 넣었지만, 자바스크립트에선 - 가 마이너스 연산자를 의미하기 때문에 fontSize 처럼 camelcase 작명 방법으로 넣어줘야 합니다. 

 

바로 style 넣는 것은 코드도 복잡해지고 귀찮을 수 있기 때문에 css 파일에서 작업해주는게 가장 좋긴 합니다.