[React]Hooks

React Hooks

클래스 컴포넌트를 대체하기 위한 목적으로 도입된 기능. 

---

useState

함수형 컴포넌트에서 state 사용. 

import React, {useState} from 'react';
const UseStateSample = (props) => {
	const [value, setValue] = useState(0);
    return(
    	<div>
        	<p>현재 카운터 값음 {value} 입니다.</p>
            <button onClick={() => setValue(value + 1)}>+1</button>
            <button onClick={() => setValue(value - 1)}>-1</button>
        </div>
    )
}
export default UseStateSample;

첫번째 원소(value)는 상태 값,

두번째 원소(setValue)는 상태를 없데이트하기 위함 함수,

useState(0)의 파라미터는 state의 초기값. 

---

useEffect

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

클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태.

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

첫번째 파라미터에는 렌더링 직후 실행할 함수,

두번째 파라미터에는 리렌더링 할 기준이 되는 매개변수

 

 

컴포넌트가 언마운트 되기 전이나 업데이트되기 직전에 어떤 작업을 수행하고 싶다면, 

cleanUp 함수를 반환.

useEffect(() => {
	console.log('effect');
    console.log('마운트될 때 업데이트 이후 값');
    return() => {
    	console.log('cleanUp');
        console.log('언마운트될 때 업데이트 전의 값');
    }
}, [name])

렌더링 될 때 effect가 출력되고, 리렌더링 시 cleanUp, effect 순서로 콘솔에 출력됨.

언마운트 될 때만 cleanUp함수를 실행하고 싶다면 두번째 파라미터에 비어있는 배열을 넣으면 됨.

 

---

useReducer

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

- reducer 함수는 현재상태(state)와 업데이트를 위해 필요한 정보를 담은 액션(action)값을 전달받아 변경된 값을 반환.

- 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다는 장점이 있음.

- 선언 : const [값이 있는 변수, reducer호출 함수] = useReducer(리듀서함수, default값) 

import React, { useReducer } from 'react';

const Count = () => {
	const [state, dispatch] = useReducer(reducer, {value:0})
    
    return(
    	<button onClick={() => dispatch({type:'INCREMENT'})}>+1</button>
        
        ...
    )
}

function reducer(state, action){
    switch(action.type){
        case 'INCREMENT':
            return {value:state.value + 1};
            break;
        case 'DECREMENT':
            return {value:state.value - 1};
            break;
        default: 
	return state;
    }
}

export default Count;

 

 

---

useMemo

컴포넌트 내부에서 발생하는 연산을 최적화.

연산된 값을 반환.

import React, { useState, useMemo } from "react";

const returnInput = (number) => {
  return number;
};

const UseMemoSample = (props) => {
  const [input, setInput] = useState("");
  const [number, setNumber] = useState(0);

  const onInsert = () => {
    const inputNum = input;
    setNumber(inputNum);
  };

  //렌더링 될때마다 호출됨. 
  const realNum = returnInput(input);

  //number의 값이 바뀔때만 호출됨.
  const memoNum = useMemo(() => {
    return returnInput(input);
  }, [number]);

  return (
    <>
      <div>
        <input
          type="text"
          value={input || ""}
          onChange={(e) => setInput(e.target.value)}
        />
        <button onClick={onInsert}>add</button>
      </div>
      <div>
        <p>입력 : {realNum}</p>
        <p>입력 : {memoNum}</p>
      </div>
    </>
  );
};

export default UseMemoSample;

---

 

 

useCallback

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

함수의 리렌더링 타이밍을 설정

(useCallback을 사용하지 않으면 리렌더링 될때마다 함수가 새로 생성됨)

import React, { useCallback, useState } from "react";

const EasySample = () => {
  const [click1, setClick1] = useState(0);
  const [click2, setClick2] = useState(0);

  const oneRender = useCallback(() => {
  //처음 한번만 렌더링됨.
    setClick1(click1 + 1);
  }, []);

  const clickRender = useCallback(() => {
  //click2의 값이 바뀔때마다 렌더링됨.
    setClick2(click2 + 1);
  }, [click2]);
  return (
    <div>
      <div>
        <button onClick={oneRender}>한번만</button>
        <button onClick={clickRender}>리렌더링</button>
      </div>
    </div>
  );
};

export default EasySample;

 

 

---

useRef

- 함수형 컴포넌트에서 Ref사용. 

- Ref.currnet가 실제 엘리먼트를 가리킴. -> DOM에 접근할때 사용

- Ref의 값이 바뀌어도 컴포넌트가 렌더링 되지 않음. -> 로컬변수로 사용

 

const Component = () => {
	const inputRef = useRef();	//input에 접근할 Ref
	const localVar = useRef(1);	//로컬변수
    
	const inputHnadler = () => {
		inputRef.current.value = "input에 글자 입력"
		inputRef.current.focus();
	}
    
	const localVariablehandler = (n) => {
		//값이 바뀌어도 렌더링에 영향을 주지 않음. 
		localVar.current = n;
	}
    
	return(
		<div>
			<input type="text" ref={inputRef} />
		</div>
	)
}

export default Component;

 

---

커스텀 Hooks

비슷한 기능을 하는 로직을 임의의 hook으로 만들어 여러 컴포넌트에서 사용. 

(다른 개발자가 만든 hooks를 라이브러리로 설치해서 사용 가능)

import { useReducer } from "react";

function reducer(state, action) {
  return {
    ...state,
    [action.name]: action.value
  };
}

export default function useInputs(initialForm) {
  const [state, dispatch] = useReducer(reducer, initialForm);
  const onChange = (e) => {
    dispatch(e.target);
  };

  return [state, onChange];
}

import React from "react";
import useInputs from "./useInputs";

const Info = () => {
  const [state, onChange] = useInputs({
    name: "",
    nickname: ""
  });

  const { name, nickname } = state;

  return (
    <div>
      <div>
        <input name="name" value={name} onChange={onChange} />
        <input name="nickname" value={nickname} onChange={onChange} />
      </div>
      <div>
        <div>이름 : {name}</div>
        <div>닉네임 :  {nickname}</div>
      </div>
    </div>
  );
};

export default Info;

 

---

참조 :

리액트를 다루는 기술(김민준 / 길벗)

leehwarang.github.io/2020/05/02/useMemo&useCallback.html