[React-Basic-Hooks] 3. JSX(React Element) 이해

[beecomci]

JSX(React Element) 이해

• React element로 어떻게 변환되는지 확인 가능 #playground
• jsx는 React Element(html 형태를 한 js 객체)

const hello = <h1 className='greeting'>Hello World!</h1>;
var hello = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello World!'
);

태그 규칙

• 기본 html 태그는 소문자로 시작
• 사용자 정의 React Component는 대문자로 시작
• html과 달리 모든 태그는 children을 가지지 않는다면 self-closing 가능 (html 태그는 img, br 등 정해진 태그만 self-closing 가능)
• 자식 태그 가질 수 있음
• 태그명에 dot notation 사용 가능 (객체기 때문에 객체처럼 사용 가능)

표현식 사용

• js 표현식에 들어가야 하는 부분에 {} 넣고 사용 가능 (모양은 선언형이어서 html 비슷하게 작성되어 있지만 js처럼 사용 가능)
• js 표현식 자유롭게 사용 가능 (함수 호출식, 삼항 연산, 문자열, 배열 etc)
• js 변수에 담을 수 있으면 js 표현식으로 사용 가능 (for, while 등처럼 변수에 담을 수 없으면 X)

attribute

• key={value} 형태로 전달 (value는 표현식이어서 {}로 전달 가능, 단 value가 string이면 '' or "" 사용 가능, classname 경우)
• if, for, while 등의 제어는 jsx 밖에서 사용해야함
• XSS(cross-site-scripting) 기본으로 대응됨 (script를 innerHTML로 넣으면 script로 동작하는게 아니라 html 인코딩해서 동작)
• 실제 html DOM과 다른 attribute (기본으로 들어가는 key값이 변환됨) #
  • [<input>]checked: 동적 할당, 초기값 - propsName : defaultChecked
  • [<input>, <textarea>]value: 동적 할당, 초기값 - propsName : defaultValue
  • innerHTML => dangerouslySetInnerHTML (이름 그대로 사용하고 싶으면 이렇게. 사용 지양) #
  • class => className
  • for => htmlFor
  • style (기존 html은 string으로 넣지만, 여기선 객체로 전달) #

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

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

const element = (
  <h1>
    Hello, {formatName(user)}! // js 사용하는 곳은 {} 사용
  </h1>
);

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

주의 사항

• React 17 이전 버전 사용시, JSX 코드 scope 안에 React 선언 필요 #New JSX Trasform
  • 17 버전부터는 React에 scope로 넣지 않아도 컴파일러가 자동으로 React를 Import해서 넣어줌 -> 번들 사이즈 줄어드는 장점
• 실제 DOM은 아니다.(Virtual DOM)
  • DOM이 아닌 JS 객체
  • JS 객체니까 JS가 실행되는 환경인 Node.js에서도 이것저것 활용 가능 -> SSR
• Single parent 02-jsx/fragment
  • JSX 표현식은 반드시 1개의 부모 element를 가져야함
  • 의미 없는 div로 감싸는 고전적인 방식 -> 의미 없는 태그가 사용된다는 단점
  • React에서 Fragment 제공. <Fragment>...</Fragment> 대신 축약어로 <>...</> 로 대체 가능

    // React가 보기에는 <b>짝수</b>와 string 입니다.도 하나의 객체여서 Fragment로 감싸야함
    const app = (
    <>
    <div>안녕</div>
    {true && (
    <>
      <b>짝수</b>
      입니다.
    </>
    )}
    </>
    );

• white space 02-jsx/whitespace

  • 표현식으로 넣은 string을 제외하고는 React element 렌더링시 모두 공백은 trim해줌 (실제로 HTML에서 그려줄 때랑 또 다를 수 있으니 확인 필요)

    
    <div>Hello World</div>

  Hello World
  Hello World
  Hello World
  {' Hello World! '} {'test'}

  export default () => ( <> {whiteSpaceTest.map((element, i) =>

  {ReactDOMServer.renderToStaticMarkup(element)}

  )} </> )

• conditional jsx 02-jsx/conditional

  const elements = {
  hello: <h1>Hello!</h1>,
  bye: <h1>Good Bye!</h1>,
  };
  
  function getElementByType(type) {
  return elements[type];
  }
  
  export default () => getElementByType('hello');
  
  // 태그를 변수에 담고, 그 변수를 태그로 사용
  const AOrDiv = true ? 'a' : 'div';
  export default () => <AOrDiv>안녕?</AOrDiv>; // <a>안녕?</a>
  
  // 조건 분기 처리
  function EvenOdd({ number }) {
  const isEven = number % 2 === 0;
  
  return (
    <div>
      {isEven ? even : odd}
    </div>
  );
  }
  
  export default () => <EvenOdd number={4} />;

[beecomci]

props.children

opening & closing 태그를 가진 JSX 표현식에서 props.children 이라는 특별한 props를 가짐 props.children은 일반적으로 태그 자체가 아닌 JSX 표현식의 하위 태그에 의해 정의됨 opening & closing 태그 사이에 오로지 문자열만 존재한다면 props.children은 그저 문자열 #Children in JSX

<MyComponent>Hello World</MyComponent>

[beecomci]

XSS (corss-site-scripting)

• XSS 공격은 관리자가 아닌 사용자가 웹 어플리케이션에 악성 스크립트를 삽입해 다른 사용자의 정보 등을 탈취하는 공격
• 기본적으로 React에서 {}를 사용해서 데이터를 바인딩하면, XSS 공격으로부터 방어하기 위해 자동으로 값이 escape 됨 #JSX Prevents Injection Attacks
• 모든 항목은 렌더링 되기 전에 문자열로 변환되는 특성으로 XSS 공격 방지 가능

<p>{'<script>alert(1);</script>'}</p>

// HTML attributes 렌더링시에는 XSS Protection X
<form action={data}> ... 

dangerouslySetInnerHTML

• React 내에서 HTML을 사용자 입력으로 받기 위해서 사용 (innerHTML 을 사용하기 위한 React 대체 방법)
• 이름에서 보이듯 HTML을 그대로 입력받는 것은 위험. 추가적인 기능을 통해 입력 받은 문자열 내에 스크립트가 포함되어 있지 않은지 확인 필요
• 사용시 __html 키로 객체 전달

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}