React03

useMemo와 useCallback

useMemo

• 연산된 값(결과)를 반환하여 재사용 할 수 있게 해주는 Hooks함수

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

const Memo = () => {
  // state값을 정해준다.
  const [color, setColor] = useState("red");
  // 아래의 변화하는 변수를 보여주기 위해 state를 만듦
  const [text, setText] = useState("");
  // 구조분해 할당된 값으로 다음과 같이 콘솔에 출력하면 객체형태의 key : value 값이 나온다.
  console.log({ color });

  // 확인 버튼을 누르면 setState값이 변경되는 함수를 만들자
  const changeColor = () => {
    if (color === "red") {
      setColor("blue");
    } else {
      setColor("red");
    }
  };
  // 이미 연산된 값을 반환 시켜줌. 사용하지 않아도 연산했던 값을 반환하기에 사용 가능
  // []안에 변수를 넣어 해당 변수의 변화를 인지함.
  const getColor = useMemo(() => {
    console.log(`색은 ${color}`);
  }, [color]);
  // 만약 변하지 않는 변수를 가지고 있다면(text), 연산된 값도 없음..
  const getText = useMemo(
    () => console.log(`텍스트는 실행하지 않습니다.`),
    [text]
  );
  // 리턴 값에는 JSX문법이 들어간다.
  return (
    <>
      <div>useMemo</div>
      {/* 위에서 보았던 객체형태를 이용하여 스타일을 적용하였다. */}
      <input readOnly type="text" value={color} style={{ color }}></input>
      <button onClick={changeColor}>확인</button>
    </>
  );
};

export default Memo;

useCallback

• 특정 함수를 새로 만들지 않고 재사용 할 수 있게 해주는 Hooks함수

import React, { useCallback, useState } from "react";
const Callback = () => {
  const [color, setColor] = useState("red");

  const changeColor = useCallback(() => {
    if (color === "red") {
      setColor("blue");
    } else {
      setColor("red");
    }
    console.log("색상 변경");
  }, [color]);

  return (
    <>
      <div>useCallback</div>
      {/* 위에서 보았던 객체형태를 이용하여 스타일을 적용하였다. */}
      <input readOnly type="text" value={color} style={{ color }}></input>
      <button onClick={changeColor}>확인</button>
    </>
  );
};
export default Callback;

useMemo와 사용하는 법은 동일하다.
useCallback을 사용하면 불필요한 연산을 줄이는데 0.2ms~0.3ms 이라고 한다.

사용하는 이유?

• 메모이제이션
  • 만약 어떠한 연산이나 함수가 복작하고 결과가 오래걸린다.
  • 리엑트는 상태가 바뀌는 랜더링 된다.
  • 하지만 랜더링 될 때 값이 바뀌지 않는 부분이라면 다시 실행해야 될까?
  • 그래서 값이 안바귀는 연산이나 함수를 랜더링 되더라도 재생성하지 않도록 값이나 함수를 재사용
  • 즉, 랜더링 시 필요 없는 연산의 시간을 줄여줌.

useEffect

• 마운트, 언마운트 시 특정 작업(함수 나 이벤트를 실행 할 때 사용하는 hooks함수)
• 마운트
  • 화면이 처음 랜더링 될때
• 언마운트
  • 화면이 사라질 때

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

const Effect = () => {
  // state 만들기
  const [color, setColor] = useState("red");
  // useCallback 함수 만들기
  const ChangeColor = useCallback(() => {
    setColor("blue");
  }, []);

  // 처음 랜더링 될 때 둘 다 실행됨.
  // 리 랜더 되는 부분이 있을 때 다시 실행됨.
  useEffect(() => {
    console.log("색이 변경되었다.");
  }, [color]);

  useEffect(() => {
    console.log("시작합니다.");
  }, []);
// 처음 랜더링될 때나 종료 될때 함수나 이벤트를 실행하고 싶으면 useEffect로 편하게 만들자
  return (
    <>
      <div>useEffect</div>
      <input type="text" readOnly value={color} style={{ color }}></input>
      <button onClick={ChangeColor}>확인</button>
    </>
  );
};

export default Effect;

state, props

• state를 변경하고 props로 넘겨주는 예제

state.js

import React, { useState } from "react";
import AddState from "./addstate";

const State = () => {
  const [state, setState] = useState([
    {
      id: 1,
      name: "김사과",
    },
    {
      id: 2,
      name: "반하나",
    },
    {
      id: 3,
      name: "두리안",
    },
  ]);

  const onRemove = (e) => {
    // e.target.value는 문자열이다. (value는 state.id가 담겨있다.)
    console.log(e.target.value);
    const removeState = state.filter((i) => i.id !== parseInt(e.target.value));
    console.log(removeState);
    setState(removeState);
  };

  const onClickEvent = (id, name) => {
    setState([...state, { id: id, name: name }]);
  };

  return (
    <>
      {/* state를 가져오는 jsx */}
      {state.map((v) => (
        <>
          {/* state의 값들을 태그로 넘기는 것은 props이다. */}
          <div key={v.id}>
            <span className="user">
              {v.id}. {v.name}
            </span>
            <button value={v.id} onClick={onRemove}>
              삭제
            </button>
          </div>
        </>
      ))}
      {/* 추가 함수와 추가되는 id를 props로 넘겨주고 addstate 컴포넌트에서 처리함 */}
      <AddState onClickEvent={onClickEvent} stateId={state.length}></AddState>
    </>
  );
};

export default State;

addstate.js

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

// props로 함수자체와 마지막 id 값을 받았다.
const AddState = ({ onClickEvent, stateId }) => {
  const userName = useRef();
  // name을 input value에서 관리된다.
  const [name, setName] = useState("");

  // 추가하는 함수, 단순히 매개변수만 넘겨주는 역할을 한다.
  const addHandler = () => {
    onClickEvent(stateId + 1, name);
    // 작성이 끝나고 name을 초기화 한다
    setName("");
    // 레퍼렌스를 사용하여 focus함수를 사용했다.
    userName.current.focus();
  };
  // 변화를 감지하는 함수이다
  const onChangeHandler = (e) => {
    // 해당 이벤트가 발생할때마다 state를 변경한다.
    setName(e.target.value);
  };
  // 초기화 하기위한 함수
  const reset = () => {
    // state를 비워 준다.
    setName("");
    // 레퍼렌스를 포커스 함수를 사용함.
    userName.current.focus();
  };
  return (
    <>
      <input
        type="text"
        value={name}
        placeholder="이름을 입력하세요"
        onChange={onChangeHandler}
        ref={userName}
      ></input>
      <button onClick={addHandler}>추가</button>
      <button onClick={reset}>리셋</button>
    </>
  );
};

export default AddState;