react hooks (4) 썸네일형 리스트형 Redux 사용법 import { configureStore } from "@reduxjs/toolkit"; import DetailReducer from "./reducers/DetailReducer"; import HomeReducer from "./reducers/HomeReducer"; import SearchReducer from "./reducers/SearchReducer"; import TVReducer from "./reducers/TVReducer"; export const store = configureStore({ reducer: { home: HomeReducer, tv: TVReducer, detail: DetailReducer, search: SearchReducer } }); 리덕스에서는 어플.. useEffect 사용법 useEffect를 사용하면 ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount를 하나의 함수로 대체할 수 있다. 1. ComponentDidMount 대체 useEffect(() => { ... 로직 }, []); 로직 부분에 실행할 코드가 들어갑니다. 그러면 컴포넌트가 마운트될 때 실행되고 끝입니다. 2. ComponentDidUpdate 대체 const useFavicon = href => { const [favi, setFavi] = useState(href); useEffect(() => { const link = document.querySelector("link[rel*='icon']") || document.createElement(".. useReducer, useContext 함께 사용하기 import React from "react"; import Helmet from "react-helmet"; import Loader from "../Components/Loader"; import Message from "../Components/Message"; import { useDetail } from "../hooks/useDetail"; import Info from "../Components/Info"; import { useDetailState } from "../contexts/DetailContext"; function Detail() { useDetail(); const { loading, error } = useDetailState(); return loading ? ( Load.. useState 사용법 function Count() { const [count, setCount] = useState(0); function add() { setCount(count + 1); } function sub() { setCount(count - 1); } return ( + {count} - ) } 위 코드는 useState를 사용한 간단한 counter이다. useState의 인자는 default로 설정하고 싶은 값을 넣으면 된다. useState를 받는 변수는 배열의 형식이어야 하고 앞은 state로 사용할 변수명을, 뒤는 그 변수의 setter를 선언한다. (count의 setter라 setCount라 함수명을 선언하였지만 potato, tomato 등 원하는 함수명을 넣어줘도 상관은 없다) setCount.. 이전 1 다음
