201102 React; Main Concept(1, 2, 3)

Modern JS

• let, const를 사용한다. var이랑 같은 키워드라고 생각해도 좋다.
• JS에서 class를 지정할 때 필요한 두 가지이다. 첫 번째, 두 개 이상의 method를 정의할 때 콤마를 넣지 않아도 상관없다. 두 번째, JS에서 this 키워드는 해당 클레스가 호출된 방식에 따라 결정된다. 
• =>를 화살표 함수라고 정의한다. 이 함수는 일반함수와 같지만 더 짧다. 예를 들어 x => x*2는 function(x) { return x*2}와 같다. 중요한 점은 이 화살표 함수는 this값을 갖지 않으므로 외부 method로부터 this value를 보호할 수 있다.

Hello World

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

 React의 기본 예제이다. codepen에서 JS Preprocessor를 babel로 설정해주면 된다.

 

Introducing JSX

const element = <h1>Hello, World!</h1>;

 처음 이 문장을 본다면 문법이 낯설 수 있다. 이런 문법을 JSX라고 부른다. React와 함께 사용하기 좋으며, UI가 어떻게 랜더링 되는지 직관적으로 보여준다. JSX는 리액트 요소들을 생성한다. 다음 장에서 어떻게 JSX를 DOM에 뿌리는지 알아볼 것이다.

 

 JSX는 인위적으로 마크업 부분(html, css)과 논리적인 부분(js)를 나누는 대신에 그 사이에 존재하는 컴포넌트 단위로 seperate concerns 했다. 또한 JSX는 vanila JS를 100% 지원하기 때문에 활용성 역시 우수하다.

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')
);

js와 html이 결합된 느낌이 든다. html 코드를 js의 변수(elemnet)처럼 사용하여 컴포넌트화 했다.

 

JSX코드를 컴파일하면 일반적인 JS 함수호출, 객체로 변환된다. 이 말은 즉슨, JSX에서 if나 for같은 구문 역시 사용가능하다는 의미이다.

 

html 태그 안에 attribute역시 지정이 가능하다. 쌍따움표를 이용해 리터럴 값을 입력할 수도 있고 중괄호를 이용해 변수를 지정할 수도 있다. 하지만 둘 다 사용할 수는 없다.

JSX는 html보다는 JS에 가깝기 때문에 HTML attribute 값을 지정할 때에도 camelCase 관습을 따른다.

JSX의 HTML 변수는 babel을 통해 React.createElement()로 컴파일 된다. 위 매서드를 통해 생성된 객체를 리액트 객체라고 부른다. 이 객체는 화면에 어떤 식으로 랜더링 되는가에 대한 값들을 담고있다.

 

Rendering Elements

요소(Element)는 리액트 앱의 가장 작은 단위이다. React DOM은 React 요소의 변화에 따라 DOM에 업데이트한다.

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

ReactApp HTML파일의 어딘가에 위와 같은 id를 가진 div가 있을 것이다. 이 div를 root DOM 노드라 부를 것이며 이 div는 React DOM에 의해 관리된다. 보통 하나의 어플리케이션에는 하나의 root DOM 노드가 존재하지만 여러 React 앱을 합친 경우에는 다수의 root DOM 노드가 존재할 수 있다.

 

리액트 요소를 root DOM에 랜더링 하고 싶다면 ReactDOM.render() 매서드에 둘을 모두 인자로 전달하면 된다.

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

 

리액트 요소는 불변 객체이다. 한번 요소를 생성하고 나면 자식요소나 attribute 역시 변경할 수 없다. 아직 우리가 배운바로는 요소를 변경하기 위해서는 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);

위 코드는 setInterval을 통해 1초에 한번씩 랜더링하도록 설정했다.

React DOM은 새로운 요소를 이전 요소와 비교한 뒤 변경된 부분만 최신화 해준다.