React - JSX

1. JSX란?

JSX는 리액트에서 사용하는 자바스크립트 확장 문법이다. JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨(Babel)을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. 

JSX는 많은 개발자에게 친숙한 구문을 사용하여, 요소(구성요소)의 렌더링 구조를 지정하는 방법을 제공한다.

 

JSX 장점

  - HTML 태그를 사용하기 때문에 보기 쉽다.

  - HTML 태그를 사용하면서 자바스크립트도 {}를 사용해 JSX 안에서 동작하게 할 수 있다. 

 

---

2. JSX - Fragment

react에서 컴포넌트를 나누어 개발을 할 때 불필요하게 div를 감싸고 내부부터 태그를 삽입하다 보면 불필요하게 DOM구조가 복잡해진다고 느낄 때가 있다. 이것을 Fragment를 통해서 불필요한 div 렌더링을 생략할 수 있다.

import React, { Component, Fragment } from 'react';

class Test extends Component {
  render() {
    return (
      <Fragment>
        테스트
      </Fragment>
    );
  }
}
export default Test;

사용법은 간단하다. 상단에 import{fragment}를 추가해주고, return div 형태에서 <Fragment> 태그로 변경해주면 된다.

다시 한번 정리하자면 Fragment는 불필요한 html 노드의 추가 없이 리액트 컴포넌트를 렌더링 할 수 있게 해 준다.

 

---

3. Inline Styling

react의 스타일 작성하는 방법은 2가지 방법이 있다.

• Inline Style CSS - 클래스 또는 컴포넌트형 함수들에서 js object 형식으로 만들어서 직접 태그에 넣는 형식의 스타일 방식
• Import Style CSS - 미리 작성해둔 CSS를 불러와서 (import) 태그에 className으로 작성해 사용하는 스타일 방식

Inline Style CSS은 render() 함수에 직접 작성한다.

 

const testStyle이라고 작성된 style을 직접 리턴하는 태그에 style로 넣어준다.

위 코드는 Style의 양이 많아 변수를 만들어 넣어줬지만 같은 형식으로 아래 사진처럼 태그에 직접 넣어줘도 된다.

 

이 방식이 인라인 스타일 방식이다.

 

Import Style CSS는 import 구문을 통해서 가져와야 한다.

import styles from './App.css';

<div className = {styles.test}></div>

test클래스에는 

.test{

display:inline-block;

width:100px;

height:100px;

border:1px solid black;

position:fixed;

top:50%;

left:50%;

}

이런 식으로 설정해줄 수 있을 것이다.

이렇게만 설정해주면 화면에 렌더링 시 적용되지 않는다. 그 이유는 webpack 설정이 되지 않아서이다.

webpack.config.dev.js에서 css-loader 부분이 있다. 만약 이 부분이 보이지 않는다면 해당 프로젝트에서 npm run eject 명령어를 입력하면 생성된다.

loader: require.resolve('css-loader'),

options: {

importLoaders: 1,

modules:true,

},

이 부분에 modules 옵션을 추가해주면 정상적으로 화면에 렌더링 된다.

위 코드에서는 styles.test로 넣었지만 리액트는 여러 개의 클래스도 넣을 수 있다.

 

<div className={[styles.test,styles.anotherTest].join(' ')}></div>

이런 코드도 가능하지만 classnames라는 lib를 사용하면

import classNames from 'classnames';

<div className={classNames(style.test,style.anotherTest)}></div>

이런 식의 코드도 가능해진다.

이렇게 작성 시 주의해야 할 점은 from classnames를 classnames/bind로 수정해야 한다.

즉,

import React, { Component,Fragment} from 'react';

import classNames from 'classnames/bind';

import PropTypes from 'prop-types';

import styles from './App.css';

 

 

const testTest = classNames.bind(styles);

 

class App extends Component {

  static propTypes = {

    name: PropTypes.string,

  }

  render() {

    const anotherTest = true;

    const testStyle={

        display:"inline-block",

        width:"100px",

        height:"100px",

        boder:"1px solid black",

        background:"orange",

    }

    return (

        <Fragment>

            <div className={st('test',{

                blue:anotherTest

                        })}>

            </div>

        </Fragment>

    );

  }

}

export default App;

이런 식으로 작성해주면 된다.