[형을 위한 리액트] 2. JSX

 

형을 위해서 썼지만 정작 형은 안 보는 형을 위한 리액트

1. JSX의 원리

JavaScriptXML로 자바스크립트를 HTML 처럼 작성할 수 있게 해주는 문법임. 자바스크립트의 확장 문법.

Bebel과 같은 트랜스파일러가 리액트가 실행될 때 JSX문법을 React.createElement() 함수를 실행시켜 변환시켜줌.

코드 예를 보면,

아래와 같이 하나의 컴포넌트가 jsx를 반환하는 코드를 작성하면,

return (
  <div className="my-class">
    <h1>Hello, world!</h1>
    <p>This is a paragraph.</p>
  </div>
);

바벨이 아래와 같이 코드를 변환시켜줌. createElement를 실행하면 가상돔을 구성하는 구성요소.

import { jsx as _jsx } from 'react/jsx-runtime';

_jsx(
  'div',
  { className: 'my-class' },
  React.createElement('h1', null, 'Hello, world!'),
  React.createElement('p', null, 'This is a paragraph.')
);

내부적으로는 이런식으로 Element를 만듬.

function _jsx(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children.map((child) =>
        typeof child === 'object' ? child : document.createTextElement(child)
      ),
    },
  };
}

2. JSX 사용법

JSX도 결국 자바스크립트 객체로 변환되기 때문에 몇 가지 특징이 있음. camelCase 규칙을 따름.

2-0 JSX의 값 표현

JSX는 {} 중괄호를 사용해 값으로 렌더링 시킬 수 있음. 예를 들어 아래처럼 코드가 작성돼 있으면. name의 해당 값으로 변화시켜 렌더링 시킴

function Component(){
	const name = "이름";
	
	return <div>{name}</div>
}

php는 이런 느낌

<?php
function renderComponent() {
    $name = "이름";
    
    // HTML 출력
    echo "<div>$name</div>";
}

// 페이지 렌더링 시 컴포넌트 호출
renderComponent();
?>

또한 JSX{}를 사용해 함수를 실행시켜 반환된 값을 사용가능함.

function Component(){
	const name = "이름";
	
	return <div>{getName(name)}</div>
}

function getName(name){
	return name
}

JSX의 {} 중괄호 안에서는 자바스크립트의 대부분의 코드를 사용가능함. 하지만 if, while문은 사용이 불가능. 내부에서 조건을 걸고 싶으면 삼항연산자나, ||, && 연산자를 사용하면됨.

기본적인 삼항 연산자

조건이 실패인 경우

const name = '';
return <div>{name ? '기본이름' : name}</div> 

// 결과: <div>기본이름</div> 

조건이 성공인 경우

const name = '이름';
return <div>{name ? '기본이름' : name}</div> 

// 결과: <div>이름</div> 

(꼭 알아야되는 건 아니지만 알고 있으면 편함.)

 

|| 연산자

기본적으로 OR(||) 연산은 둘중 하나 값이 truthy 값이면 true를 반환함. 하지만 자바스크립트에서는 첫 번째 피연산자가 truthy 값이면 해당 값을 반환하고 첫 번째 피연산자가 falsy 값이면 두 번째 피연산자를 반환함. 만약 둘 다 falsy 값이여도 마지막 피연산자를 반환함.

중요한 것은 자바스크립트에서 논리 연산 문법을 사용할 때, 반횐되는 값은 해당 피연산자의 값임.

const name = '';
return <div>{name || '기본이름'}</div>

// 결과: <div>기본이름</div> 

const name = '이름';
return <div>{name || '기본이름'}</div>

// 결과: <div>이름</div> 

 

&& 연산자

OR(||) 연산자의 반대 첫 번째 피연산자가 truthy 값이여야 두 번째 피연산자를 반환해줌. 만약 첫 번째 피연산자가 falsy 값이면 해당 값을 반환.

// 첫 번째 피연산자가 falsy 값일 때

const name = '';
return <div>{name && '기본이름'}</div>

// 결과: <div></div> 
---------------------------
// 두 번째 피연산자가 truthy 값일 때
const name = '이름';
return <div>{name && '기본이름'}</div>

// 결과: <div>이름</div> 

2-1 JSX는 camelCass

하지만 JSX에서는 onClick처럼 camelCase로 작성하게됨

예를 들어 기존 html에서 태그를 작성할 때 onclick로 작성함

<button onclick="function()">Add Task</button>

하지만 JSX에서는 onClick처럼 camelCase로 작성하게됨

<button onClick=function (){}>Add Task</button>

2-2 JSX는 className

또 하나는 class 속성을 지정해줄 때 className으로 지정해줄 수 있음. 아래 코드는 HTML 방식 class지정

<button class="container__button">Add Task</button>

JSX는 className으로 지정함. 이러한 이유는 자바스크립트에서 class는 키워드이기 때문에 이를방지하기 위해 사용. 다시한번 말하지만 JSX는 결국 자바스크립트 객체로 변환되기 때문.

<button className="container__button">Add Task</button>

2-2 JSX의 Inline-Css

기존 inline-css작성 방법은 아래처럼 사용

<button style="color: black;">Add Task</button>

JSX는 객체형식으로 해줘야함.

<button className={{color:"black", backgroundColor:"red"}}>Add Task</button>

2-4 JSX 닫는 태그가 없는 컴포넌트나, 태그들

JSX를 사용할 때 닫는 태그들이 없으면 닫아줘야함

const element = <img src={user.avatarUrl} />; // /> 이렇게 닫음

3. 기타 특징

JSX는 XSS 공격을 방지해줌. 만약 데이터에 스크립트 코드를 심어놔도 알아서 이스케이프 처리를 해줌.

const 서버에서_받아온_데이터 ="<p>Hello, <script>alert('XSS Attack!');</script></p>";

return <h1>{서버에서_받아온_데이터}</h1>; 
// 스크립트가 실행 안 됨.
// 결과: <h1><p>Hello, <script>alert('XSS Attack!');</script></p></h1>