React Hooks

nabisorry·2020년 1월 6일

기타

목록 보기

4/5

함수형컴포넌트 에서도 상태관리 및 life cycle 를 대체할수 있는 useEffect 기능을 제공하는 리액트 기능

간단한예제

import React, { useState, useEffect } 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);
  };
  useEffect(
    () => {
      console.log("랜더링 되었습니다(effect).");
      console.log({
        name,
        nickname
      });
      //뒷정리 함수 
      return () => {
        console.log("cleanup");
        console.log(name);
      };
    } /*, [name]*/ //name 변할때만 useEffect 실행
  );

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

export default Info;

1. useState

setState 대신할수 있는 Hooks 기능
const [name, setName] = useState(""); name 에는 기본값 "" 담긴다.
useState 에는 세터 함수가 담기며 이 함수에 파라미터를 넣어서 호출하면 값이 변하고 정상적으로 리렌더링된다.
관리할 값이 여러 개면 여러번 사용해서 관리 할수 있다. const [nickname, setNickname] = useState(""); 추가

2. useEffect

리액트가 랜더링 될 때마다 특정 작업 수행(ComponentDidMount+ComponentDidUpdate)
useEffect(()=>{},[실행조건])
useEffect 처음 렌더링될 때만 실행하고 싶으면 []을 특정 값이 업데이트될 때만 실행하고 싶을 때는 두번째 파라미터 배열안에 원하는 값을 넣어주면 된다.
컴포넌트 언마운트 또는 업데이트 직전에 실행하고 싶으면 뒷정리 함수를 반환해준다.
뒷정리 함수도 마찬가지로 언마운트에만 실행하고 싶을때는 두번째 파라미터에 []을 넣어 활용가능

3. useReducer

useState보다 다양한 상태를 관리 할때 사용하는 Hooks 기술
아직은 어렵다. 추후 다시 정리해야겠다.

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

const getAverage = numbers => {
  //useMemo 가 없다면 .. input 창이 바뀔때마다 getAverage 가 랜더링 될것이다.
  console.log("평균값 계산 중..");
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
};

const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState("");

  const onChange = useCallback(e => {
    setNumber(e.target.value);
  }, []); //컴포넌트가 처음 렌더링될 때만 함수 생성
  const onInsert = useCallback(() => {
    const nexList = list.concat(parseInt(number));
    setList(nexList);
    setNumber("");
  }, [number, list]); //number 혹은 list가 변할때만 함수 생성

  //useMemo
  const avg = useMemo(() => getAverage(list), [list]);
  return (
    <>
      <input value={number} onChange={onChange}></input>
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => {
          return <li key={index}>{value}</li>;
        })}
      </ul>
      <div>
        <b>평균값:</b>
        {/* {getAverage(list)} */}
        {avg}
      </div>
    </>
  );
};

export default Average;