데이터를 변경할 수 있다.
현재의 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>
</>
)
}
보통 <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;
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;
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;