[React] JSX란?

개요

JSX가 등장하기 전에 React에서 UI를 정의하는 방법은 다음과 같았다고 한다.

const element = React.createElement('h1', null, 'React');

 

위의 방식이 복잡한 UI를 구성할 때 가독성이 떨어지고 유지보수가 어렵다고 한다.

 

const element = <h1> JSX </h1>;

 

JSX로 표현하면 요런느낌

 

가독성 면에서도 좋고, 일단 작성할 때 편할 것 같다. 그래서 정리하는 JSX 알아보기!

 

1. JSX란?

JSX는JavaScript를 확장한 문법으로, JavaScript 코드 내에서 HTML과 유사한 구조를 유지하면서 동적으로 UI를 정의할 수 있도록 도와준다.

 

필수는 아니지만 자주 사용한다고 한다.

 

1-1. JSX 장점

1) 가독성 향상

-> HTML과 유사한 문법을 사용하기 때문에, UI를 구성할 때보다 직관적으로 작성할 수 있다.

 

2) 컴포넌트 기반 개발 용이

-> React에서는 컴포넌트라는 것을 활용해 UI를 구성하는데, JSX를 사용해 컴포넌트 구조를 더욱 명확하게 표현할 수 있다.

 

3) JavaScript와의 연동

-> JSX는 JavaScript 표현식을 사용할 수 있어 동적인 값을 직접 삽입할 수 있다.

 

4) 보안성 강화

-> XSS 공격을 방지하기 위해 기본적으로 JSX 내에서 사용자가 입력한 값이 HTML 코드로 실행되는 것을 방지한다.

 

 

2. JSX 문법

2-1. 기본

-> XML과 유사한 문법을 사용하며, 태그를 사용해 요소를 정의할 수 있다.

const element = <h1> Hi, JSX!</h1>;

 

-> 단, 반드시 부모 요소 하나로 감싸는 형태여야 한다.

const element = <h1> 에러 </h1> <h1> 발생 </h1> ;

const element  = <div> <div> 얘는 </div> <div> 통과</div> </div>

2-2. JavaScript 표현식 사용

-> JSX 내부에서 {} 를 사용해 JavaScript 표현식을 넣을 수 있다. 

const name = "React";
const element = <h1> hi {name} </h1>;

 

-> 위 코드에서 {name} 부분이 JavaScript 표현식이다.

 

2-3. JSX에서 스타일 적용

인라인 스타일

const element = <h1 style={{ color: "blue", fontSize: "20px"}}> 파란색에 20! </h1>

 

CSS  클래스 적용

const element = <h1 className="title"> CSS 스타일 적용 link 태그겠지? </h1>

 

2-4. JSX 조건부 렌더링

-> JSX는 조건부 렌더링 할 때 삼항 연산자를 주로 사용한다.

const isLoggedIn = true;
const element = isLoggedIn ? <h1> 어서오세요! </h1> : <h1> 로그인해주세요 </h1>;

 

-> && 연산자도 가능하다. 단, 조건에 맞지 않을 경우 아무것도 표시하지 않는다.

const messages = ['안녕', 'JSX'];
const element = messages.length > 0 && <h1>나온다</h1>;

 

2-5. JSX에서의 리스트 렌더링

-> JSX에서는 배열을 이용해 여러 개의 요소를 렌더링 할 수 있다.

const items = ['Apple', 'Banana', 'Cherry'];
const listItems = items.map(item => <li key={item}>{item}</li>);

const element = <ul>{listItems}</ul>;

 

-> 위의 코드에서는 map 함수를 사용해 배열의 요소를 JSX 리스트로 변환하고 있다.

 

2-6. JSX 이벤트 핸들링

function handleClick() {
    alert('버튼 누름');
}

const element = <button onClick={handleClick}> 버튼 </button>;

 

-> JSX에서 이벤트 처리 시 onClick, onChange 등의 이벤트 핸들러를 사용할 수 있다.

-> 이때도 동일하게 {} 안에 함수를 전달하면 된다.

 

 

3. JSX 변환 과정

-> JSX는 브라우저에서 바로 실행할 수 없고, Babel 같은 트랜스파일러라는 것을 통해 순수 JavaScript 코드로 변환된다.

const element = <h1> 안녕, JSX </h1>

 

-> 위의 코드가 아래와 같은 JavaScript 코드로 변환된다.

const element = React.createElement('h1', null, '안녕, JSX');