React - 2: JSX

rkdden12·2021년 5월 13일
0

React

목록 보기
2/12

JSX란?

  • JavaScript를 확장한 문법이다.
  • React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들인다.
  • React는 마크업과 로직을 동시에 포함하는 "컴포넌트"라고 부르는 유닛으로 분리한다.
  • JSX는 React에서 필수적이지 않지만, JavaScript(이하js) 코드에서 UI 관련 작업을 할 때 가독성이 높아진다.
  • React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해준다.
const element = <h1>Hello, world!</h1>;

JSX에 표현식 포함하기

const name = "rkdden";
const element = <h1>안녕하세요, {name}<h1>;
        
ReactDOM.render(
  element,
  document.getElementById('root')
);
  • 위 예시에서는 name이라는 변수 선언후 중괄호로 감싸서 변수를 JSX 안에 사용하였다.
  • JSX의 중괄호 안에는 유효한 모든 js 표현식을 넣을 수 있다.
const formatName = (user) => {
  return user.firstName + ' ' +user.lastName;
}
const user = {
  firstName: 'rkd',
  lastName: 'den',
};

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

ReactDOM.render(
  element,
  document.getElementById('root')
);
  • 위 예시에서는 js 함수 호출의 결과인 formatName을 &lth1>엘리먼트에 포함시켰다&lt/h1>
  • 가독성을 좋게 하기 위해 JSX를 여러 줄로 나눴다.
  • 필수는 아니지만 js의 자동 세미콜론 삽입을 피하기 위해 괄호 "()" 로 묶는 것을 권장한다.

JSX도 표현식이다.

  • 컴파일이 끝나면, JSX 표현식이 정규 js 함수 호출이 되고 js 객체로 인식된다.
  • 이 말은, JSX를 if 구문 및 for문 안에서 사용하고, 변수에 할당하며, 인자로서 받아들이고, 함수로부터 반환할 수 있다는 것을 의미한다.
function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX 속성 정의

  • 속성에 따옴표를 이용해 문자열 리터럴을 정의할 수 있다.
const element = <div tabIndex="0"></div>;
  • 중괄호를 사용하여 속성에 js표현식을 삽입할 수도 있다.
const element = <img src={user.avatarUrl}></img>;
  • 속성에 js표현식을 삽일할 때는 중괄호 주변에 따옴표를 입력하면 안된다. 따옴표 또는 중괄호중 하나만 사용하고, 동일한 속성에 두 가지를 동시에 사용하면 안 된다.
  • JSX는 HTML 보다 js에 더 가깝기 때문에, React DOM은 HTML 속성이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.
    예를 들어, JSX에서 class는 className이 되고 tabindex는 tabIndex가 된다.

JSX로 자식 정의

  • 태그가 비어있다면 XML처럼 />를 이용해 바로 닫아주어야 한다.
const element = <img src={user.avatarUrl}></img>;
// 위 대신 아래를 사용한다.
const element = <img src={user.avatarUrl} />;
  • JSX 태그는 자식을 포함할 수 있다.
const element = (
  <div>
    <h1>안녕하세요!</h1>
    <h2>자식 태그입니다!</h2>
  </div>
);

JSX는 주입 공격을 방지한다.

  • JSX에 사용자 입력을 삽입하는 것은 안전하다.
const title = response.potentiallyMaliciousInput;
// 이것은 안전합니다.
const element = <h1>{title}</h1>;
  • 기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 한다.
    그로 인해, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다.
  • 모든 항목은 렌더링 되기 전에 문자열로 변환한다.
  • 이러한 특성으로 인해 XSS(corss-site-scripting) 공격을 방지할 수 있다.

JSX는 객체를 표현한다.

  • Babel은 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을 구성하며, 최신 상태로 유지하는 데 사용한다.

ES6 및 JSX 코드가 올바르게 표시되도록 편집기에 “Babel” 언어 설정을 사용하는 것을 권장한다.

요약

  • JSX는 필수가 아니다. 하지만 UI관련 코드를 더 쉽게 볼 수 있게한다.
  • JSX안에 표현식을 쓸 수 있으며, JSX 자체도 표현식이다.
  • JSX에서 속성을 쓸 때는 camelCase 방식으로 사용하며, 따옴표와 중괄호중 하나만 써야한다.
  • 태그가 비어있다면 />를 사용해 바로 닫아주어야 하며, JSX 태그는 자식을 포함할 수 있다.
  • JSX에서 사용자한테 입력받은 값을 삽입해도 안전하다.
  • JSX는 객체를 표현한다.
profile
Backend Developer

관심 있을 만한 포스트

0개의 댓글