Hook2 (React) 리액트 커스텀 훅 custom hook 사용법+input 초기화 까지 - input 1. 커스텀 훅 사용전 코드 2. 커스텀 훅 사용한 코드 3. 커스텀 훅 사용 이유 3-1 커스텀 훅 사용전 - 회원가입 폼 3-2 커스텀 훅 사용후 - 회원가입 폼 1. 커스텀 훅 사용전 코드 import React, { useCallback, useState } from "react"; const Home2 = () => { const [text, setText] = useState(""); //text값 초기화 const onChange = useCallback( (e) => { setText(e.target.value); }, [text] ); const okBtn = useCallback( (e) => { console.log("nickname:", text); setText(""); //버튼 .. 2022. 9. 24. (React) 리액트 useEffect 사용법 (React) 리액트 useEffect 사용법 * 이 포스팅은 "리액트를 다루는 기술"책 & 생활코딩님의 강의를 보고 복습겸 정리한 포스팅 입니다. 클래스형 컴포넌트에서는 라이프사이클을 사용하지만, 함수형 컴포넌트에서는 라이프사이클을 사용할 수 없습니다. 그대신 Hook을 사용합니다. 많은 Hook들이 있지만 그 중 useEffect에 대해 정리해 보았습니다. 1) useEffect가 필요한 이유 컴포넌트가 렌더링 된 후, 혹은 컴포넌트가 업데이트 될 때마다 실행시키고 싶은 작업이 있을 시 useEffect를 사용할 수 있습니다. 2) useEffect란? 클래스형 라이프사이클로 따지면 componentDidMount, componentDidUpdate, compoenntWillUnMount를 합친 것... 2021. 8. 23. 이전 1 다음