React 구조와 작동 방식

1-1. src > index.js

여기에 있는 코드가 브라우저에서 가장 먼저 실행된다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

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

• jsx : 자바스크립트 안의 HTML, 빌드 단계에서만 사용 가능하다.

• <App /> 태그는 App.js에서 import된 태그이다.

• ReactDOM.createRoot(document.getElementById('root'));는 <App /> 태그가 화면의 DOM 어느 부분에 렌더링할지 정해준다.

1-2. public > index.html

index.html 하나로 리액트 애플리케이션을 만든다.
=> SPA(Single Page Application)

SPA는 서버에 HTML 파일이 단 하나뿐이다.
리액트가 그 파일의 DOM과 화면에 표시되는 내용을 제어한다.

1-3. src > App.js

function App() {
  return (
    <div>Hello!</div>
  );
}

export default App;

• jsx 코드를 리턴하고 export로 외부에서 쓸 수 있게한 함수이다.
  => 이게 리액트 컴포넌트이다.
• 브라우저에 렌더링 될 수 있도록 반드시 return 값이 있어야 한다.
  보통 HTML 코드인 경우가 많다.(jsx 코드)

정의한 함수를 index.js에서 render()하면 브라우저는 해당 요소의 return 값을 렌더링한다.

CSS class 할당하기

function App() {
  return (
    <div>
      <h1>My Todos</h1>
      <div className="card">
        <h2>TITLE</h2>
        <div>
          <button>Delete</button>
        </div>
      </div>
    </div>
  );
}

export default App;

• class 속성을 추가할 땐, class=""가 아닌 className=""을 사용해야한다.

위 코드는 HTML 코드 같지만 jsx 코드이므로 내부에서 표준 자바스크립트 코드로 변환되는데 이때 CSS class를 할당할 HTML 오브젝트의 property 이름이 className이기 때문이다.

const modalConfirmAction = document.createElement('button');
modalConfirmAction.textContent = 'Confirm'
modalConfirmAction.className = 'btn';
modalContirmAction.addEventListener('click', closeModalHandler)

컴포넌트 빌드 및 재사용 하기

리액트는 컴포넌트의 개념을 이용해 자체적인 빌딩 블록을 만들고 필요에 따라 재조합 할 수 있도록 했다.

2-1. src > components 폴더 생성 > Todo.js

루트 컴포넌트(App 컴포넌트)를 제외한 나머지 컴포넌트들은 components폴더에 저장해서 프로젝트를 체계적으로 관리할 수 있도록 한다.

function Todo() {
  return (
    <div className="card">
      <h2>TITLE</h2>
      <div className="actions">
        <button className="btn">Delete</button>
      </div>
    </div>
  );
}

// 이 구문을 사용해야 외부에서도 이 함수를 사용할 수 있다.
export default Todo;

함수 이름은 항상 대문자로 시작해야 한다.
=> 내장 HTML element와 구분하기 위함이다.

2-2. App.js

import Todo from './components/Todo';

function App() {
  return (
    <div>
      <h1>My Todos</h1>
      <Todo />
      <Todo />
      <Todo />
    </div>
  );
}

export default App;

• 함수를 import해오고 HTML element로 사용해준다.