useState?

데이터를 변경할 수 있다.

현재의 state값과 이값을 업데이트(setState) 하는 함수를 쌍으로 제공한다.

하나의 컴포넌트 내에서 여러 개를 사용할수도 있다.

import React, {useState} from 'react' // 사용하기 위해서 useState를 import해줘야 한다.

const App = () => {
  const [데이터명,데이터를_변경할_수단] = useState(초기값을넣어준다);
  const [데이터명2,데이터를_변경할_수단2] = useState(초기값을넣어준다);

  return (
  <>
    <h1>Hello {데이터명}</h1>
    <button onClick="{()=>데이터를_변경할_수단(데이터명+"lime")}"></button>
  </>
  )
}

예시

1. useInput

보통 <input /> 태그를 업데이트 하기 위해서 사용한다.

// input을 업데이트 한다.
const useInput = (data, validator) => {
  // 데이터
  const [value, setValue] = useState(data);

  // onChange이벤트
  const onChange = (e) => {
    const {
      target: { value }
    } = e;
    let willUpdate = true;

    if (typeof validator === "function") {
      willUpdate = validator(value);
    }

    if (willUpdate) {
      setValue(value);
    }
  };
  return { value, onChange };
};

const App = () => {
  const maxLen = (value) => value.length <= 10;
  const name = useInput("Mrs. ", maxLen);
  return (
    <>
    <h1>hello</h1>
    <input placeholder="Name" {...name} />
</>
);
};

export default App;

2. useTabs

    import "./styles.css";
    import { useState } from "react";

    const content = [
      {
        tab: "Section 1",
        content: "I'm the content of the Section 1",
      },
      {
        tab: "Section 2",
        content: "I'm the content of the Section 2",
      },
    ];

    content[0];

    const useTabs = (initialTab, allTabs) => {
      if (!allTabs || !Array.isArray(allTabs)) {
        return;
      }

      const [currentIndex, setCurrentIndex] = useState(initialTab);

      return {
        currentItem: allTabs[currentIndex],
        changeItem: setCurrentIndex,
      };
    };

    const App = () => {
      const { currentItem, changeItem } = useTabs(0, content);
      console.log(currentItem);

      return (
        <>
          {content.map((section, i) => (
            <button onClick={() => changeItem(i)}>{section.tab}</button>
          ))}
          <div>{currentItem.content}</div>
        </>
      );
    };

    export default App;

3.useFullScreen

import React, { useState, useEffect, useRef } from "react";

const useFullscreen = (callback) => {
  const element = useRef();

  const runCb = (isFull) => {
    if (callback && typeof callback === "function") {
      callback(isFull);
    }
  };

  const triggleFull = () => {
    const elCur = element.current;

    if (elCur.requestFullscreen) {
      elCur.requestFullscreen();
    } else if (elCur.mozRequestFullScreen) {
      elCur.mozRequestFullScreen();
    } else if (elCur.webkitRequestFullscreen) {
      elCur.webkitRequestFullscreen();
    } else if (elCur.msRequestFullscreen) {
      elCur.msRequestFullscreen();
    }
    runCb(true);
  };

  const exitFull = () => {
    document.exitFullscreen();

    if (document.exitFullscreen) {
      document.exitFullscreen;
    } else if (document.moxCancleFullScreen) {
      document.moxCancleFullScreen;
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen;
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen;
    }

    runCb(false);
  };

  return { element, triggleFull, exitFull };
};

const App = () => {
  const onFullS = (isFull) => {
    console.log(isFull ? "We are full" : "we are small");
  };
  const { element, triggleFull, exitFull } = useFullscreen(onFullS);
  return (
    <div style={{ height: "1000vh" }}>
      <h1>react</h1>
      <div ref={element}>
        <img
          style={{ width: "50%" }}
          src="https://images.unsplash.com/photo-1610384458867-67792bc5a7a6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1952&q=80"
        />
        <button onClick={exitFull}>exit fullscreen</button>
      </div>

      <button onClick={triggleFull}>Make fullscreen</button>
    </div>
  );
};

export default App;