프로그래밍/React17 [React] useCallback useCallback useCallback is a React Hook that lets you cache a function definition between re-renders. const cachedFn = useCallback(fn, dependencies) Parameters fn: The function value that you want to cache. It can take any arguments and return any values. React will return (not call!) your function back to you during the initial render. On next renders, React will give you the same function agai.. 2023. 11. 28. [React] useRef useRef useRef is a React Hook that lets you reference a value that’s not needed for rendering. const ref = useRef(initialValue) Parameters initialValue: The value you want the ref object’s current property to be initially. It can be a value of any type. This argument is ignored after the initial render. Returns useRef returns an object with a single property: current: Initially, it’s set to the .. 2023. 11. 28. [React] useEffect useEffect useEffect is a React Hook that lets you synchronize a component with an external system. useEffect(setup, dependencies?) 예시) useEffect(() => { const connection = createConnection(serverUrl, roomId); connection.connect(); return () => { connection.disconnect(); }; }, [serverUrl, roomId]); Parameters setup: The function with your Effect’s logic. Your setup function may also optionally re.. 2023. 11. 28. [React] useState useState useState is a React Hook that lets you add a state variable to your component. Returns useState returns an array with exactly two values: The current state. During the first render, it will match the initialState you have passed. The set function that lets you update the state to a different value and trigger a re-render. useState는 초기값과 re-render를 트리거하는 set함수를 넘겨준다. 초기값으로 object를 넘길 수도 .. 2023. 11. 27. [React] 리액트 개요 State Hooks State lets a component “remember” information like user input. useState declares a state variable that you can update directly. useReducer declares a state variable with the update logic inside a reducer function. Context Hooks Context lets a component receive information from distant parents without passing it as props. useContext reads and subscribes to a context. Ref Hooks Refs le.. 2023. 11. 27. [React] 이미지 업로드 및 미리보기 초기 이미지 태그의 src에 넣을 state값을 정의하고 onChange 함수를 만든다. (이미지 데이터 변경시 사용) const [preview, setPreview] = useState("img/book3.jpg"); const onChange = (e) => { const img = e.target.files[0]; console.log(img); var reader = new FileReader(); reader.readAsDataURL(img); reader.onload = function (e) { setPreview(e.target.result); }; }; 사용하는 곳에 preview로 연결하면 된다. CSS 부분(정사각형 모양) /* image wrapper */ .profile-img-.. 2023. 9. 9. [React] 페이지 이동하기 Next.js에서는 pages 폴더를 통해 접근하는 주소별 컴포넌트(페이지)를 넘겨준다. (SSR 방식) router 변수를 이용하여 이동할 경로를 처리한다. 반면 기본 React에서는 폴더 구조와는 상관없이 네이게이션을 정의해서 사용한다. npm i react-router-dom BrowserRouter를 App루트에 감싸준다. import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import { BrowserRouter } from "react-router-dom"; ReactDOM.createRoot(document.getElementById("root")).render( ); 그리고 A.. 2023. 9. 6. 이전 1 2 다음
