1-3장 리액트 스터디 준비

sykim·2020년 5월 16일

회사내부 리액트 스터디

목록 보기

1/3

1. Hello World

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

가장 기초적인 리액트의 생김새입니다.
ReactDOM에서 제공하는 render 함수로 h1 태그를 root 값을 id로 갖는 태그에 뿌려주는 것으로 이해됩니다.

2. JSX(Javascript XML) 소개

JSX는 Javascript XML이라고 합니다.
(*XML : extensible Markup Language, 확장될 수 있는 표시 언어로 익숙하게 알고 있는 html과 비슷하면서 다르다(?) html이 약속된 태그들로 이루어져있다면 xml은 사용자 임의로 태그를 만들 수 있다고 한다. xml에 대한 개념 정리 페이지가 아니니 여기까지만 정리해두자)

쉽게 기억하자면 javascript의 확장 문법으로 js 안에 html을 사용할 수 있습니다.
js 안에 html을 사용할 수 있다는 건 개발자에게 어떤 의미일까?

jsx 문법의 장점? 얻을 수 있는 건?

자바스크립트 내부에 마크업 코드를 작성할 수 있다.
마크업 코드 안에 변수나 함수를 사용할 수 있다.
주입 공격을 방지한다. (관련된 세부 내용 하단에 기재)

다시 처음 예제 코드로 돌아가서 마크업 코드 안에 변수를 사용할 수 있다는 의미를 코드 예시로 보자면

const element = 'Hello, world!'

ReactDOM.render(
  <h1>{element}</h1>,
  document.getElementById('root')
);

위와 같이 텍스트 값을 갖는 변수 element를 jsx 안에 변수로 사용할 수 있습니다.

JSX를 쓰지 않았을 때는?

jsx 문법을 브라우저 콘솔창에 적어보면 에러가 납니다.
원형의 jsx 코드를 브라우저가 읽지 못하기에 바벨이라는 컴파일러를 이용해 브라우저가 읽을 수 있도록 변형 작업이 필요합니다.

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

이렇게 생긴 문법은 바벨을 통해

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

이렇게 바뀝니다. 기존의 jsx 문법이 훨씬 가독성이 높은 것을 알 수 있습니다. :)
바벨을 통해 바뀐 예시 코드를 보면 React.createElement() 이 부분이 보이는데 리액트 문서에 적힌 바와 같이

JSX는 React “엘리먼트(element)” 를 생성한다는 것을 알 수 있습니다.

React.createElement(component, props, ...children)를 사용하면 jsx를 사용하지 않고도 React를 사용할 수 있으며, React.createElement()는 아래와 같은 객체를 생성합니다.

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

바로 이것이 화면을 표시하는 가장 기본에 해당하는 단위인 React 엘리먼트입니다.
리액트는 이러한 객체들(엘리먼트들)을 읽은 후 돔을 구성합니다.

jsx 표현식 포함하기

위 코드 예시를 보면 변수를 jsx 내부에 사용할 때 특정한 표현식이 존재합니다.
{ } <- 중괄호
jsx는 바로 이 중괄호를 이용해서 변수, 함수 등 여러 표현식을 jsx에 사용할 수 있습니다.

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

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

const element = <h1> Hello, {formatName(user)}! </h1> 
// 중괄호 안에서 formatName() 함수를 호출했습니다.

ReactDOM.render(
  element, // element 변수에 해당합니다.
  document.getElementById('root')
);

const element = <div tabIndex="0"></div>; // 속성값에 "" 따옴표를 이용해 문자열을 정의할 수 있습니다.

const element = <img src={user.avatarUrl}></img>; // 중괄호를 이용해 attribute에 javascript 표현식을 넣을 수도 있습니다.

JSX로 자식 정의

태그 내부에 자식 태그가 없다면 아래와 같이 태그를 /> 닫아주어야합니다.

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

태그 내부에 자식 태그를 포함할 수 있습니다. 작성법은 html과 동일하다고 생각됩니다.

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

JSX는 주입 공격을 방지한다

주입 공격, XSS 공격 (cross-site scripting 공격)이라는 단어를 처음 들어서 검색해봤습니다.

공격자가 자바스크립트를 통해 악성 스크립트를 내부 페이지에 심어둔 뒤 사용자의 민감한 정보를 빼내는 기법을 XSS 공격이라고 하는 것 같습니다.
이런 공격을 막기 위해 렌더링 메서드 내부에서 html 태그가 담겨있는 string 형태를 렌더링하면
태그가 들어가는 것이 아닌 문자열이 렌더링 됩니다.

class App extends React.Component {

  
  render() {
  let codes = "<b>Will This Work?</b>";
    return (
      <div>
          {codes} // <b>Will This Work?</b> <- string 형태로 렌더링!
      </div>
    );
  }
};

ReactDOM.render(
  <App></App>,
  document.getElementById("root")
);

만약 문자열이 아닌 태그가 적용된 상태가 렌더링된다면 임의로 웹페이지에 스크립트를 삽입할 수 있게 되어서 취약점이 생깁니다. JSX는 이러한 문제를 보완합니다.

3. 엘리먼트 렌더링

엘리먼트는 React 앱의 가장 작은 단위입니다.

브라우저의 DOM 엘리먼트와 달리, React 엘리먼트는 일반 객체입니다. 그리고 ReactDOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 합니다.

DOM에 엘리먼트 렌더링하기

리액트 앱의 뿌리에 해당하는 태그인 루트 DIV 안으로 모든 엘리먼트들이 들어갑니다.
그리고 그 엘리먼트들을 ReactDOM이 관리를 해서 아래 태그를 '루트 돔 노드'라고도 부릅니다.

<div id="root"></div>

React 엘리먼트를 루트 돔 노드에 렌더링하려면 ReactDOM.render()로 전달하면 됩니다.

const element = <h1>Hello, world</h1>; // 리액트 엘리먼트
ReactDOM.render(element, document.getElementById('root')); // 루트 돔 노드에 엘리먼트를 렌더링하겠다

렌더링 된 엘리먼트를 업데이트하기

리액트 엘리먼트는 불변객체입니다. 한 번 생성 후 그 상태를 바꿀 수 없습니다.
즉, 그 시점의 UI를 보여주는 셈입니다.
그렇다면 UI를 어떻게 업데이트할까?
방금 전에 언급한 ReactDOM.render 메서드를 이용해 새로운 엘리먼트를 다시 그리는 것입니다.

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);