23.06.20) React Hooks (1)- useState, useEffect

🤓오늘 공부한 내용

📌useState

• 기본 적인 hook
• 함수형 컴포넌트 내에서 가변적인 상태를 갖게 함
• 형태 : const [state, setState] = useState(초기값)

    ⇒ [state, setState] 는 useState가 return하는 값이 배열이고, 그 배열을 구조분해할당으로 받은 것

 

👉setState를 사용하는 방식

// 기존에 사용하던 방식
setState(number + 1);

// 함수형 업데이트 
setState(() => {});

 

▷함수형 업데이트 방식

   ( )안에수정할 값이 아니라, 함수를 넣을 수 있다.

   그리고 그 함수의 인자에서는 현재의 state을 가져올 수 있고, { } 안에서는 이 값을 변경하는 코드를 작성

// 함수형 방식 예시)
// 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환
setState((currentNumber)=>{ return currentNumber + 1 });

 

👉두 방식의 차이점

 : 리액트에서는 렌더링을 하기 위해서 state를 파악하는데 파악하는 방법은 ‘배치업데이트’

 

1. 일반방식 사용법

<button onClick={() => {
  setNumber(number + 1); // 첫번째 줄 
  setNumber(number + 1); // 두번째 줄
  setNumber(number + 1); // 세번째 줄
 }}
>
 버튼
</button>

•  setNumber(number + 1) 를 3번 호출해도 number가 1씩 증가

▷ 배치업데이트: 한꺼번에 변경된 내용들을 모아서 한번만 반영 (명령을 하나로 모아 최종적으로 한번만 실행)

 

 

2. 함수형 업데이트 방식

<button onClick={() => {
  setNumber((previousState) => previousState + 1);
  setNumber((previousState) => previousState + 1);
  setNumber((previousState) => previousState + 1);
 }}
>
버튼
</button>

• 3번을 동시에 명령을 내리면, 그 명령을 모아 순차적으로 각각 1번씩 실행

▷ 함수형 업데이트의 인자( )에는 현재상태의 state가 들어오고 { }에는 바뀐 state를 반환한다

    그래서 순차적으로 값이 추가되서 내려오기 때문에 최신값을 유지할 수 있다.

 

🧐정리

• useState의 업데이트 방식은 2가지 방식이 있으며, 각각 다르게 동작한다.
• useState 로 원시데이터가 아닌 데이터를 변경할때는 불변성을 유지해야 한다.

 ▷ 리액트환경 안에서 렌더링이 많이 일어나는것은 좋은것이 아니다 (렌더링이 잦다 → 성능에 이슈가 있음)

    그래서 불필요한 렌더링을 피하기 위해서 한꺼번에 요청사항을 모아서

    한번만 처리하는것이 렌더링을 줄일 수 있는 좋은 방법이다.

 

📌useEffect

• 리액트 컴포넌트가 렌더링 될 때 마다 특정한 작업을 수행해야 할때 설정하는 hook
• 리액트에서 제공하는 hook이기 때문에 import 필수
• 1) 컴포넌트가 화면에 보여졌을 때
• 2) 컴포넌트가 화면에서 사라졌을 때 (return)

 

useEffect(()=> {})

 ⇒ (매개변수)로 콜백함수가 들어간다

 

👉useEffect와 리렌더링(re-rendering)

• useEffect가 속한 컴포넌트가 화면에 렌더링 될때 실행
• input이 있고 value 라는 state를 생성하여 input과 연결
• 브라우저에 input에 어떤 값을 입력할때마다 useEffect가 계속 실행

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

const App = () => {
  const [value, setValue] = useState("");

  useEffect(() => {
    console.log("hello useEffect");
  });

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  );
}

export default App;

console.log로 확인해보면 브라우저에 input에 입력할 때마다 "hello useEffect" 계속 찍히는 현상이 일어난다.

그 현상의 이유는 

1. input에 값을 입력하면 value, 즉 state가 변경된다.

2. state가 변경되었기 때문에, App 컴포넌트가 리렌더링 된다.

3. 리렌더링이 되었기 때문에 useEffect가 다시 실행되며 이 과정이 계속 순환한다.

▷ 이 문제를 해결하기 위해 의존성 배열이 필요하다.

 

 

👉의존성배열 (dependency array)

: 이 배열에 값을 넣으면, 그 값이 바뀔 때만 useEffect를 실행

useEffect(()=>{
	// 실행하고 싶은 함수
}, [의존성배열])

1. useEffect가 끝나는 부분(함수가 끝나는부분)뒤에 두번째 인자[ ]인 배열형태를 넣어준다.

2. 배열에 어떤 값이 바뀌면 함수안에 부분이 출력을 할지말지를 정한다.

3. 만약 [ ] 빈 배열을 두번째 인자로 넣었을때, 어떤 값을 입력하던지 간에 (어떤값이 변하든지 간에)

    의존성배열에는 값이 없기 때문에 어떤 스테이트가 변해도 ‘useEffect(()=> {}) ‘함수안에 값은

    처음 로딩될때만 동작한다.