1.JSX

(React 공식문서의 main concepts 번역 글입니다.)

함께보면 이해가 쏙쏙
https://youtu.be/-LtBRRnHvJ0

JSX는 React element를 나타내는 javascript의 확장된 문법이다.
React element란? DOM에 Render 될 객체이다.

왜 JSX를 사용할까?

React는 렌더링 로직이 UI 로직과 본질적으로 결합되어 있다는 사실을
고려하여 만들어진 라이브러리다.
(이벤트가 다뤄지는 방법, state가 바뀌거나 data가 display되는 과정
이러한 상황을 통해 렌더링 로직과 UI 로직이 결합되어 있음을 알 수 있다.)

markup language와 logic을 다른 파일로 분리해 작성하는 것을 통해
인위적으로 분리하는 대신
React는 렌더링 로직 + UI 로직을 통합 수행하는 Component를 만든다.
(Component는 React element을 return하는 function
React element는 Dom에 render될 객체)

JSX는 이 React elemet를 표현하는 Markup Language의 일종

JSX를 사용하면 UI 로직을 시각적으로 이해하기 쉽게 표현할 수 있다.
-> HTML tag와 모양 비슷

React로 프로그래밍하기 위해 반드시 JSX를 사용해야 하는 것은 아니다.
-> React.createElement()를 통해 객체(element) 생성 가능

하지만 JSX를 사용하여 객체(element)를 만든다면
훨씬 이해하기 쉽고 빠르게 React 프로그래밍이 가능해진다.

JSX에 javascript 구문 삽입하기

javascript의 모든 구문은 {}을 사용해서 JSX에 삽입할 수 있다.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

element라는 변수에 할당한 JSX안에서 name변수를 삽입했다.
변수 외에도 함수, 객체 속성등 모든 javascript표현이 삽입 가능하다.

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가 Babel에 의해 compile 되면
react element(객체)를 만드는 함수이다.

따라서 JSX는 함수, 즉 javascript 표현식이므로
반복문, 조건문 등에서 활용 가능하다(변수에 할당도 가능)

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;  }
  return <h1>Hello, Stranger.</h1>;
}

JSX의 attribute 값 정하기

아래와 같이 tabIndex라는 attribute의 값을 string 0으로 줄 수 있다.

const element = <div tabIndex="0"></div>;

{}를 사용하여 attribute에 javascript expression을 넣을 수도 있다.

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

JSX는 HTML보다 javascript에 가깝기 때문에 attribute의 변수명으로 camel case를 사용한다.

JSX의 children 값 정하기

만약 tag의 children이 없다면 />를 활용해서 바로 닫을 수 있다.

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

또한 JSX는 아래처럼 children을 가질 수도 있다.(<h1>, <h2>)

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

JSX는 Injection Attacks로부터 안전하다

아래와 같이 사용자 input을 JSX안에 넣는 것도 안전하다.

const title = response.potentiallyMaliciousInput;
//This is safe
const element = <h1>{title}</h1>;

React DOM은 렌더링하기 전에 JSX안에 넣은 모든 값을 escape 한다.
모든 것은 렌더링되기 전에 string으로 변한다.
그 결과, XSS 공격을 방지 할 수 있다.
(xss 공격이란 악성 사용자가 javascript의 구문을 입력하여
실행되게 만드는 공격으로 자세한 내용은 아래 링크를 참조한다.
https://brownbears.tistory.com/250)

JSX represents object

JSX는 object(React element)를 나타낸다.

const element = (
  <h1 className="greeting">
    Hello, React!
  </h1>
)

위와 같은 JSX 코드를, Babel이 컴파일하면 아래 코드가 실행된다.
(Babel이란 javascript 컴파일러로, javscript의 버젼을 바꾸거나
확장된 문법을 javascript로 바꿔주는 역할을 한다.
자세한 내용 링크 https://steemit.com/javascript/@noreco/babel)

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

Babel은 JSX를 컴파일하기 위해
위 코드처럼 React.createElement()를 실행하고
이때 arguments로는

HTML tag의 이름
classname등이 포함된 object
children

이 들어간다.

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

Babel이 컴파일한 결과 위 object가 생성된다.
즉, React.createElement()가 실행된 결과로
element라는 변수에 위 object가 assign된다.
이 object가 바로 React element이다.

React element = JSX가 나타내는 것 = React.createElement()의 return값

React element의 구성은 아래와 같다.

type의 value값인 HTML tag 이름
props의 value값인 className과 children(또한 추가적인 data)

다음 블로깅에서는 React element를 DOM에 렌더링하는 방법을 살펴보자

Written by@[david hwang]

깊게 이해하고 넓게 소통합니다.

GitHub Medium