리액트 | 훅(HOOK)

훅(HOOK) 이란?

https://ko.reactjs.org/docs/hooks-reference.html

Hooks API Reference – React

1. 리액트 컴포넌트는 클래스형 컴포넌트(Class component)와 함수형 컴포넌트(Functional component)로 나뉩니다.
2. 리액트 훅은 새로운 기능으로 React 16.8버전에 새로 추가된 기능
3. 함수형태의 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부른다. (useState, useEffect 등)
4. 리액트 훅은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.

훅의 규칙

• 최상위 에서만 Hook을 호출해야 한다
  • 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다.
  • 이 규칙을 따르면 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다.
• 리액트 함수 컴포넌트에서만 Hook을 호출해야 한다.

 

 

반드시 알아야 할 기본 훅

useState(초기값) 

useState() : 배열반환 
첫번째 배열의 요소에는 현재값을, 두번째 요소는 상태를 변경하는 (setter) 를 반환합니다.

const [data, setData] = useState('초기값')

 

useEffect(실행시킬 콜백함수, 값에 따른 렌더링 지정 ) 

userEffect의 첫번째 매개변수는 실행시킬 콜백함수

userEffect의 두번째 매개변수는 배열[]을 사용하여 특정값이 update 될 때만 실행시켜 줄 수 있습니다.

여러개 쓰는 것은 가능하나 무분별하게 여러개 사용하는 것은 좋지 않다.

 

useEffect() 는 컴포넌트의 라이프 사이클을 다룹니다. (생명주기를 다룹니다.)
리액트 컴포넌트가 mount(화면이 만들어졌을 때), mount이후, unmount(컴포넌트가 사라졌을 때)때 마다 특정작업을 수행합니다.

 

 

라이프 사이클

 

 

mount 이후 - 컴포넌트가 마운트 됨, 즉 컴포넌트의 첫번째 렌더링이 마치면 호출되는 메서드 입니다.

클래스형 componentDidMount() 대체

함수형 훅

useEffect( () => {
	console.log(`렌더링완료`);
});

mount 이후 업데이트 될 때는 실행되지 않으려면, 두번째 매개변수 배열를 줍니다.

useEffect( () => {
	console.log(`처음만 실행됩니다`);
}, []);​

update 이후 - 특정값에 의해 컴포넌트가 업데이트 되고 난 후 발생합니다.

클래스형 componentDidUpdate() 대체

함수형 훅

const HookEffect = () => {
    //useState
    const[name, setName] = useState('');
    const handleName = (e) => {
        setName( e.target.value );
    }

    //특정값이 업데이트 될 때만 실행해주려면 두번째 매개변수에 값을 state값을 지정합니다
    useEffect( () => {
        console.log(`name이 업데이트 시 실행됩니다`)
    }, [name]);

    return (
        <div>
            
            이름:<input type="text" onChange={handleName}/><br/>
            이름:{name}
        </div>
    )
}

export default HookEffect;

unmount직전 - 컴포넌트가 화면에서 사라지기 직전에 호출됩니다.

랜더링 : 기존에 있던 화면을 지우고 다시 만든 것

그래서 랜더링 될 때마다 unmount가 됩니다.

클래스형 componentWillUnMount() 대체

함수형 

const HookEffect = () => {
    //useState
    const[name, setName] = useState('');
    const handleName = (e) => {
        setName( e.target.value );
    }
    
	//useEffect    
    useEffect( () => {
        console.log(`name이 업데이트 시 실행됩니다`)
        
        //unmount이후 실행됩니다.
        return () => {
            console.log(`unmount에 실행됩니다.`);
        }
    }, [name]);

    return (
        <div>
            이름:<input type="text" onChange={handleName}/><br/>
            이름:{name}
        </div>
    )
}

export default HookEffect;

 

 

 

특정 태그에 이름달기 useRef()

무분별하게 사용하지 않아야 한다. 웬만하면 state로 데이터를 다루고 불가피한 상황에서만 사용한다.

useRef(초기값) 

const 사용할이름 = useRef(null);

이벤트를 사용하다 보면 특정 태그에 접근해서 핸들링 하는 경우가 생깁니다.

arrow function에 event 매개변수를 이용해서, 자신 태그에는 접근할 수 있지만, 다른태그는 핸들링 하기가 어렵습니다.

이런경우 useRef() 훅을 이용해서 특정태그에 이름을 지정하고 핸들링 할 수 있습니다.

 

reduceHook