[React] 리액트 JSX

※ 본 포스팅은 윈도우11 환경에서 패스트 캠퍼스,인프 강의를 수강하며 정리한 내용입니다.

---

 

목차

 

JSX란?

JSX 역할

JSX사용 시 장점

JSX 사용 규칙

JSX 안에 자바스크립트 값 사용하기

style과 className을 설정하는 방법

JSX에서의 주석

 

---

JSX

---

[JSX란?]

JSX(Syntax Extension to Javascript) : 리액트에서 생김새를 정의할 때 사용하는 문법이다.

JSX는 리액트를 사용하여 개발할 때 거의 필수적으로 사용해야 한다.

자바스크립트의 확장 문법이라는 의미를 가지고 있다.

 

 

자바스크립트와 XML.HTML을 합친 것이라고 생각하면 이해하기 쉽다.

얼핏 보면 HTML 같지만 실제로는 자바스크립트다.

 

const element = <h1> Hello, World! </h1>

 

위 코드는 대입 연산자 equal이 나온다.

대입 연산자는 오른쪽에 있는 값을 왼쪽에 있는 변수에 대입해 준다.

const element = 는 흔히 알고 있는 자바스크립트 문법이다.

하지만 <h1> Hello, World! </h1>이라는 html코드를 변수 element에 저장하는 방법은 JSX를 모르는 상태에서 보면 이상한 코드이다.

 

---

[JSX 역할]

JSX는 내부적으로 XML, HTML 코드를 자바스크립트로 변환하는 과정을 거치게 된다.

그렇기 때문에 실제로 JSX로 코드를 작성해도 최종적으로는 자바스크립트 코드가 나오게 된다.

어떻게 자바스크립트가 되는가?

바벨이라는 도구를 사용하여 XML형태의 코드가 자바스크립트 코드로 변형이 된다.

바벨 (babel) : 자바스크립트의 문법을 확장해 주는 도구

아직 지원되지 않는 최신 문법이나 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해 줌으로써 구형 브라우저 같은 환경에서도 제대로 실행할 수 있게 해주는 역할을 한다.

JSX가 자바스크립트로 제대로 변환이 되려면 지켜주어야 하는 몇 가지 규칙이 있다.

규칙을 지킨다면 리액트 컴포넌트를 개발할 때 큰 어려움이 없다.

 

---

 

여기서 JSX코드를 자바스크립트 코드로 변환하는 역할을 하는 것이 바로 리액트의 createElement라는 함수이다.

// JSX를 사용한 코드 //
class Hello extends React.Component{
    render(){
        return <div>Hello {this.props.toWhat}</div>;
    }
}

ReactDOM.render(
    <Hello toWhat="World"/>
    document.getElementById('root')
);

Hello라는 이름을 가진 React 컴포넌트가 나오고 컴포넌트 내부에서 Javascript 코드와 HTML 코드가 결합된 JSX를 사용하고 있다.

이렇게 만들어진 컴포넌트를 ReactDOM의 렌더함수를 사용해 실제 화면에 렌더링 하고 있다.

---

 

// JSX를 사용하지 않은 코드 //

class Hello extends React.Component{
    render(){
        return React.createElement('div',null,`Hello ${this.props.toWhat}`);
    }
}

ReactDOM.render(
    React.createElement(Hello,{toWhat:'World'},null),
    document.getElementById('root')
);

자바스크립트로만 사용하여 작성한 코드로 JSX로 작성한 코드와 비슷하게 생겼다.

Hello 컴포넌트 내부에서 JSX를 사용했던 부분이 React.createElement라는 함수로 대체된 것을 알 수 있다.

결국 JSX문법을 사용하면 리액트에서 내부적으로 모두 createElement라는 함수를 사용하도록 변환하게 된다.

최종적으로는 이 createElement 함수를 호출한 결과로 자바스크립트 객체가 나오게 된다.

JSX를 사용한 코드도 내부적으로는 createElement 함수를 사용하도록 변환된다.

 

// JSX를 사용한 코드
const element = (
    <h1 className="light">
        Hello, world!
    </h1>
)
// JSX를 사용하지 않은 코드
const element = React.createElement(
    'h1'
    {className:'light'},
    'Hello, world!'
)

 

이 createElement 함수 호출의 결과로 이 코드와 같은 자바스크립트 객체가 나오게 된다.

리액트는 이 객체들을 읽어서 DOM을 만드는 데 사용하고 항상 최신 상태로 유지한다.

리액트에서는 이 객체를 element라고 부른다.

// React.createElement()의 결과로 다음과 같은 결과의 객체가 생성된다.
const element ={
    type:'h1',
    props:{
        className:'light',
        children:'Hello, world!'
    }
}

 

---

<createElement 함수의 파라미터>

React.createElement(
	type,
    [props],
    [...children]
)

• type : element의 유형, 타입을 나타낸다.
  • 유형으로 div나 span 같은 HTML 태그가 올 수 있고 다른 리액트 컴포넌트가 들어갈 수 있다.
• props : 속성이 들어간다.
• children : 현재 엘리먼트가 포함하고 있는 자식 엘리먼트

 

리액트는 이렇게 JSX 코드를 모두 createElement 함수를 사용하는 코드로 변환한다.

그렇기 때문에 리액트에서 JSX를 사용하는 것이 필수는 아니다.

왜냐하면 직접 모든 코드를 createElement 함수를 사용해서 개발하면 되기 때문이다.

하지만 JSX를 사용했을 때 코드가 더욱 간결해지고 생산성과 가독성이 올라가기 때문에 사용하는 것을 권장한다.

 

