UseConfirm & UsePreventLeave
이 두개의 Hooks는 실제로 Hooks가 아니다. 이 이유는 UseState와 UseEffect가 사용되지 않기 때문이다.
UseConfirm
사용자가 버튼을 클릭하는 작업을 하면 이벤트를 실행하기 전에 메세지를 보여준다.
const useConfirm = (message = "", onConfirm, onCancel) => {
if (!onConfirm ...
react에 있는 모든 component는 reference element를 가지고 있음
UseClick
const useClick=(onClick)=>{
if(typeof onClick !=="function"){
return;
}
const element=useRef();
useEffect(()=>{
if(element.current){
element.current.addEventL...
UseTitle
const useTitle = (initialTitle) => {
const [title, setTitle] = useState(initialTitle);
const updateTitle = () => {
const htmlTitle = document.querySelector("title");
htmlTitle.innerText = title;
};
useEffect(updateT...
UseEffect
UseEffect는 componentDidMount, ComponentWillunMount, componentDidUpdate와 비슷하다.(동일)
const App = () => {
const sayHello = () => {
console.log("Hello");
};
const [number, setNumber] = useState(0);
const [aNumber, setAnumb...
UseTabs
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",
},
];
const useTabs = (initialTab, allTabs) => {
const ...
UseInput
const useInput = (initialValue) => {
const [value, setValue] = useState(initialValue);
const onChange = (event) => {
console.log(event.target);
};
return { value, onChange };
};
const App = () => {
const name = u...
UseState
useState가 바로 Hook 이다. Hook을 호출해 함수 컴포넌트(function component) 안에 count state를 추가했다. 이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지될 것이다. useState는 현재의 state 값(count)과 이 값을 업데이트하는 함수(setCount)를 쌍으로 제공한다.
useState는 인자로 초기 state 값을 받는다. 아래 예제에서는 count st...
React Hooks란?
Class가 코드의 재사용성과 코드 구성을 좀 더 어렵게 만들 뿐만 아니라, React를 배우는데 큰 진입장벽이라고 한다. 세 프레임워크 (React.js, Vue.js, Angular.js) 중 러닝허들이 높은 편이라는 피드백을 참고한 것 같다. 그리고, Javascript에서의 this는 다른 프로그래밍 언어와의 작동방식이 다르기 때문에, 이 작동방식을 알아야만 했다. 그래서 bind를 통해 하나하나 처리...
react-router dom 을 설치해 네비게이션을 만들어 준다.
react-router dom을 통해 <Home.js>와 <About.js>에 접근하는 방법을 알아본다.
//Home.js
import React from "react";
import axios from "axios";
import Movie from "../components/Movie";
import "./Home.css";
class Home...
Deploying to Github Pages
{
"name": "movie_app_2021",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.7.0"...
