yujin log

노마드코더 - 실전형 리액트 Hooks를 바탕으로 작성했습니다. useNotification import React, { useEffect, useState, useRef } from "react"; const useNotification = (title, options) => { if (!("Notification" in window)) { return; } const fireNotif = () => { if (Notification.permission !== "granted") { Notification.requestPermission().then((permission) => { if (permission === "granted") { new Notification(title); } else { re..

노마드코더 - 실전형 리액트 Hooks를 바탕으로 작성했습니다. useScroll 유저가 스크롤해서 어딘가를 지나쳤을 때 색상을 바꾸는 역할을 한다. import React, { useEffect, useState } from "react"; const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0 }); const onScroll = () => { setState({ y: window.scrollY, x: window.scrollX }); }; useEffect(() => { window.addEventListener("scroll", onScroll); return () => window.removeEventListener("..

노마드코더 - 실전형 리액트 Hooks를 바탕으로 작성했습니다. useFadeIn element를 자동으로 서서히 나타나게 만드는 역할을 한다. import React, { useEffect, useRef } from "react"; const useFadeIn = (duration = 1, delay = 0) => { if (typeof duration !== "number" || typeof delay !== "number") { return; } const element = useRef(); useEffect(() => { if (element.current) { const { current } = element; current.style.transition = `opacity ${duration}..

노마드코더 - 실전형 리액트 Hooks를 바탕으로 작성했습니다. useConfirm, usePreventLeave useState와 useEffect를 사용하지 않아 hooks는 아니지만, nice한 함수형 프로그래밍 만드는 방법을 알 수 있다. useConfirm은 사용자가 무언가를 하기 전에 확인하는 역할을 한다. 버튼 클릭하면 이벤트 실행하기 전에 메시지를 보여주는 식. import React from "react"; const useConfirm = (message = "", callback, rejection) => { if (typeof callback !== "function") { return; } const confirmAction = () => { if (confirm(message))..

노마드코더 - 실전형 리액트 Hooks를 바탕으로 작성했습니다. useTitle useTitle은 문서의 제목을 업데이트 시켜주는 것을 담당한다. import React, { useEffect, useState } from "react"; import ReactDOM from "react-dom"; const useTitle = (initialTitle) => { const [title, setTitle] = useState(initialTitle); const updateTitle = () => { const htmlTitle = document.querySelector("title"); htmlTitle.innerText = title; }; useEffect(updateTitle, [title]);..

노마드코더 - 실전형 리액트 Hooks를 바탕으로 작성했습니다. useEffect useEffect는 아주 많은 use를 가지고 있다. componentWillUnmount, componentDidMount, componentWillUpdate와 비슷한 역할을 한다. import React, { useEffect, useState } from "react"; import ReactDOM from "react-dom"; const App = () => { const sayHello = () => console.log("hello"); useEffect(() => { sayHello(); }); const [number, setNumber] = useState(0); const [aNumber, setAnu..

노마드코더 - 실전형 리액트 Hooks를 바탕으로 작성했습니다. useInput useInput은 기본적으로 input을 업데이트 하는 역할을 한다. import React, { useState } from "react"; const useInput = (initialValue) => { const [value, setValue] = useState(initialValue); const onChange = (event) => { console.log(event.target); }; return { value, onChange }; // 기본값을 value와 함께 return }; const App = () => { const name = useInput("Hi,"); // 기본값 Hi, return ( ..

노마드코더 - 실전형 리액트 Hooks를 바탕으로 작성했습니다. 리액트 hook은 functional component에서 state를 가질 수 있게 해준다. app을 리액트 hook으로 만든다면, class component, didmount, render와 같은 것은 쓰지 않아도 된다. 모든 것은 하나의 function이 되고, 함수형 프로그래밍을 할 수 있게 된다. State Hook import "./styles.css"; import React, { Component, useState } from "react"; const App = () => { const [count, setCount] = useState(0); const [email, setEmail] = useState(""); cons..

초보자를 위한 리덕스 101을 바탕으로 작성했습니다. configureStore redux-toolkit.js.org/api/configureStore configureStore은 아주 쿨한 미들웨어와 함께 store을 생성하는 함수이다 이 부분을 configureStore로 교체하면, const store = configureStore({ reducer }); Redux DevTools를 사용할 수 있다 발생한 모든 일을 확인할 수 있고, 그 일이 발생한 순간의 state도 확인할 수 있다 이처럼 Dispatcher를 통해 dispatch도 가능하다 createSlice import { configureStore, createSlice } from "@reduxjs/toolkit"; const toDo..

초보자를 위한 리덕스 101을 바탕으로 작성했습니다. Redux Toolkit 보통 Redux를 사용할 때 많은 양의 코드를 써야한다고 생각함 -> Action의 이름, Action Creator, switch, case, return, case, default ... 그래서 Redux를 사용할 때 Boilerplate Code를 사용해야 함 -> 계속 반복해서 사용하는 많은 양의 코드 그래서 Redux 커뮤니티가 제안한 것 : Redux Toolkit - 많은 지름길들이 있는 package - 적은 양의 코드로 같은 기능을 하도록 도와줌 - Redux를 조금 더 짧게 작성 가능 // 설치 npm install @reduxjs/toolkit createAction store.js의 이 부분을 create..