📜 reactjs 공식 문서 읽기 - Main Concepts 1~4

지속적으로 참고하고 싶은 리액트의 철학적인 내용을 정리하는 것이 목표

1. Hello World

가장 간단한 React 예제

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

2. Introducing JSX

JSX

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

why JSX?

선천적으로 렌더링 로직은 다른 여러 로직들과 연결이 되어있다. (이벤트 관리, 시간에 따른 state 변화, 데이터 준비 상황 등) React는 이 사실을 포용하는 의미에서 JSX를 사용해서 로직과 마크업을 한 곳에 담고자 한 것이다. (로직과 마크업을 한 곳에 묶은 곳이 바로 "components"이다.)

그래서 JSX를 사용하는 것은 사실 필수가 아니다. 대부분 더 편하게 여길 따름이다.

JSX도 표현식이다.

변환 후에는 JSX도 단지 하나의 JavaScript object일 뿐이다. 따라서 if문, for문, 변수 할당, arguments, return 등등 에서 사용할 수 있다.

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

JSX에서 속성을 사용하기

string literal로 속성을 명시한다.

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

중괄호로 감싸 JavaScript 표현식을 속성으로 사용할 수도 있다.

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

* 한 속성을 명시할 때 따옴표(string literal)이나 중괄호 둘 중 하나만 사용해야 한다.
* 속성 값은 camelCase를 사용한다. JSX는 HTML보다는 JavaScript에 가깝기 때문이다.

인젝션 공격을 방지해준다.

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

React는 JSX안의 어떤 값이든 escape한다. 모든 것들은 렌더링 되기전 문자열로 변환된다. 따라서 인젝션 공격을 할 수 없다. XSS(cross-site-scripting) 공격도 막아준다.

JSX는 Object이다.

Babel은 JSX를 React.createElement()로 컴파일 한다.

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

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

위 두 예제는 완전히 동일하다.

그리고 React.createElement()는 버그가 있는지 몇 가지 체크를 한 후, 아래와 같은 object를 만들어낸다.

// 간략한 버전임
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

이 object를 "React elements"라고 부른다. React는 이 object의 내용을 읽어 DOM을 그리고 변화를 추적하는데 사용한다.

3. Rendering Elements

element

const element = <h1>Hello, world</h1>;

element를 업데이트하기

React elements는 immutable하다. 일단 element를 생성했으면, children이나 attribute를 수정하는건 불가능하다. element는 영화에서 하나의 프레임과 같다.

따라서 아래와 같이 매번 ReactDOM.render를 호출하는 것이 현재까지 아는 유일한 UI 업데이트 방법이다.

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

| 다만, 실제 React App은 ReactDOM.render()를 한번만 호출한다. state를 사용하기 때문인데 뒤에 나온다.

4. Components and Props

컴포넌트는 UI를 독립적이고, 재사용 가능한 조각으로 나누게 한다. 그리고 각 조각을 독립적으로 여기게 한다. 개념적으로, components는 JavaScript 함수와 같다.

가장 간단한 컴포넌트의 예시

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

컴포넌트의 사용

const element = <Welcome name="Sara" />;

React가 사용자 정의 컴포넌트를 만나면, JSX 속성과 children을 "props"라는 이름의 object에 담아 전달한다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;

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

!!컴포넌트의 이름은 무조건 대문자로 시작해야한다.!!

컴포넌트 구성

한 컴포넌트는 다른 컴포넌트에서 사용 가능하므로, 예를들어 button, form, dialog 등을 어느 단계에서든 사용할 수 있다.

Welcome 컴포넌트를 여러 번 사용한 App component

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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

만약, 기존의 앱을 React로 대체한다면 bottom-up으로 가장 작은 컴포넌트 부터 조성해나가면서 작업을 진행할 수 있을 것이다.

Props are Read-only

아래 함수는 "pure"하다. 입력값을 변화시키지 않고 같은 입력값에 항상 같은 출력을 내보내기 때문이다.

function sum(a, b) {
  return a + b;
}

• "pure"하지 않은 예시

function withdraw(account, amount) {
  account.total -= amount;
}

React에는 유연하지만 하나의 엄격한 규칙이 있다.

All React components must act like pure functions with respect to their props.

다만 UI는 다이나믹하게 변화해야한다. 그래서 state를 이용할 것이다.