React Study 001

useState

App.js

import MainHeader from './components/MainHeader';  //가져오기
import './App.css';

function App() {
  return (
    <div className="App">
      <MainHeader></MainHeader>   // 커스텀 엘리먼트 사용 가능 

    </div>
  );
}

export default App;

MainHeader.js (src > components 폴더)

import React, {useState} from "react";

function MainHeader() {  // 커스텀 엘리먼트 MainHeader라는 이름으로 선언된 함수
  // 구조 분해 할당, text - 상태 데이터, setClick - 상태를 위한 setter 함수
  const [ text, setClick ] = useState("Hello world!");

  return (
    <h1 onClick={() => { setClick("Bye world!") }}>{text}</h1>
  )
}

export default MainHeader;

• React.useState("Hello world!")는 컴포넌트의 상태를 설정하는 메서드
• useState 파라미터는 초기값, text는 상태 데이터, text는 setClick에 따라 변경
• console.log(text) // Hello world! 출력
• click했을 때(onClick), setClick("Bye world!")로 text는 Hello world!에서 Bye world!로 변경