[React] 처음 만난 React - Inflearn

JSX

A syntax extension to JavaScript.

• JavaScript + XML / HTML
• 내부적으로 xml / html 을 javascript 로 변환시켜준다.

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

React.createElement(
  type,
  [props],
  [...children]
)

example 1)

// JSX를 사용한 코드
class Hello extends React.Component {
  render() {
  	return <div>Hello {this.props.toWhat}</div>;
  }
}

ReactDOM.render(
	<Hello toWhat="World" />
    document.getElementById('root')
);

// JSX를 사용하지 않은 코드
```javascript
class Hello extends React.Component {
  render() {
  	return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
	React.createElement(Hello, { toWhat: 'World' }, null),
    document.getElementById('root')
);

example 2)

// JSX를 사용한 코드
const element = (
  <h1 className="greeting">
  	Hello, world!
  </h1>
)

// JSX를 사용하지 않은 코드
const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
)

React.createElement() 의 결과로 아래와 같은 객체가 생성된다.

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

React 는 이 객체(element)를 읽어서 DOM 을 만드는데 사용하고 최신 상태로 유지한다.
JSX 를 쓰는 것이 필수는 아니지만 코드가 간결해지고 가독성이 높아지기 때문에 쓰는 것이 좋다.

• 사용예시

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

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

const user = {
  firstName: 'mon',
  lastName: 'woogie',
};

const element = (
  <h1>
      Hello, {formatUser(user)}
  </h1>
);

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

• 태그의 속성(attribute)에 값을 넣는 방법

// 큰따옴표 사이에 문자열을 넣거나
const element = <div tabIndex="0"></div>;

// 중괄호 사이에 자바스크립트 코드를 넣으면 됨
const element = <img src={user.avatarUrl}></img>;

• 자식(children)을 정의하는 방법

const element = (
  <div>
  	  <h1>안녕하세요</h1>
  	  <h2>열심히 리액트를 공부해봅시다!</h2>
  </div>
);

• 실습

Book.jsx

import React from 'react';

function Book(props) {
  return (
    <div>
      <h1>{`이 책의 이름은 ${props.name}입니다.`}</h1>
      <h2>{`이 책은 총 ${props.numOfPage}페이지로 이루어져 있습니다.`}</h2>
    </div>
  );
}

export default Book;

Library.jsx

import Book from './Book';

function Library(props) {
  return (
    <div>
      <Book name='처음 만난 파이썬' numOfPage={300} />
      <Book name='처음 만난 AWS' numOfPage={400} />
      <Book name='처음 만난 리액트' numOfPage={500} />
    </div>
  );
}

export default Library;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import Library from './chapter_03/Library';
import './index.css';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Library />
  </React.StrictMode>
);

reportWebVitals();

결과

Rendering Elements

Elements are the smallest building blocks of React apps.

: 리액트 앱을 구성하는 가장 작은 블록들

Hooks

useEffect(() => {
  // 컴포넌트가 마운트 된 이후,
  // 의존성 배열에 있는 변수들 중 하나라도 값이 변경되었을 때 실행됨
  // 의존성 배열에 빈 배열([])을 넣으면 마운트와 인마운트시에 단 한 번씩만 실행됨
  // 의존성 배열 생략 시 컴포넌트 업데이트 시마다 실행됨
  ...
  
  return () => {
    // 컴포넌트가 마운트 해제되기 전에 실행됨
    ...
  }
}, [의존성 변수1, 의존성 변수2, ...]);