[React 기초] JSX 문법 01 - className, 자바스크립트 값을 JSX 안에 렌더링(콧수염괄호), inline style

React

React 기초

JSX 문법 01  -  className, 자바스크립트 값을 JSX 안에 렌더링(콧수염괄호), inline style

 

JSX란?

• JSX는 문자열도, 태그도 아닌 JavaScript에서 XML문법을 추가 확장한 문법이다.
• 리액트에서 JSX 사용은 필수가 아니지만, 대부분 사용하는 이유는 자바스크립트 내에서 HTML 작성하듯 비슷하게 작성할 수 있는 장점으로 많이 사용하고 있다.
• JSX는 브라우저에서 실행하기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. 

 

1. className

일반 html 태그에서 class를 추가할 때에는 

<div class="box">
  text
</div>

위와 같이 어트리뷰트 이름을 쓰는 것이 맞으나, React JSX 문법은 카멜케이스(camelCase) 프로퍼티 명명 규칙을 따라 사용해야 한다.

따라서,

<div className="header">
  <h4>헤더 텍스트</h4>
</div>

이와 같이 적는 것이 올바른 JSX class 문법 인 것이다.

 

 

 

 

 

2. 자바스크립트 값을 JSX 안에 렌더링(콧수염괄호)

앞서 말했듯, JSX는 자바스크립트 기반 확장 언어이기 때문에, 문서 내에서 자바스크립트 처럼 활용할 수 있다.

태그 내 값을 변수나 서버에서 받아 온 값으로 유연하게 렌더링 할 수 있는 장점이 있는데  그것이 콧수염괄호( {} ) 이다.

function App() {
  let post = "post title";
  return (
    <div className="App">
      <div className="blog">
        <h4> {post} </h4>
      </div>
    </div>
  );
}

이렇게 작성할 경우

엘리먼트 데이터 렌더링 화면

위와 같이 h4 태그 내에 변수 post의 문자열값 "post title"이 정상적으로 출력 되는 것을 확인할 수 있다.

 

 

 

 

3. inline style

html 문서 내에서 css를 인라인 스타일로 작성할 경우,

<div class="head">
  <h4 style="color: red;"> 헤드 텍스트</h4>
</div>

이와 같이 작성했지만, JSX에서는 객체의 형태로 작성해주어야 한다.

function App() {
  return (
    <div className="App">
      <div className="head">
        <h4 style={ {color: '#ffffff', backgroundColor: '#000000', margin: 0, padding: '20px' } }>inline style</h4>
      </div>
    </div>
  );
}

인라인 스타일이 올바르게 적용된 화면

 

이런 식으로 객체의 형태로 작성하며, 정상적으로 css속성이 반영 되는 것을 확인할 수 있다.

style={} 안에 {}를 한 번 더 넣어 객체 처럼 만들어준 뒤 속성 값을 적어주면 된다.

JSX inline style 사용 시 font-size같은 형태로 대쉬(-) 사용이 불가능 하고 css 속성 또한 카멜케이스 기법을 사용한다.

문자열의 경우 따옴표로 묶어주고, 속성 값이 여러개 일 경우 쉼표를 넣어 구분 지은 뒤 이어서 작성하면 된다.

 

 

 

 

 

 

이 포스팅은 코딩애플🍎 강사님의 React 기반 강의를 토대로 정리하였습니다.