[React] 훅(Hook) - useState, useEfffect

✅ React Hooks란?

 

 

1. 리액트 훅(Hook)

 

1) 클래스형 컴포넌트(📌참고)에서 이용하던 코드를 작성할 필요 없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리라고 할 수 있다. 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하다.(클래스형 컴포넌트의 문제를 해결하기 위해 나온 것이 훅)

 

2) 함수형 컴포넌트들은 method의 개념이므로, 리렌더링이 되더라도 render()를 제외한 나머지 method 및 state는 그대로 보존되어 있다.

 

 

📌 클래스형 컴포넌트의 단점

• 클래스형 컴포넌트에서 로직 재사용시에 사용한느 고차컴포넌트, 렌더 속성 값 패턴은 리액트 요소 트리를 깊게 만든다. (너무어렵다) 따라서, 성능에 부정적인 영향과 개발 시 디버깅이 힘들어지는 문제점이 발생
• 서로 연관성없는 로직들을 하나의 생명주기에서 작성해야 하는 경우가 발생, 코드 최적화의 어려움
• JS 클래스 문법, this에 대한 이해가 필요 React 진입장벽이 높아짐

 

 

2. 훅(Hook)의 규칙

 

1) 최상위에서만 훅(Hook)을 호출해야 한다.

• 반복문이나 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다.
• 리액트 훅은 호출되는 순서에 의존하기 때문에 조건문이나 반복문 안에서 실행하게 될 경우 해당 부분을 건너뛰는 일이 발생할 수도 있기 때문에 순서사 꼬여 버그 발생 우려가 있다.
• 때문에, useState나 useEffect로 여러번 호출되는 경우에도 상태 관리를 유지할 수 있게 된다.

 

2) 리액트 함수 내에서만 Hook을 호출해야 한다.

• Hook은 일반적인 JS 함수에서는 호출하면 안된다.
• 함수형 컴포넌트나 Custom Hook에서는 호출 가능하다.

 

 

📖 자주 사용하는 React Hook 종류

 

📌 useState

 

 

 - useState는 상태를 관리하는 훅으로 다음과 같은 특징을 가진다.

 

• 함수형 컴포넌트 안에 useState를 추가하여 사용한다.
• 현재 상태를 나타내는 state값과 이 상태를 변경하는 setState값을 한 쌍으로 제공한다.
• state는 초기 값을 설정할 수 있으며, 초기값은 첫 렌더링 떄 한번 사용된다.
• state는 객체일 필요 없이 문자열, 숫자, boolean, array, null, object 등의 여러가지 다양한 값을 넣을 수 있다.  

 

 

useState 예시

 

 

 

📌 useEffect

 

- useEffect는 기존 클래스형 컴포넌트에서 사용했던 componentDidMount, componentDidUpdate, componentWillUnmount를 하나의 API로 통합한 것으로 다음과 같은 특징을 가진다. 여기서 말하는 Effect는 명령형 함수 또는 타이머, 로깅, 변형, sideEffect 등을 발생 시키는 함수를 말한다. 즉, 어떤 Effect를 발생시키고 싶을 때 사용한다.

 

 

• useEffect는 기본적으로 useEffect(function, deps(📌참고))의 형태를 사용한다.  
• function에는 실행시킬 함수를 넣고 deps에는 의존성 배열을 담는다.
• 의존성 배열에 어떤 것이 담기느냐에 따라 부수적인 효과로 함수가 실행된다.
• 의존성 배열 값 없이 useEffect를 실행시키게 되면 페이지가 렌더링될 때마다 데이터를 불러온다.

 

 

📌deps[ ]를 넣어주는 이유 

함수 안에서 사용(의존) 하는 state 혹은 props 가 있다면 반드시 deps 배열안에 포함시켜야 된다는 것
만약에 deps 배열 안에 함수에서사용하는 값을 넣지 않게 된다면,함수 내에서 해당 값들을 참조할 때

가장 최신 값을 참조 할 것이라고 보장 할 수 없다. props 로 받아온 함수가 있다면, 이 또한 deps 에 넣어주어야 한다.

-> [deps] 참조 값이 바뀐다면? 함수도 다시 재생성. 즉, 주소 값이 바뀜

 

 

 

useEffect 예시

 

버튼을 클릭했을 때 상태 값을 증가시키는 코드 입니다. 버튼을 누르면 다시 렌더링되고,

useEffect 훅에 입력된 함수가 호출된다.

 

 

---

 

 

📖 useEffect에서 API 호출

 

- getUserAPI라는 비동기 통신 메서드를 이용한다.

useEffect 함수는 두 번째 매개변수로 의존성배열([ ])을 받는다. useEffect 훅에서 API 통신을 하면 렌더링할 때마다 호출되기 때문에 불필요하게 많이 동작하게 된다. 때문에 useEffect 함수의 두 번째 매개변수로 배열을 입력하면, 해당 배열의 값이 변경되는 경우에만 함수가 호출된다. 위에서는 userId가 변경되는 경우에만 호출됨.

 

📖 이벤트 처리 등록 및 해제

- 클래스형 컴포넌트에서 이벤트 처리 등록과 해제를 작성하는 경우, componentDidMount에서 등록한 뒤 componentWillUnMount에서 해제한느 코드를 사용한다. 등록 이후에 해제를 깜빡하고 잊어버리는 경우가 발생한다.

이에 useEffect 훅을 이용하면 등록과 해제를 모두 같이 관리할 수 있다.

 

👉 바로 return에 해제하는 함수를 등록하는 것

 

 

 

return 하는 함수는 언마운트(📌) 되거나 첫 번째 매개변수로 입력된 함수가 호출되기 직전에 호출된다. 따라서, 첫 번째 매개변수로 입력된 함수가 반환한 함수는 반드시 호출된다.

 

 

📌 마운트: 마운트(Mount)는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미한다.

📌 언마운트: 언마운트(UnMount)는 컴포넌트가 DOM에서 제거되는 것을 언마운트(UnMount)라고 한다.

 

 

다음에는 아래와 같이 다른 종류의 훅들을 공부할 예정이다.

 - useContext: 컴포넌트를 중첩하지 않고 전역 값을 쉽게 관리

- useMemo: 연산한 값 재사용

- useRef: DOM 선택, 컴포넌트 안에서 조회, 수정할 수 있는 변수 관리

- useCallback: 특정 함수 재사용

- useReducer: 복잡한 컴포넌트들의 state를 관리에서 조회/수정할 수 있는 변수 관리)