Hooks

Hooks

React의 상태 관리 및 생명주기 처리 도구 (컴포넌트의 상태 관리 및 생명주기 관련 개념)

 

https://ko.reactjs.org/docs/hooks-state.html Hook은 React 16.8버전에 새로 추가되었다

Hook 은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있다

Hook 의 개요 함수형 컴포넌트는 렌더링할 때마다 내부의 것들을 기억하지 못한다

다시 생성, 초기화 해야한다

(변수, 함수 등) 내부의 것들을 유지하기 위해서 hook이 등장했다

 

useState	컴포넌트 내에서 상태 값을 관리
useRef	참조값(Ref) 관리, DOM 요소 직접 접근
useEffect	사이드 이펙트(부수효과) 처리 및 생명주기 관리
useMemo	계산된 값의 메모이제이션(캐싱) ;컴포넌트 성능 최적화
useReducer	컴포넌트 외부에서도 상태 관리

Hook	주요 사용 사례	의존성 배열	특징 및 장점
useState	카운터, 입력 값, 폼 데이터 등	없음	간단한 상태 관리에 유용, 상태 변경 시 컴포넌트 재렌더링
useRef	포커스 설정, 스크롤 제어, 이전 값 저장	없음	리렌더링 없이 값을 유지, DOM 조작에 유용
useEffect	데이터 fetch, DOM 조작, 외부 이벤트 처리	있음 (의존성 값이 변경될 때 실행)	생명주기 이벤트 관리, 외부와의 상호작용 시 사용
useMemo	복잡한 연산 최적화 (예: 리스트 필터링, 정렬 등)	있음 (의존성 값이 변경될 때 재실행)	값이 변경될 때만 재계산하여 성능 최적화, 불필요한 연산 방지
useReducer	여러 상태의 복합 로직을 처리해야 할 때	없음	상태 로직을 분리하고 명확하게 정의, 복잡한 상태 관리에 적합

의존성 배열(Dependency Array) 개념

• useEffect나 useMemo의 두 번째 인수로 전달되는 배열
• 이 배열 안에는 상태 변수나 props가 들어가며, 해당 값이 변경될 때만 해당 훅이 실행
• 만약 배열이 비어 있으면([]), 컴포넌트가 처음 렌더링될 때만 실행

 

 

 

React Developer Tools 설치

웹 스토어에서 React Developer Tools (Chrome에 추가)

Using the State Hook – React

A JavaScript library for building user interfaces

이렇게 바뀜

 

 

---

 

useState

1. 개념

값이 유동으로 변할 때 상태 관리

const [상태데이터, 상태데이터의 값을 변경해주는 함수] = React.useState(초기값);

 

2. 예제

• day02_vite 예제

Forder	day02_vite
File	App.jsx
Folder	src/components
File	Test03.jsx	useState
	Test04.jsx	useState	prev : 이전 상태 값(previous state)을 의미하는 매개변수 React의 useState 에서 상태를 업데이트할 때, 함수형 업데이트를 사용하면 이전 상태를 안전하게 참조하여 새 상태를 계산 가능
	Test05.jsx	useState	React의 useState 를 활용한 숫자 카운터 컴포넌트
	Test06.jsx	useState	React와 useState 를 활용해 사용자 리스트를 표 형식으로 출력하는 컴포넌트 사용자 정보: 번호(seq), 이름(name), 나이(age), 주소(addr), 동의 여부(done)
Folder	src/components/cat
File	Cat.jsx CatData.jsx CatList.jsx CatItem.jsx
Folder	src/components/sungJuk
File	SungJuk.jsx SungJukData.jsx SungJukList.jsx SungJukItem.jsx		테이블 형식으로 출력 seq, name, kor, eng, math, tot, avg DTO ; 총점과 평균 계산
Folder	css
File	Test06.css
	reset.css style.css

 

• day03 예제

Forder	day03
File	App.jsx
Folder	src/components
File	Test01.jsx	로그인, 초기화 비밀번호 6자리	const onInputId = (e) => {}; 개인 모달
	Test02.jsx	checked	개인 모달
	Test03.jsx Test03Modal.jsx	모달, 팝업	상태변수와 상태변수의 값을 변경시키는 함수는 같은 곳에 있어야 한다
	Test04.jsx Animal.jsx Display.jsx
	Test05.jsx Name.jsx Fruit.jsx Output.jsx
	Test06.tsx	DTO , 초기화 useRef
	Test07Main.jsx Test07Input.jsx Test07Print.jsx Test07Output.jsx	DTO	이름 나이 주소 핸드폰
	Test08Gallery.jsx Test08Data.jsx Test08View.jsx Test08Big.jsx Test08List.jsx Test08Item.jsx	public/image 활용	Test08Data 의 image 경로 : ./image/~~.png' ; public/image Shepherd Retriever Sheepdog Husky Bulldog ShihTzu Poodle Maltese public에 있는 이미지 폴더는 index.html를 기준으로부터 상대경로를 지정해야 한다 index.html 안의 <div id="root"></div> 이곳으로 렌더링 되기 때문이다. 단 ./ 를 생략해서는 안 된다. src 안에 있는 이미지 파일 처리는 참조변수를 사용한다. import 참조변수 from '이미지경로';
	Test09.jsx	src/image 활용	src 안에 있는 이미지 파일 처리는 참조변수를 사용 형식 import 참조변수 from '이미지 경로';
	Test10.jsx	onInput onAdd setList useRef	이름 아이디 입력, 밑에 결과 띄우기
	Test11.jsx	check 전체 체크, 개별 체크	onChk