---

[JSX사용 시 장점]

1. 코드가 간결해진다.
2. 가독성이 향상된다.
3. Injection Attacks 방어

 

<1. 코드가 간결해진다.>

type, props, children이라는 createElement의 파라미터들을 사용하는 것을 볼 수 있다.

// JSX 사용함
<div>Hello, {name}</div>

// JSX 사용 안함
React.createElement('div',null,`Hello, ${name}`);

 

<2. 가독성이 향상된다.>

유지보수 관점에서 매우 중요한 부분이다.

가독성이 높을수록 코드상에 존재하는 버그 또한 쉽게 발견할 수 있기 때문이다.

 

<3. Injection Attacks 방어>

Injection Attacks : 입력창에 문자나 숫자 같은 일반적인 값이 아닌 소스코드를 입력하여 해당 코드가 실행되도록 만드는 방법이다.

Injection Attack이라 불리는 해킹 방법을 방어함으로써 보완성이 올라간다.

const title = response.potentiallyMaliciousInput;

// 이 코드는 안전합니다.
const element = <h1>{title}</h1>

title이라는 변수에 잠재적으로 보안 위험 가능성이 있는 코드가 삽입되었다.

JSX 코드에서는 괄호를 사용해서 title 변수를 삽입, 인베딩하고 있다.

기본적으로 리액트 DOM은 렌더링 하기 전에 인베딩 된 값을 모두 문자열로 변환한다.

그렇기 때문에 명시적으로 선언되지 않은 값을 { } 사이에 들어갈 수 없다.

이것을 결과적으로 크로스 사이트 스크립팅(Cross-site scripting: XSS)을 방어할 수 있다.

이처럼 JSX를 사용하면 잠재적인 보안 위협을 줄일 수 있다는 장점이 있다.

 

 

---

[JSX 사용 규칙]

JSX는 자바스크립트 문법을 확장시킨것이기 때문에 모든 자바스크립트 문법을 지원한다.

여기에 추가로 XML과 HTML을 섞어서 사용한다.

XML,HTML 코드를 사용하다가 중간에 자바슼릡트 코드를 사용하고싶다면 중괄호를 사용하여 묶어주면된다.

const name = 'developer';
const element = <h1>내 이름은 {name}</h1>;

ReactDOM.render(
    element,
    document.getElementById('root')
);

여기서 {name}은 자바스크립트 변수를 참조하기 위해서 중괄호를 사용했다.

 

만약 태그에 속성값을 넣는다면 다음과 같이 사용 수 있다.

// 큰따옴표 사이에 문자열을 넣거나
const element = <div tabIndex="0"></div>

//중괄호 사이에 자바스크립트 코드를 넣으면 된다.
const element = <img src={user.imgURL}></img>

 

<규칙>

1. 꼭 닫혀야 하는 태그
2. 꼭 감싸져야 하는 태그

 

1. 꼭 닫혀야 하는 태그

태그는 꼭 닫혀있어야 한다. div 태그를 열고 닫혀있지 않다면 에러가 발생한다.

 

HTML에서 <input> 또는 <br> 태그를 사용할 때 닫지 않고 사용하기도 한다.

하지만 리액트에서는 그렇게 할 수 없다.

 

태그를 꼭 닫아주어야 한다.

 

또는 태그와 태그 사이에 내용이 들어가지 않을 때에는, Self Closing 태그라는 것을 사용해야 한다.

Tutorial 컴포넌트를 사용할 때에도 Self Closing 태그를 사용해 주었다.

열리고 바로 닫히는 태그를 말한다.

 

 

2. 꼭 감싸져야 하는 태그

두 개 이상의 태그는 꼭 하나의 태그로 감싸져있어야 한다.

 

이 오류를 해결하기 위해서는 하나의 태그로 감싸주어야 한다.

 

하지만 이렇게 단순히 감싸기 위해 불필요한 div로 감싸는 게 좋지 않을 때가 있다.

스타일 관련 설정이 복잡해지거나 table 관련 태그를 작성할 때에도 내용을 div로 감싸기엔 애매하다.

그럴 땐 리액트의 Fragment라는 것을 사용하면 된다.

Fragment : 태그를 작성할 때 이름 없이 작성을 하게 되면 Fragment가 만들어진다. 브라우저 상에서 따로 별도의 엘리먼트로 나타나지 않는다.

불필요한 div가 없어진다.

 

---

[JSX 안에 자바스크립트 값 사용하기]

 

만약 변수를 보여줘야 할 때는 { }로 감싸서 보여준다.

 

 

---

[style과 className을 설정하는 방법]

HTML에서는 style을 설정할 때 인라인 스타일은 태그에 style 속성을 통해 설정해 주었다.

하지만 리액트에서는 다르다. 리액트에서는 작동하지 않는다.

 

리액트에서는 객체를 만들어야 한다.

이때 background-color처럼 -(대시)로 구분되어 있는 이름은 camelCase형태로 네이밍 해주어야 한다.

 

css class를 적용할 때 일반 HTML에서는 class= "클래스명"으로 설정해 주었다.

하지만 리액트에서는 class= 가 아닌 className= 으로 설정해줘야 한다.

// App.css //
.gray-box{
  background: gray;
  width: 64px;
  height: 64px;
}

 

---

[JSX에서의 주석]

만약 JSX에서 주석을 사용한다면 브라우저 화면에 나타난다.

 

중괄호로 감싸야지 주석이 된다.

 

 

 

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

 

https://react.vlpt.us/basic/04-jsx.html

4. JSX · GitBook