React

useState

useState 를 통해 컴포넌트에서 바뀌는 값 관리

• Hooks 종류 중 하나

• 리액트 패키지에서 useState 함수 불러오기

  • import React, { useState } from 'react'

• const [현재 상태, Setter함수] = useState() 형식

• Setter 함수는 파라미터로 전달 받은 값은 최신의 상태

• 객체 수정 시 직접 수정이 아닌 새로운 객체를 만들어서 변화를 주고, 그 상태를 이용

  • ❌ inputs[name] = value;

  • ⭕
    setInputs({
      ...inputs,
      [name]: value
     });

useEffect

마운트/언마운트/업데이트 시 할 작업 설정

• 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)
• 참조하는 deps가 변경되면 로직이 실행되는 side effect를 발생

useEffect(() => { 
  //마운트
  return () => { 
    //언마운트
  //useEffect 반환되는 함수는 cleanup 함수 (뒷정리)
  //deps가 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출
  };
}, [deps]);

• deps에 특정 값 넣게 되면

  • 컴포넌트가 처음 마운트 될 때에도 호출
  • 지정한 값이 바뀔 때에도 호출
  • deps 안에 특정 값이 있다면 언마운트시에도 호출
  • 값이 바뀌기 직전에도 호출

• deps에 파라미터를 생략한다면

  • 컴포넌트가 리렌더링 될 때마다 호출

• deps가 빈배열인 경우

  • 처음에만 함수 호출

• useEffect 안에서 사용하는 상태나, props 가 있다면

  • useEffect의 deps 에 넣기(최신의 상태 가르키도록)

• useEffect에 대한 뒷정리는 cleanup 함수 사용

  • useEffect 안에서 return 할 때 실행
  • useEffcet의 뒷정리를 한다. -> state에서 값 지울때 실행

• 마운트 시 작업

  • props 로 받은 값을 컴포넌트의 로컬 상태로 설정
  • 외부 API 요청 (REST API 등)
  • 라이브러리 사용

• 언마운트 시 작업

  • 라이브러리 인스턴스 제거

useReducer

상태 업데이트 로직 분리

• 상태 업데이트 로직을 컴포넌트 바깥에 작성 하거나, 다른 파일에 작성 후 불러와서 사용이 가능
• reducer(state, action)
  • 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수
  • 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태
  • action 은 업데이트를 위한 정보
• const [state, dispatch] = useReducer(reducer, initialState) 형식
  • state 는 우리가 앞으로 컴포넌트에서 사용 할 수 있는 상태
  • dispatch 는 액션을 발생시키는 함수
  
  
  
  

VELOPERT님 블로그를 통해 공부한 내용을 정리하였습니다!