[새싹(SeSAC) 프론트엔드] day36 221205

Hooks

: 리액트 버전 16.8에 새로 도입된 기능

- 함수형 컴포넌트에서 상태 관리를 할 수 있는 기능 제공 

 

◼️ 종류

useState

useEffect

useRef

useReducer

useMemo

useCallback

 

📍useState()

const [state, setState] = useState(초기값);

//예시
const [number, setNumber] = useState(3);
// number =3
setNumber(6) // number = 6 

- 가장 기본적인 Hook

- 함수형 컴포넌트가 가변적인 상태를 지닐 수 있도록 해 줌 

 

 

(*) 실습 1 - 숫자 증감 시키기

Counter.jsx

import { useState } from 'react';

const Counter = () => {
  const [value, setValue] = useState(0)
  function numUp(){
    setValue ( value + 1 )
  }
  function numDown(){
    setValue ( value - 1 )
  }
  return (
    <div> 
      <div>{value}</div>
      <button onClick={numUp}>+</button>
      <button onClick={numDown}>-</button>
      
    </div>
  );
};

 

 

 

(*) 실습 2 - 이름 추가하기 

import { useState } from "react";

const AddName = () => {
  const [names, setNames] = useState(["영희", "리액트"]);
  const [input, setInput] = useState("");

  function InputChange(e) {
    setInput(e.target.value);
  }
  function uploadInput(e) {
    e.preventDefault();
    setNames([...names, input]);
    setInput("");
  }
  return (
    <form onSubmit={uploadInput}>
      <input type="text" onChange={InputChange} />
      <button type="submit">추가</button>
      <div>
        {names.map((name, idx) => (
          <p key={idx}>{name}</p>
        ))}
      </div>
    </form>
  );
};

 

setState(data, callback) 

 

- setState()로 전달하는 상태는 상태 객체의 일부분만 갱신한다 

 ➡️ 상태 객체에 3가지 항목이 있으며 그 중 하나만 변경할 때, 나머지 둘은 그대로 유지되어 바뀌지 않는다.

- 새로운 상태에 의존하는 경우, 콜백함수를 사용해야 새로운 상태가 적용된 후에 필요한 작업을 수행할 수 있다.

- setState()는 render()를 실행시킨다 

  

* JSX에서 값을 출력할 대는 중괄호{}를 사용한다. 

 

 

◼️성능최적화

 - useState() 함수의 인자에 초기값을 지정한 경우 

    : state값이 업데이트 될 때마다 초기값이 계속해서 호출됨

    : 만약 초기값에 복잡한 계산식이 있다면 성능 저하 문제가 발생함 

 

 

// const [names, setNames] = useState(testWork());
const [names, setNames] = useState(() => testWork());

- callback함수로 실행한다면 값이 바뀔 때마다 실행되지 않고 처음 한 번만 실행됨 

 

 

📍useEffect()

useEffect(() => {
    //작업
}, [value] );

- 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정해주는 Hook

 

◼️ 매개변수에 콜백함수만 있는 경우 

➡️ 렌더링될 때 마다 '작업'이 실행됨 

 

◼️ 매개변수에 콜백함수, 빈배열이 있는 경우 

➡️ [] 배열안에 값이 없는 경우 최초에 한 번만 '작업'이 실행됨 

 

◼️ 매개변수에 콜백함수, 배열[value]이 있는 경우 

➡️ [value]이 있는 경우 1️⃣ 컴포넌트가 처음 렌더링 될 때 2️⃣ value 값이 변경되었을 때 '작업'이 실행됨 

 

매개변수  - 배열은 option 값	'작업'이 실행되는 경우
콜백함수	- 처음 렌더링 될 때
콜백함수, 빈배열	- 최초에 한 번만 실행
콜백함수, 배열	1. 처음 렌더링 될 때  2. 배열안의 값이 변경될 때

** 매개변수가 1개일 때는 useEffect()를 사용하는 의미가 없다

 

 

- 최초에 한 번 실행하게 하고 싶은 작업을 작성할 때 주로 사용  ex. fetch()를 이용한 네트워크 통신 연결 

