[리액트] 컴포넌트, 함수, Fragment, 이벤트, useState, Bootstrap

컴포넌트, 함수

리액트 컴포넌트는 클래스, 함수형 두 가지 방법이 있다. 

리액트 hooks를 사용하는 함수형이 더 간단하다. 

컴포넌트 = 부품 -> 다른 곳에서 가져다 쓸 수 있음

JSX는 HTML과 유사하지만 다른 점이 있다. 

가져오기 할 때는 import

내보내기 할 때는 export

 

Fragment

root 다음에 오는 div를 삭제하고 싶다면? <Fragment> or <>로 묶어주면 된다.

 

import { Fragment } from "react";

function App() {
  const number = 1;

  const double = () => {
    return number * 2;
  };

  return (
    <Fragment>
      <div>{double(number)}</div>
      <button>Submit</button>
    </Fragment>
  );
}

export default App;

onClick

import { Fragment } from "react";

function App() {
  const printHello = () => {
    console.log("hello");
  };

  return (
    <Fragment>
      <button onClick={printHello}>Submit</button>
    </Fragment>
  );
}

export default App;

 

useState

import { Fragment } from "react";

function App() {
  let number = 1;
  const double = () => {
    number = number * 2;
        console.log(number);
  };

  return (
    <Fragment>
      <div>{number}</div>
      <button onClick={double}>Submit</button>
    </Fragment>
  );
}

export default App;

console 창에서는 변수의 값이 2배가 되는데 화면에 나타나는 값은 바뀌지 않는다. 

리액트 컴포넌트는 변수가 바뀐다고 렌더링되지 않는다. 

 

렌더링 되는 경우??

리액트 hooks의 useState 사용하면 화면에 업데이트된다. 

일반 변수 사용하면 안 되고, useState 사용하기

import { Fragment, useState } from "react";

function App() {
  const [number, setNumber] = useState(1);
  const double = () => {
    setNumber(number * 2);
    console.log(number);
  };

  return (
    <Fragment>
      <div>{number}</div>
      <button onClick={double}>Submit</button>
    </Fragment>
  );
}

export default App;

 

 

여러 개의 state 도 렌더링이 한 번 일어난다. 

 

useState(prevState)

import { Fragment, useState } from "react";

function App() {
  const [number, setNumber] = useState(1);
  const double = () => {
    setNumber((prevState) => prevState * 2);
    setNumber((prevState) => prevState * 2);
  };

  return (
    <Fragment>
      <div>{number}</div>
      <button onClick={double}>Submit</button>
    </Fragment>
  );
}

export default App;

Bootstrap 스타일 추가

public 폴더의 index.html에 붙여 넣는다. 

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

      <button className="btn btn-primary" onClick={double}>
        Submit
      </button>

파란색 버튼으로 바뀐다.