DAY : 12
ReactDay : 2

1. Components

기존에 길게 작성되어 있던 코드들을 레고 조립하듯 파트별로 나누어 관리할 수 있다. components 파일 안에 .jsx파일을 여러 개 만들어 각각의 코드를 입력해 준다.
(사용자 정의 componetns는 반드시 대문자로 시작해야 함)
요소가 될 components 파일을 아래와 같이 작성한다.
(함수 선언 후 export작성 / 통상적으로 함수명과 파일명을 동일하게 표기함)

const Footer = () => {
  return (
    <footer className="max-w-screen-xl mx-auto flex justify-end py-1 md:py-2">
      2023,Designed by, me
    </footer>
  );
};
export default Footer;

실행시키는 Main파일은 아래와 같이 작성한다.
(import로 components가지고 오기 -> 해당 부분에 함수명 작성)

import ReactLogo from "./images/react.png";
import Header from "./components/Header";
import Introduce from "./components/Intorduce";
import Portfolio from "./components/Portfolio";
import ContactMe from "./components/ContactMe";
import Footer from "./components/Footer";
function App() {
  return (
    <div className="bg-red-100 min-h-screen">
      <Header />
      <main>
        <Introduce />
        <Portfolio />
        <ContactMe />
      </main>
      <Footer />
    </div>
  );
}
export default App;

2. Hooks

1) What is Hooks?

: Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. ; Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다.

2) useState

: useState 는 가장 기본적인 Hook 으로서 상태관리에 용이하다. 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해준다.

import React, { useState } from 'react';
function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

count : 변수 / setCount : 함수(업데이트) / useState(): (초기값)

Hooks 사용법을 잘 정리해둔 사이트
: https://legacy.reactjs.org/docs/hooks-intro.html
: https://velog.io/@velopert/react-hooks