[ React ] 리액트 JSX 문법 규칙 및 유용한 플러그인

 

 

리액트를 사용할 때 JSX 문법을 사용하는데 이는 HTML과 굉장히 유사하게 생겼다.

 

하지만 HTML 은 분명히 아니며 이를 닮은 JavaScript Xml 임을 명심해야한다.

 

이러한 JSX 문법을 사용하려면 우리는 몇 가지 규칙을 지켜주어야 문제없이 돌아가게 되는데,

​​

그 중 제일 중요한 몇 가지만 살펴보자. 이 두 가지만 지켜주어도 왠만하면 돌아간다.

 

 

 

 

1. 태그는 열었으면 반드시 닫아주어야 한다.

<div></div>

<input type='text' />

<br />

<span />

 

뭔 말인가 하면 우리는 Html 에서 input 태그 같은건 안닫는 경우가 종종 있다.

 

Html 에서는 닫지 않아주어도 잘 돌아가기때문에 문제가 없었겠지만 JSX에서는 안 닫아주면 compile error 가 발생한다.

 

꼭 닫아주도록 하자.

 

 

 

2. 두 개 이상의 태그가 존재하면 하나의 태그로 감싸주어야 한다.

//안 좋은 예
return (
    <div>
        <b> test </b>
    </div>
    <div>
        <b> test2 </b>
    </div>
) 

 

render 함수 안에 만약 위와 같이 두 개 이상의 엘리먼트를 return 한다면 에러가 발생한다.

 

아래와 같이 무조건 하나의 엘리먼트로 감싼 후 return 해주도록 하자.

return (
    <div>
        <div>
            <b> test </b>
        </div>
        <div>
            <b> test2 </b>
        </div>
    </div>
)

 

 

만약 스타일 설정들로 인해 굳이 하나의 <div> 를 추가하는 게 내키지 않다면 Fragment 라는 태그를 사용해 묶어주어도 무방하다.

return (
    <Fragment>
        <div>
            <b> test </b>
        </div>
        <div>
            <b> test2 </b>
        </div>
    </Fragment>
)

 

만약 Fragment 를 찾지못해 compile error 가 발생하면 Fragment 를 import 해주면 된다.

 

또는 < > ~ </> 를 사용해 주어도 된다.

return (
    <>
        <div>
            <b> test </b>
        </div>
        <div>
            <b> test2 </b>
        </div>
    </>
)

 

 

 

 

3. JavaScript 구조의 값은 반드시 { } 로 받아주어야 한다.

render() {
    //render 안에 순수자바스크립트 사용 가능
    const name = "홍길동";
    const age = 20;

    //JSX 문법
    return (
        <div>
            <h2>이름: {name}</h2>
            <p>나이: {age}</p>
        </div>
    );
}

 

render( ){ } 안에서 script 코드를 작성할 수 있는데 위처럼 name, age 를

 

JSX 문법에서 사용하려면 {name}, {age} 와 같은 형태로 받아 사용해야한다.

 

 

 

 

4. 주석 또한 { } 로 받아주어야 한다.

render() {
    //render 안에 순수자바스크립트 사용 가능
    const name = "홍길동";
    const age = 20;

    //JSX 문법
    return (
        <div>
            <h2>이름: {name}</h2>
            <p>나이: {age}</p>
            {/* 주석1 */}
        </div>
    );
}

 

3번 문항에서 { } 로 script 코드는 { } 로 받아야한다고 언급됐다.

 

주석 또한 기존에는 //, /**/ 을 바로 사용했지만 위처럼 { } 로 주석을 받아주어야 한다.

 

그런데 여기서 중요한 것이 return( ) 안의 내용은 html 처럼 생겼지만 html 이 아닌 JSX 문법이다.

 

JSX 문법에서는 4번 문항말고 아래처럼도 주석을 사용이 가능한데,

render() {
    //render 안에 순수자바스크립트 사용 가능
    const name = "홍길동";
    const age = 20;

    //JSX 문법
    return (
        <div>
            <h2>이름: {name}</h2>
            <p
              //주석2
              /*주석3*/
            >나이: {age}</p>
            {/* 주석1 */}
        </div>
    );
}

 

잘 보면 주석2, 주석3이 p태그 안에 명시되어있다. 

 

이게 가능한 이유는 앞서 계속 말했듯 html 이 아니기 때문에 가능한 일이다.

 

우리의 눈에는 저게 html 의 <p> 태그로 보일지언정 실제로는 JavaScript Xml 에 지나지않아

 

단순 텍스트일 뿐이다. 태그내에 있는 문법에선 { } 로 받아야 하지만 저렇게도 가능하다는걸 알고만 넘어가자.

 

 

 

 

 

그리고 필자는 보통 화면단의 코드를 편집할때 Visual Studio Code 를 사용하는데,

 

이 VSC 편집기에 리액트를 사용하며 개발함에 있어 유용한 플러그인 세 가지를 알려주고자 한다.

 

 

Live Server

이는 간단한 로컬 서버를 열 수 있도록 해준다.

 

상당히 자주 이용하는 플러그인이다.

 

 

Eclipse Keymap

이클립스를 주로 사용하는 분들이라면 꼭 이 플러그인을 설치하길 바란다.

 

이클립스에서 사용하던 단축키들을 VSC 편집기에서도 동일하게 사용할 수 있도록 해준다.

 

 

Reactjs Code Snippets

리액트 컴포넌트를 새로 만들때마다 간단하게 기본 양식을 작성하게 도와준다.

 

예를 들어 Test.js 를 생성하고 아래와 같이 rcc 를 입력하면,

 

reactClassComponent 가 뜨고 이걸 눌리면 아래처럼 양식이 바로 갖춰지게 된다.

 

이 외에도 여러 기능이 있으니 사용하는걸 추천 드린다.