[React] ReactHook

ReactHook

저번 학습에서는 함수형 클래스형 컴포넌트의 구조를 파악하고 모양을 확인했다면,
이번 시간에는 그 틀안에서의 리액트를 사용함에 있어서 가장 중요하다고 생각하는 ReactHook에 대해서 알아보려고 한다.

그 중에서도 ko.reactjs.org 홈페이지에 나오는 기본 훅들을 간단하게 설명 하고 넘어갈 생각이다.

Hook은 기존 Class 바탕의 코드를 작성할 필요 없이 state(상태 값)과 여러 React의 기능을 편리하게 사용하게 해주는 기능이다.

1. useState (StateHook)

useState는 Hook 개념에서 가장 처음 배우고 접하게 되는 함수다.

리액트 컴포넌트 안에서 state, 상태들을 관리해야하는 일이 있을때, class 없이 간편하게 사용 할 수 있도록 한다.

함수형 컴포넌트에서 가변적인 상태를 관리할때 사용한다.

import에 useState를 불러줘야 해당 hook을 실행 시킬 수 있다.

useState는 상태 유지 값과 그 값을 갱신하는 함수를 반환해준다.

최초로 렌더링을 할때, 반환된 (count) 의 값은 useState(값) 과 동일하다.
(setConut)는 state를 상태를 설정할때 사용하게 됩니다. 새로운 state 값을 받아 변경 해준다.

예제1) useState 개념 이해를 하기 가장 좋은 방법

const [count , setCount ] = useState(0) <-- 초기 스테이트 값을 0으로 설정한다.
useState(0) 이면 count = 0 이다.

setCount() 함수에게 파라미터를 넣어서 호출하면 파라미터안에 들어있는 값으로 변경 되게 되고, 화면에 출력하게 되는 개념이다.

함수형 컴포넌트 에서 동적인 상태 관리를 하기 위해 클래스 형태로 변환 하지 않아도 돠고 간단하게 값을 출력 시킬 수 있는 가장 좋은 예시였다.

2. useEffect (EffectHook)

컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다.

기본 동작은 브라우저 화면에서의 모든 렌더링이 완료 된 후 실행하는것 이지만
특정 상황 값이 변경되거나 혹은 그 안에서만 실행이 되는 것도 가능하다.

import에 useEffect를 불러줘야 해당 hook을 실행 시킬 수 있다.

컴포넌트가 mount , unmount , update 등의 특정 작업을 처리할때 사용 하며,
useEffect는 function() 형식의 모양이고, [] 배열안에 검사하고자 하는 혹은 액션을 실행하고자 하는 값을 집어넣거나, 빈 배열을 상태로 둔다.

1. 빈 배열의 경우에는 처음 한번만 실행 하고싶을때 사용 하게 된다.
2. 배열을 넣지 않은 경우 컴포넌트가 리렌더링 될때마다 실행이 되게 된다.
3. 배열 안에 값(props,state)을 집어 넣으면 특정 상태가 바뀔때마다 실행 하게 된다.

예제2-1) 모든 렌더링이 이루어 진 후에 작동이 되는 형식이기에 가장 마지막에 출력이 되는 특징이 보여진다. (비동기적)

 

예제2-2) useEffect 개념 이해를 하기 가장 좋은 방법

useEffect를 응용하여 1초의 한번씩 카운트가 자동으로 작동이 되게 만들었다.
useEffect가 많이 쓰이는 경우는 Side-Effect를 처리하는데 사용 된다.
함수에서 전역변수의 값을 변경하거나 혹은 함수 외부에 존재하는 버튼의 텍스트를 변경하거나, 파일을 쓰거나, 쿠키 저장, 네트워크를 통해 데이터를 송신하는 것 등이 있다.

3. useContext(contextAPI)

3-1 리액트의 기본적인 state 전달 구조

리액트는 싱글페이지 어플리케이션이라 최상위 컴포넌트가 존재 한다.
그리고 컴포넌트 단위로 틀을 쪼개서 작업을 하기 때문에 값을 전달함에 있어서도
상위에서 한단계씩 아래로 사용하지 않는 데이터라도 전달 전달하여 적용 시켜줘야 한다.

간단한 작업이나 데이터를 가볍게 받을 수 있는 경우에는 위 그림 같은 전달 구조로 사용해도 되지만 하위 컴포넌트 페이지가 점점 많아 질수록 복잡해지고 반복작업이 많이 생기는 경우들을 볼 수 있다.

데이터 전달구조 그림설명

App.js (상위 컴포넌트)

Test.js (하위 컴포넌트)

출력화면

3-2 리액트의 contextAPI state 전달 구조

context에 다른 컴포넌트에게 전달해주고 싶은 데이터들을 넣어두고 그 데이터를 사용 하고 싶은 컴포넌트를 연결하여 사용 할 수 있다.
연결을 하게 되면 연결한 컴포넌트 하위 컴포넌트들은 전부 데이터를 사용 할 수 있다.

기존props보다 더 간단하게 데이터들을 전달하고, 데이터값을 재사용하거나 접근을 하게 만들어주는 hook 기능이 context 라는 기능이다.

데이터 전달구조 그림설명

Context.js (context 컴포넌트 생성)

App.js (상위 컴포넌트)

Test.js (하위 컴포넌트)

출력화면

해당 방식으로 하게 되면 방대한 데이터 값을 넘겨줘야 하거나 특정 위치 필요한 부분에서 데이터를 받거나 할때, 더욱 간편하게 사용 할 수있기 때문에 사용 되는 방식이다.

여기 나온 3가지 Hook을 제외하고도 더 많은 Hook들이 있고, 사용할때 간간히 다시 정리를 해보는 방식으로 써봐야겠다.