풀스택 14일차

index.html: React 애플리케이션의 진입점 역할을 하는데 여기서 중요한 부분은 <div id="root"></div> 요소로, 이 부분이 전체 React 컴포넌트 트리가 마운트되는 위치라는 것이다.

 

index.js ; React 애플리케이션을 렌더링하는 역할을 한다. App.js에서 App 컴포넌트를 가져와 index.html에 정의된 root 요소에 렌더링한다.

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

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

 

컴포넌트 등록: export default App 형태로 컴포넌트를 모듈에 등록할 수 있다.

인자 전달: 함수에 인자를 전달하는 방식은 아래와 같이 가능하다

function MyComponent(props) {
  return <div>{props.name}</div>;
}

 

함수 호출: 인자가 없는 경우, 다음과 같은 방식으로 함수를 호출할 수 있다.

function sayHello() {
  alert('Hello!');
}

sayHello();

 

부트스트랩 활용

Table에 CSS 적용: Bootstrap을 활용하여 table에 CSS를 적용할 수 있다. 예를 들어, Bootstrap의 table 클래스를 사용해 표를 꾸밀 수 있다.

<table className="table">
  <thead>
    <tr>
      <th>헤더</th>
      <th>헤더 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>데이터</td>
      <td>데이터 2</td>
    </tr>
  </tbody>
</table>

 

Setter 사용: React에서 상태를 관리하기 위해 setter를 지정할 수 있다.

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}