[REACT] HOOKS

REACT HOOKS

useState

함수형 컴포넌트에서 상태 관리하기 위해 사용

import React, { useState } from 'react'; const Info = () => { const [name,setName] = useState(); const [nickname,setNickname] = useState(); const onChangeName = e => { setName(e.target.value); } const onChangeNickname = e => { setNickname(e.target.value); } return ( 이름:{name} 닉네임:{nickname} ); } export default Info;

useEffect

컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 때 사용 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 보아도 무방

import React, { useState, useEffect } from 'react'; const Info = () => { const [name,setName] = useState(); const [nickname,setNickname] = useState(); useEffect(() => { console.log('렌더링이 완료되었습니다.'); console.log({ name, nickname }) }) const onChangeName = e => { setName(e.target.value); } const onChangeNickname = e => { setNickname(e.target.value); } return ( 이름:{name} 닉네임:{nickname} ); } export default Info;

글자를 입력할 때 마다 렌더링하므로 useEffect가 실행된다.

1. 처음 렌더링될 때, 업데이트 될 때 실행된다.

useEffect(() => { console.log('렌더링이 완료되었습니다.'); console.log({ name, nickname }) });

2. useEffect 의 두번째 파라미터로 빈값을 넣어주면 처음 렌더링 할 때만 실행되고 업데이트 할 때는 실행되지 않는다.

useEffect(() => { console.log('렌더링이 완료되었습니다.'); console.log({ name, nickname }) },[]);

3. 특정 값이 업데이트 될 때만 실행해주고 싶을때. (name이 업데이트 될 때만 실행된다)

useEffect(() => { console.log('렌더링이 완료되었습니다.'); console.log( name ) },[name]);

cleanup

useEffect(() => { console.log('effect'); console.log(name); return () => { console.log('cleanup'); console.log(name); } });

useEffect는 렌더링 후에 실행된다.

두번째 파라미터에 뭘 넣느냐에 따라 실행조건이 달라진다.

컴포넌트가 언마운트 되기 전이나 업데이트 되기 전에 실행해주고 싶을때 cleanup(뒷정리) 함수를 반환해 주어야 한다. return 부분

useReducer

useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해 주고 싶을때 사용

import React, { useReducer } from 'react'; function reducer(state, action) { switch (action.type) { case 'INCREMENT': return {value:state.value + 1} case 'DECREMENT': return {value:state.value - 1} default: break; } } const Counter = () => { const [state, dispatch] = useReducer(reducer, {value:0}); return ( 현재 카운터 값은 {state.value}입니다. dispatch({type: 'INCREMENT'})}>+1 dispatch({type: 'DECREMENT'})}>-1 ) } export default Counter;

useMemo

useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다.

useCallback

useMemo와 상당히 비슷한 함수

주로 렌더링 성능을 최적화해야 하는 상황에서 사용

이벤트 핸들러 함수를 필요할 때만 생성할 수 있다

useRef

함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해 준다

커스텀 Hooks 만들기

여러 컴포넌트에서 비슷한 기능을 공유할 경우, 커스텀하여 만들 수 있다.

다른 Hooks

다른 개발자가 만든 Hooks도 사용할 수 있다.

from http://emessell.tistory.com/118 by ccl(A) rewrite - 2020-03-06 23:54:46