JSX

JSX란

 리액트 프로젝트 생성과 node/npm 설치 과정은 생략하겠습니다. JSX는 자바스크립트의 확장 문법이며 XML 과 굉장히 유사합니다. 먼저 JSX 코드 순서부터 확인해 보면

import logo from './logo.svg'; /*import 특저 파일을 불러 오는 것을 의미*/ 
import './App.css';

function App() {
  return (
    <div>
      React Test
    </div>
  );
}

export default App;

이렇게 생긴 JSX 형태를 띄고 있습니다.  이러한 코드는 실제로는 다음과 같이 변화 되어 사용 됩니다

function App(){
    return React.createElement("div", null, ' React Test');
}

만약 새로 렌더링을 할 때마다 위 코드 처럼 매번 createElement함수를 사용해야 한다면 이는 매우 번거로운 작업이 될것 입니다. 그렇지만 JSX를 사용한다면 매우 편하게 UI를 렌더링 할 수 있습니다.

JSX 문법

 일반 JS에로 작성한 코드에 비해 위에서 확인했 듯 JSX를 사용하는 것이 기존 HTML 형태의 태그를 사용하여 쓰기 떄문에 가독성 면이나 활용도 면에서도 뛰어남을 확인할 수 있습니다. JSX는 편리한 문법을 제공하지만 이를 효과적으로 사용하기 위해서는 몇 가지 문법 규칙을 유지 해야 합니다

  1. 코드는 무조건 반드시 부모 요소 하나로 감싸야 한다.

import logo from './logo.svg'; /*import 특저 파일을 불러 오는 것을 의미*/ 
import './App.css';

function App() {
  return (
    <div>  <-- 이런식으로 요소를 싸지 않으면 error 호출!
      <h1>Raact Test</h1>
      <h2>jsx 문법 파악</h2>
    </div>
  );
}

export default App;

그렇지만 이런식으로 특정 HTML 코드를 코드를 싸기 싫다면 Fragment라는 기능을 사용하 수 있습니다

function App() {
  return (
    <Fragment>
      <h1>Raact Test</h1>
      <h2>jsx 문법 파악</h2>
      </Fragment>
  );
}

 

fragment는 아래와 같이 함축된 형태로도 표현 될 수 있습니다.

function App() {
  return (
    <>
      <h1>Raact Test</h1>
      <h2>jsx 문법 파악</h2>
     </>
  );
}

2. 자바스크립트 표현식 사용가능

JSX는 단순히 DOM 요소를 렌더링 하는 기능만 존재하지 않습니다 JSX 안에서는 표현식을 사용하는 것이 가능합니다.

function App() {
  const v_react = "React";
  return (
    <Fragment>
      <h1>{v_react} Test</h1>
      <h2>jsx 문법 파악</h2>
      </Fragment>
  );
}

위에 선언한 v_react 변수의 내용을 dom요소에 사용하기 위해서는 {}사이에 표현식을 지정해 사용할 수 있습니다.

3. 조건부 연산자

JSX 내부의 표현식에서 if와 같은 조건부 연산자를 사용할 수는 없습니다 하지만 조건에 따라  내용을 렌더링 해야할 경우 조건문이 필요할 경우가 있는데 이럴 경우 {} 안에 조건부 연산자를 사용하여 이를 지정할 수 있습니다.

function App() {
  const v_react = "React";
  return (
    <Fragment>
       {
         v_react === 'React' ? (
           <h1>React Test True</h1>
           <h2>jsx 문법 파악</h2>
         ) : (
          <h1>React Test False</h1>
           <h2>jsx 문법 파악</h2>
         )
       }
      </Fragment>
  );
}

4. And 연산자(&&) 를 사용하는 조건부 렌더링 

function App() {
  const v_react = "React";
  return (
    <Fragment>
       {name === 'React' ? <h1>React false</h1> : null}
      </Fragment>
  );
}

개발을 하다보면 특정 조건에 만족하지 않을 경우 아무 것도 렌더링하지 않아야 하는 상황이 올 수 있습니다. 이럴 경우 위 코드와 같이 null을 렌더링 하는 것도 가능하지만 이것보다 더 간결하게 표현하기 위해 And 연산자롤 사용하여 조건부 렌더링을 하는 것이 가능합니다.

function App() {
  const v_react = "React";
  return (
    <>
      {v_react === "React" && <h1>React True</h1>}
    </> 
  );
}

이런식으로 &&연산자를 통해 간단하게 작성이 가능합니다.

인라인 스타일링

 리액트에서 DOM 요소에 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 스타일을 넣어주어야 합니다. 예시를 통해 스타일링을 알아보겠습니다.

function App() {
  const v_react = "React";
  const style = {
    backgroundColor : 'black',
    color : 'red',
    fontSize : '48px'
  };

  return (
    <>
      <h1 style={style}>{v_react} Test</h1>
    </> 
  );
}

위 코드와 같은 경우 아래와 같은 화면을 띄우게 됩니다 이처럼 JSX에서는 객체  형태로 스타일에 대한 지정이 가능하게 됩니다.

또한 일반 css 파일에 있는 클래스 파일을 사용하기 위해서는 dom 요소에 className으로 설정해서 사용해야 합니다.

.react-Test{
  background-color: yellow;
  color : orange;
  font-size : 48px;
}

이러한 css 클래스를 반영하기 위해선 위 코드를 아래와 같이 변환해야합니다

function App() {
  const v_react = "React";
  return (
    <>
      <h1 className="react-Test">{v_react} Test</h1>
    </> 
  );
}

위와 같은 코드는 이런 결과를 웹으로 띄우게 됩니다.

주석

  주석을 사용하기 위해서는 자바스크립트 표현식 {} 안에 // /* */  주석 기호를 삽입해주어야 합니다

function App() {
  const v_react = "React";
  return (
    <>
      {/*주석입니다*/}
      <h1 className="react-Test">{v_react} Test</h1>
      /*이렇게 하면 주석 안됨*/ 
    </> 
  );
}