Main Components 1

RA_MI·2022년 2월 23일

Components and Props JSX Rendering Elements hello world

React

목록 보기

2/3

Helllo World

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

// ReactDOM.render로부터 리액트 앱이 시작됨.
// 첫번째는 보낼 react element, 두 번째 인자는 html문서로부터 id = root인 태그를 가져옴.

JSX

JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.
JSX 자체는 문법(syntax)의 이름이고, JSX의 생성물은 리액트 엘리먼트이다.
컴포넌트는 관심사를 분리한다.
JavaScript를 확장한 문법이기 때문에 이를 활용할 수 있고, 사용시 JSX 내부에서 중괄호 { }내 JavaScript 표현식을 작성하면 된다.
JSX도 컴파일 후 JS 객체로 인식이 되므로, Expression이다.
attribute로 문자열 리터럴, 객체를 줄 수 있다. 문자열을 줄 때는 따옴표, 객체를 줄 때는 중괄호 이용
React DOM은 JSX의 값을 렌더링 전에 이스케이프한다.(안전하다)
공식적인 Javascript 문법은 아니다.

장점

HTML 코드를 작성하는 것과 비슷하여 가독성이 높고 작성하기 쉽다.
HTML 태그를 활용할 수 있으며 Javascript 등을 이용하여 컴포넌트를 작성할 수 있다.

Rendering Elements

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

// 엘리먼트는 React 앱의 가장 작은 단위이고, 화면에 표시할 내용을 기술한다.
// 엘리먼트는 컴포넌트의 “구성 요소” 이다.

DOM에 엘리먼트 렌더링하기

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

이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하여 “루트(root)” DOM 노드라고 부른다.
React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다.

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

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

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

React 엘리먼트는 불변객체디다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다.

지금까지 소개한 내용을 바탕으로 하면 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);

CodePen에서 실행하기
// 위 함수는 setInterval() 콜백을 이용해 초마다 ReactDOM.render()를 호출한다.

Components and Props

React element는 DOM 태그만이아니라 사용자 정의 컴포넌트로도 나타낼 수 있다.
컴포넌트란 말 자체가 순수 DOM태그와 구분하기 위한 말로 존재한다고 생각해도 될 듯 하다.
React는 React Element의 1) JSX 어트리뷰트와 2) 자식을 해당 컴포넌트에 단일 객체로 전달한다.
사용자 컴포넌트는 항상 대문자로 시작한다.
컴포넌트를 추출함으로써 코드를 단순화시킬 수 있다.

컴포넌트 렌더링

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

// React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있습니다.

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

const element = <Welcome name="RAMI" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

1. <Welcome name="RAMI" /> 엘리먼트로 ReactDOM.render()를 호출합니다.
2. React는 {name: 'RAMI'}를 props로 하여 Welcome 컴포넌트를 호출합니다.
3. Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환합니다.
4. React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트합니다.

컴포넌트 합성

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