컴포넌트에서 데이터 관리를 하는것이 State
데이터가 변경될 때 상호작용을 할 때 Effect를 사용한다.
이런 useState가 바로 State Hook이다.
Hook은 React 함수 내에서만 사용이 가능하다. Hook의 이름은 반드시 'use'로 시작해야 하며 최상위에서만 Hook을 호출할 수 있다.
const [username, setUsername] = useState('')
const [state이름, setState이름] = useState(초기값)
useEffect(EffectCallback, Deps)
- Deps: 변경을 감지할 변수들의 집합(배열)
- EffectCallback: Deps에 지정된 변수가 변경될 때 실행할 함수
useEffect(() => { console.log('버튼을 ${count}회 클릭한다.') },[count])
const fullName = useMemo(() => { return `${firstName} ${lastName}` }, [firstName, lastName]) }
const getfullName = useCallback(() => { return `${firstName} ${lastName}` },[firstName, lastName])
const inputRef = useRef(null) const onButtonClick = () => { inputRef.current.focus() }