Folder	src/components/css
File	Test01.css
	Test03.css
	Test07.css
	Test08.css

 

 

 

 

 

useRef

직접 DOM 요소에 접근해야 할 때, useRef 훅을 사용하여 DOM 요소에 직접 접근이 가능

리렌더링을 하지 않는다

useRef Hook 이 반환하는 ref 객체를 이용해서 자식 요소에 접근이 가능

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환

 

Ref를 사용해야 할 때

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때
• 애니메이션을 직접적으로 실행시킬 때
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때

 

public에 있는 이미지 폴더는 index.html를 기준으로부터 상대경로를 지정해야 한다

index.html 안의 <div id="root"></div> 이곳으로 렌더링 되기 때문

 

src 안에 있는 이미지 파일 처리는 참조변수를 사용한다

 import 참조변수 from '이미지경로';

 

event.preventDefault()

a 태그는 href를 통해 특정 사이트로 이동하거나,

submit 태그는 값을 전송하면서 창이 새로고침(reload) 된다.

이런 태그의 이벤트 기능을 preventDefault를 통하여 동작하지 않도록 막을 수 있다

 

Forder	day03
File	App.jsx
Folder	src/components
File	Test06.tsx	DTO , 초기화 useRef
	Test10.jsx	onInput onAdd setList useRef	이름 아이디 입력, 밑에 결과 띄우기

 

 

useEffect

 useEffect는 렌더링, 혹은 변수의 값 혹은 오브젝트가 달라지게 되면, 그것을 인지하고 업데이트를 해주는 함수이다

useEffect는 콜백 함수를 부르게 되며, 렌더링 혹은 값, 오브젝트의 변경에 따라 어떠한 함수 혹은 여러 개의 함수들을 동작시킬 수 있

렌더링 후 useEffect는 무조건 한번은 실행된다

 

[형식]

컴포넌트가 나타날 때 딱 1번만 함수가 호출

useEffect( () => {

}, [ ]);

 

특정 props가 바뀔 때마다 함수가 호출

useEffect( () => {

}, [ props ]);

 

useEffect 라는 Hook을 사용하여 할 수 있는 3가지 동작

• 컴포넌트가 마운트 됐을 때 (처음 나타났을 때)
• 언 마운트 됐을 때 (사라질 때)
• 업데이트될 때 (특정 props가 바뀔 때)

 

[ ]로 설정하면 컴포넌트가 처음 나타날 때만 useEffect에 등록한 함수가 호출 한다

 

useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup 함수라고 부른다

cleanup 함수는 useEffect 에 대한 뒷정리를 해준다고 이해하면 되는데, [ ] 안에 내용이 비어 있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출된다

 

//e.clientX, e.clientY

//브라우저에서 사용자에게 웹페이지가 보여지는 영역을 기준으로 좌표를 표시

 

함수형 업데이트

비동기적인 방법을 해결하기 위해서 우리는 함수형 업데이트(functional update)를 사용할 수 있다

 즉 setState에 값을 그대로 전달하는 것이 아니라 함수를 전달하는 것이다

 

 

실행하면 콘솔창에 UseEffect 두 번 실행 해결

index.js

<React.StrictMode> 부분을 주석으로 처리

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render( 
// <React.StrictMode> 
<App /> 
// </React.StrictMode> );

 

 

React의 Strict Mode 

• StrictMode : 리액트에서 제공하는 검사 도구
• 개발 모드일 때 디버그를 통하여, 이 태그로 감싸져있는 App 컴포넌트와 자손까지 검사하는 것이다. 안전하지 않은 생명 주기를 가진 컴포넌트, 권장되지 않은 부분, 배포 후 문제가 될 수 있는 부분들까지 미리 확인하는 것이다
• creat-react-app으로 앱을 만들었기 때문에 기본적으로 생성되어 랜더링을 두 번이나 했었던 것이다

 

 

 

useMemo

• useMemo는 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 react hooks
• useMemo에서 Memo == Memoization

 

memoization

• 기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법

 

 

 

useReducer

1. 개념

• 컴포넌트와 상태 업데이트 로직을 분리하여 컴포넌트 외부에서도 상태 관리
• 현재 컴포넌트가 아닌 다른 곳에 state를 저장하고 싶을 때 유용하게 사용

 

2. 형식

const [state, dispatch] = useReducer(reducer, initialState);

state	현재 상태
dispatch	action을 발생시키는 함수
reducer	state와 action를 받아 새로운 state를 반환하는 함수
initialState	초기값