mount : 화면에 처음 렌더링된 상태

 

 

배열값없이 useEffect를 사용한 경우 렌더링 될 때마다 console.log가 계~속 실행된다 

 

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

 

 

 

 

📍cleanup

- 컴포넌트가 update되기 직전 또는 unmount 되기 직전에 어떠한 작업을 수행하고 싶다면 뒷정리(cleanup)작업을 해줘야 함

- useEffect() 함수 내부에서 return 함수를 반환하면 됨 

 

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

 

 

📍useRef()

- 컴포넌트 내부에서 사용되는 변수를 저장하는 Hook

 

const ref = useRef(value);
//useRef() 함수는 value값으로 초기화된 ref객체를 반환 

 

//ref 객체 형태 
{current : value}   

 : key 값이 ❗️curent❗️

 

//ref값 변경
ref.current = "hello"

: 객체이므로 value값을 변경하기 위해서 [ 객체이름.key = 바꾸는값 ] 형식으로 사용해주면 됨 

 

 

◼️ 특징

- 컴포넌트가 재렌더링되어도 저장된 변수 값을 유지하여 불필요한 렌더링을 방지할 수 있음 

- 특정 DOM 요소에 접근 가능 

 

 

(*)실습

UseRefComponent.js

import { useRef } from "react";

const UseRefComponent1 = () => {
  const ref = useRef("안녕하세요");
  console.log("변경 전 ref 값 : ", ref.current);

  ref.current = "잘가";
  console.log("변경 후 ref 값 : ", ref.current);
  return <div></div>;
};

 

 

 

📍useState() vs useRef()

import { useRef, useState } from "react";

const UseRefComponent2 = () => {
  const [count, setCount] = useState(0);
  const ref = useRef(0);

  function addStateHandler() {
    console.log("state값 변경");
    setCount(count + 1);
  }

  function addRefHandler() {
    ref.current = ref.current + 1;
    console.log("ref값 변경", ref.current);
  }
  return (
    <div>
      <h1>State 값 : {count}</h1>
      <button onClick={addStateHandler}>state값변경</button>
      <h1>Ref 값 : {ref.current}</h1>
      <button onClick={addRefHandler}>ref값변경</button>
    </div>
  );
};

 

 

 

useState에서 값이 바뀌면 리렌더링이 됨

하지만 ref의 값을 바꾸어도 리덴더링 되지 않음 

 

 

useRef는 값을 변경하지만 화면에 렌더링을 하지는 않음 

➡️ 바뀐 ref값을 바꾸려면 state를 이용하여 렌더링을 해줘야 함 

 

- 화면이 unmount되면 ref값이 초기화됨

- 컴포넌트 내부에서 자주 값이 바뀌지만 화면 출력에 영향을 주지 않는 값이 있다면 useRef로 사용

 

 

react에서는 일반변수를 쓸 수 있지만 잘 쓰지 않음 ! 

 

◼️ state로 리렌더링 했을 때 

- ref값은 저장된만큼의 값으로 바뀌게 됨

- 변수값은 바뀌지 않음 

 

 

<react에서 변수 만드는 방법> 

1️⃣ 일반변수 - 값은 바뀌어도 화면이 렌더링되는 순간에 다시 초기값으로 돌아가게 됨 

-그래서 일반변수를 사용할 일이 거의 없음 일반변수는 렌더링할때마다 값이 초기화되므로 

2️⃣ useState() - 값이 바뀔 때마다 재렌더링

3️⃣ useRef() - 값이 바뀌어도 재렌더링 되지 않음 

 

 

📍useRef로 DOM 객체에 접근하기

- DOM태그 안에 ref를 넣어주면 됨 

import { useEffect, useRef  } from "react";

const UseRefComponent3 = () => {
  const inputRef = useRef();

  useEffect(() => {
    console.log(inputRef);

    //input에 focus적용
    inputRef.current.focus();
  }, []);
  return (
    <div>
      입력 : <input type="text" ref={inputRef} />
    </div>
  );
};

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 8주차 블로그 포스팅(월)