리액트 주요개념 - JSX

리액트 홈페이지의 문서를 이용해 공부한 내용입니다.

https://ko.reactjs.org/docs/getting-started.html

시작하기 – React

 

실습을 하기 전 리액트를 설치해야합니다.

설치방법은 따로 포스팅하지 않고 제가 참고한 블로그 링크를 공유하겠습니다!

https://leirbag.tistory.com/105

React 설치 방법

git 연동은 다음 블로그를 참고했습니다.

https://earth-95.tistory.com/87

[Git] Visual Studio Code에 git 연동하기

 

 

JSX 란?

JSX는 자바스크립트의 확장 문법입니다.

브라우저에서 실행되기 전에 바벨을 사용해 일반 자바스크립트 형태로 변환됩니다.

바벨: 최신 문법을 이전 세대 문법으로 호환시켜 여러 브라우저에서 작동될 수 있도록 합니다.

 

JSX에 표현식 포함하기

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

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

위 예시에서 name이라는 변수를 선언한 후 중괄호로 감싸 JSX안에서 사용하였습니다.

function formatName(user){
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'harper',
  lastName: 'Perez'
};

const element = (
  <h1>Hello, {formatName(user)}</h1>
)

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

위의 예시는 첫번째 예시 코드와 다른 방식이지만 동일한 결과를 나타냅니다. 따라서 JSX의 중괄호 안에는 모든 JavaScript 표현식을 사용할 수 있다는 것을 알 수 있습니다.

 

JSX도 표현식이다.

컴파일이 끝나면 JSX 표현식이 정규 JavaScript 함수로 호출되고 JavaScript 객체로 인식됩니다. 따라서 JSX를 if 구문 및 for loop 안에 사용하고 변수에 할당하고 인자로 받아들이고 함수로부터 반환할 수 있습니다.

function formatName(user){
  if (user){
    return user.firstName + ' ' + user.lastName;
  }
  return <h1>Hello, Stranger.</h1>;
}

 

JSX 속성 정의

속성에 따옴표를 이용해 문자열 리터럴을 정의할 수 있고, 중괄호를 사용해 JavaScript 표현식을 삽입할 수도 있습니다.

const element = <div tabIndex="0"></div>; //속성에 문자열 삽입

const element = <img src={user.avatarUrl}></img>; //속성에 JavaScript 표현식 삽입

 

JSX로 자식 정의

태그가 비어있다면 XML과 동일하게 />를 이용해 바로 닫을 수 있습니다.

const element <img src={user.avatarUrl} />;

또한, JSX 태그는 자식을 포함할 수 있습니다.

const element = (
	<div>
    	<h1>Hello!</h1>
        <h2>Good to see you here.</h2>
	</div>
);

가독성을 위해 코드를 여러 줄로 나눠 작성하였고 이때 코드는 괄호로 묶어야합니다.

 

JSX는 주입 공격을 방지합니다.

React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로 애플리케이션에서 명시적으로 작성된 않은 내용은 주입되지 않습니다.

이스케이프: 특정 문자를 HTML로 변환하는 행위 (예: &nbsp를 띄어쓰기로 변환)

모든 항목은 렌더링되기 전에 문자열로 변환되기 때문에 XSS공격을 방지할 수 있습니다.

XSS(Cross Site Scripting): 웹사이트 관리자가 아닌 이가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점

 

 

JSX는 객체를 표현합니다.

바벨은 JSX를 React.createElement() 호출로 컴파일하기 때문에 밑의 두 예시는 동일한 결과를 나타냅니다..

const element = (
  <h1 className='greeting'>
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement()는 버그가 없는 코드를 작성하는 데 도움이 되도록 몇 가지 검사를 수행하며, 기본적으로 다음과 같은 객체를 생성합니다.

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

위와 같은 객체를 React Element라고 하며, 화면에서 보고 싶은 것을 나타내는 표현이라고 생각하면 됩니다. React는 이 객체를 읽어서 DOM을 구성하고 최신 상태로 유지하는 데 사용합니다.