[Hook] useState, useEffect 상태값과 생명주기

리액트 훅은 리액트 버전 v16.8 부터 추가된 요소로 해당 버전 이후에서 사용할 수 있다

리액트 문서에서는 훅을 설명하기를 컴포넌트 사이에서 상태 로직을 재사용, 복잡한 컴포넌트의 이해가 어렵고 

혼동되기 쉬운 클래스 없이 리액트를 기능을 사용하게 하기 위해 만들어 졌다고 한다

---

# useState 

-컴포넌트에서 동적인 값을 상태(state)라고 한다. 리액트에 useState는 컴포넌트에서 상태 관리를 할 수 있다

-state의 값을 변경시킴으로써 컴포넌트를 렌더링 시킬 수 있다.

사용법

1. import : react에서 useState를 import 받는다

import {useState} from 'react';

2. 변수 선언 : state의 생성과 동시에 가져야 할 초기값을 useState함수의 인자로 넣어주면 

state와 setStae라는 두 가지 요소를 배열 형태로 리턴해준다. (함수의 이름은 상관 없지만 대게 set변수 이름으로 해준다고한다)

useState(value)에서 value는 해당 state의 초기 값으로 string, number, array, object 등 여러 타입의 값을 넣을 수 있다.

const [state, setState] = useState(value);

3. 변수 재선언 : STATE의 값을 변경하려면 setState 함수를 불러서 인자에는 변경될 값을 넣어주면 된다

setState(1); //state의 값을 1로 변경
setState(() => {}) //state의 값을 임의의 화살표 함수를 실행시켜 변경

- 위에서 말했듯이 state의 값의 변경은 컴포넌트를 렌더링 시키는데 setState 함수를 이용해서 state의 값을 변경시키면 렌더링이 일어나고 화면이 업데이트 된다

 

 

# useEffect

useEffect()함수는 React component가 렌더링 될 때마다 특정 작업(Side effect)을 실행할 수 있도록 하는 리액트 Hook이다. 여기서 Side effect 는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 뜻한다.

이러한 기능으로 인해 함수형 컴포넌트 에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 되었다.

사용법

useEffect(function, deps);

@ function : 실행하고자 하는 함수

@ deps : 배열형태, function 을 실행시킬 조건 / deps에 특정값을 넣게 되면 컴포넌트가 mount될 때, 지정한 값이 업데이트 될 때 useEffect를 실행한다. deps(dependency)는 react.js가 지켜보아야 하는 것들을 의미

 

-deps 배열에 여러가지 useState를 넣으면 그 중 하나라도 변화가 일어나면 첫번째 인수의 함수를 실행시킬 수 있다.

-deps 가 없는 경우는 [ ]만 표기하며 이 상태는 react.js가 지켜볼 대상이 없기 때문에 코드가 렌더링 될 때 한번만 실행된다

-useEffect는 react.js가 동작하는 관점에서 말하면 방어막 역할을 한다. 언제 코드를 실행할 지 선택권을 가질 수 있고 자동으로 실행되면 안되는 함수들을 사전에 막을 수 있기 때문

-첫번째 인수인 함수를 끝낼 때 동작을 확인하기 위해서는 useEffect의 첫번째 인자 함수에 return을 만둘어 주면 된다.(주로 필요하지 않은 기능)

 

mount / unmount

@ component mount : DOM 객체가 생성되고 브라우저에 나타나는 것 / 컴포넌트 생성부터, 최초 렌더링 까지의 과정 

@ component unmount : 컴포넌트가 DOM에서 제거 되는 것 / 화면의 렌더링된 컴포넌트를 삭제하기 까지와 과정 

 

cleanUp 함수

-useEffect안에서 함수를  반환할 수 있는데 이를 cleanUp 함수라고 한다

-useEffect의 뒷 정리를 한다  →  state에서 값 지울 때 실행됨

-deps가 비어있는 경우에는 컴포넌트가 사라질 때 cleanup함수를 호출한다