React Hooks란?

React Hooks란?

함수형 컴포넌트에서 상태와 생명주기 관리를 쉽게 할 수 있다.

• 기존 react와 호환되기 때문에 이전 코드를 고칠 필요가 없다.
• class형 컴포넌트에서는 작동하지 않는다.

react에서 제공하는 내장 Hooks : useState, useEffect…

---

1. useState

state 값을 관리한다.

import React, { useState } from 'react';

const AddSub = () => {
    const [count, setCount] = useState(0);        

    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>더하기</button>   
        <button onClick={() => setCount(count - 1)}>빼기</button>
      </div>
    );
};
export default AddSub;

const [count, setCount] = useState(0); 를 살펴보자,

• state 변수 : count
• count를 관리해주는 함수 이름 : setCount
• useState()의 인자 : state변수에 들어갈 초기값

state 값을 갱신할 때는 setCount를 바로 호출하면 된다.

state 변수는 여러 개 둘 수 있다.

 

2. useEffect

componentDidMount, componentDidUpdate, componentWillUnmount 효과를 가진 함수.

(컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정)

import React, { useState, useEffect } from 'react';

const StudentInfo = () => {
  const say() => console.log({
    sno,
    sname
  });
  const [sno, setsno] = useState('');
  const [sname, setsname] = useState('');
  useEffect(say);                          

  const onChangeSno = e => {
    setsno(e.target.value);     /* e.target 은 이벤트가 일어날 객체. */
  };

  const onChangeSname = e => {
    setsname(e.target.value);
  };

  return ();
};
export default StudentInfo;

useEffect(say); 를 살펴보자,

• 첫 번째 인자 : function으로써의 effect
• 두 번째 인자 : dependency
• 특정 state만 값을 update하고 싶다면, useEffect의 두 번째 인자에 [state명]을 준다.

useEffect(say, [sname]);

• 마운트 될 때만 실행하고 싶다면, useEffect의 두 번째 인자에 빈 dependency([빈 배열])을 준다.

useEffect(say,[]);

• 업데이트 되기 직전에 어떤 동작을 실행하고 싶다면, useEffect의 return 함수 속에 작성한다.

useEffect((say) => {
    return () => {
      console.log('sno');
    };
});

• 언마운트될 때만 어떤 동작을 실행하고 싶다면, return함수 속에 작성하고 useEffect의 두 번째 인자에 빈 dependency([빈 배열])을 준다.

useEffect((say) => {
    return () => {
      console.log('sno');
    };
},[]);

• dependency가 빈 배열이면 마운트 될 때만 실행하고 싶은 동작, 언마운트될때만 실행하고 싶은 동작.

useEffect( () => {
    console.log({
      sno,
      sname
    });
    return () => {
      console.log('sno');
    };
},[]);

 

3. useRef

reference는 component의 어떤 부분을 선택할 수 있는 방법.

document.getElementByID()를 사용한것과 동일

Hi를 누르면 console에 “say hello“를 출력
import React, { useState, useEffect, useRef } from 'react';

const useClick = onClick =>{
    const element = useRef();
    useEffect( () => {
        if (element.current){
            element.current.addEventListener("click", onClick);
        }
        return () => {
            if (element.current){
                element.current.removeEventListener("click", onClick);
            }
        };
    },[]);
    return element;
};

const App = () =>{
    const sayHello=()=>console.log("say hello")
    const title =useClick(sayHello);
    return (
        <h1 ref ={title}>Hi </h1>  
    );
});

ref = {title}로 useClick과 연결시킴.

• useEffect((…),[]); 는 마운트될 때 addEventListener를 한번, 언마운트될 때 removeEventListener를 한번 실행한다.

 

4. Custom hooks

useInput

사용자에게 입력받은 값을 관리한다.

input창의 값이 바뀌면 input받은 객체(input창)를 console에 알려준다.

import React, { useState, useEffect } from 'react';

const UseInput = (initialize) => {
  const [sname, setsname] = useState(initialize);
  const onChange = event => {
      console.log(event.target);
  };
  return {sname, onChange};
};

const App = () =>{
    const name = UseInput(“Mr.”);
    return (
        <input {...name}/> 
    );
});

/* 
console결과 (input창에 글자를 입력할 때마다)
<input value=“Mr.”></input> 
*/

• {...name}이란?
• {...name }은 value ={name.value} onChange ={name.onChange}와 같다.
• 콘솔 출력말고 input창 속 값을 바꾸려면? 추가로 유효성 검사(maxLen)까지!

import React, { useState, useEffect } from 'react';

const UseInput = (validator) => {
	const [value, setValue] = useState('');
	const onChange = event => {
		const {target : {value}} = event;
		let willUpdata = true;
		if(typeof validator === "function"){
			willUpdata = validator(value);
		}
		if(willUpdata){
			setValue(value);
		}
	};
	return {value, onChange};
};

const App = () =>{
	const maxLen = value = value.length < 10;
	const name = UseInput(maxLen);
	return (
		<input {...name}>
	);
});

• const {target : {value}} = event; 란?
• const value = event.target.value; 와 같다. ES6문법이다.

 

 

헷갈릴 수 있는 point

useEffect = 특정 값 재사용, useEffect(()={},[])

useMemo 특정 값 재사용, const a = useMemo(()⇒{},[])

useCallback 특정 함수 재사용 const handleOnClick= useCallback(()⇒{},[])

 

---

 

공부에 도움된 자료들

• https://velog.io/@velopert/react-hooks (설명이 잘 되어있어, 공부할 때 보면 좋은 자료입니다.)
• https://ko.reactjs.org/docs/hooks-state.html (useState) - 공식문서
• https://ko.reactjs.org/docs/hooks-effect.html (useEffect) - 공식 문서
• Nomadcoder [실전형 react hooks 10개]