React Hook : 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리라고 할 수 있는데 React 16.8버전에 새로 추가된 기능이다.
1. useState()
- useState는 state를 사용할 수 있게 하는 Hook 함수입니다.
- useState는 배열 형태로 반환되며, 첫번째 요소는 현재 state 값, 두번째 요소는 state 값을 변경하는 함수입니다.
기초 문법
Const [변수명, set함수명] = useState(초기값); - useState의 사용법
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
2. useEffect()
- useEffect는 첫번째 매개변수로 함수를 받습니다.
- useEffect는 컴포넌트가 렌더링 된 후에 실행됩니다.
- useEffect에 함수를 전달하면 컴포넌트가 업데이트 되기 전에 이전 함수가 실행되고 다음 함수가 실행됩니다.
- useEffect를 사용하면 컴포넌트가 언제 렌더링 되고, 업데이트 되는지에 대한 정보를 얻을 수 있습니다.
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
// 컴포넌트가 렌더링 된 후에 실행되는 코드
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useEffect(이펙트 함수, 의존성 배열); // 기본 문법 형식
useEffect(이펙트함수, []); // mount, unmont 시 단 한번씩만 실행하려고 할 때
useEffect(이펙트함수); // 의존성 배열을 생략할 수 있는데, 생략시 컴포넌트가 업데이트 될 때마다 호출됨.
클래스 컴포넌트에서 사용하는 생명주기를 하나로 통합해 제공
동일하게 사용 가능하다. Sideeffect 개념(주변 영향 정도, React에서 부정적 의미는 아님)
-- React Hook. 성능 최적화 --
useMemo, useCallback, useRef는 모두 성능 최적화를 위해 사용되는 Hook
3. useMemo()
- useMemo useMemo는 계산 비용이 많이 드는 함수의 결과 값을 기억하고, 이전에 계산한 결과 값을 재사용하여 성능을 최적화하는 데 사용.
- 사용법 및 기본 문법 useMemo Hook은 다음과 같은 형식으로 사용됩니다.
// 기본 문법
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
// 여기서 첫 번째 매개변수는 메모이제이션 될 함수를 가리키며, 두 번째 매개변수는 의존성 배열
의존성 배열에 지정된 값들 중 하나라도 변경될 때, 메모이제이션 함수가 다시 호출되며 새로운 값을 반환함.
Const memoizedValue = useMemo(
() => {
// 연산량이 높은 작업을 수행하여 결과를 반환
return computeExpensiveValue(의존성 변수1, 의존성 변수2);
},
[의존성 변수1, 의존성 변수2]
);
----
// 의존성 배열을 넣지 않는 경우 매 렌더링 마다 함수가 실행됨. 그래서 useMemo의 의미가 없다.
Const memoizedValue = useMemo(
() => return computeExpensiveValue(a, b)
);
// 의존성 배열이 빈 배열일 경우, 컴포넌트 마운트 시에만 호출
// 마운트 시점에서 한번만 계산할 경우 활용하나 자주 쓰이지 않는다.
Const memoizedValue = useMemo(
() => {
return computeExpensiveValue(a, b);
},
[]
);
대부분 의존성 배열을 넣고 해당 값이 변경될 때 값이 변해야할 때 사용한다.
4. useCallback()
- useMemo() Hook과 유사하지만 값이 아닌 함수를 반환.
컴포넌트가 랜더링 될 때마다 함수를 새로 정의하는 것이 아니라 값이 바뀐 경우에만
함수를 새로 정의하여 리턴함.
// 의존성 변수 배열에 있는 값 중 하나라도 변경되면, 메모이제이션된 Callback 함수를 반환한다.
// 의존성 변수에 따라 메모이제이션된 값을 보낸 다는 것은 useMemo와 같다.
const memoizedCallback = useCallback(
() => {
doSomething(의존성 변수1, 의존성 변수2);
},
[의존성 변수1, 의존성 변수2]
);
// 동일한 역할을 하는 두 줄의 코드
useCallback(함수, 의존성 배열);
useMemo(() => 함수, 의존성 배열);
useCallback Hook 안쓰고 컴포넌트내 함수 정의한다면 매번 랜더링마다 함수 재정의.
그래서 변수가 변한 경우에만 해서 불필요한 반복 작업을 없애준다.
5. useRef()
useRef는 컴포넌트에서 변수를 선언하고 관리하는 것을 돕는 Hook
Reference를 사용하기 위한 Hook
React에서 Reference란 특정 컴포넌트에 접근할 수 있는 객체이다.
반환된 레퍼런스 객체는 컴포넌트 마운트해제 전까지 있다. 라이프타임 전체에 유지됨.
변경 가능한 Current라는 속성을 가진 하나의 상자로 쉽게 생각할 수 있다.
refObject.current 에서 current는 현재 참조하고 있는 Element다.
- React의 useRef Hook은 일반 JavaScript에서 ref 객체를 만드는 것과 매우 유사함.
-useRef를 사용하면 함수형 컴포넌트 내부에서 특정 DOM 요소에 접근하거나, 컴포넌트가 재렌더링될 때 변수값이 유지되도록 할 수 있습니다.
- 변화는 감지해야하지만, 렌더링을 발생시키면 안될 때 사용하면 편리하다.
기본문법
const refContainer = useRef(초깃값);
예를 들어, useRef를 사용하여 특정 DOM 요소의 값을 관리할 수 있습니다. 아래는 useRef를 사용하여 input 요소에 포커스를 줄 수 있는 예시
import { useRef } from 'react';
function MyComponent() {
const inputRef = useRef(null);
const handleClick = () => {
inputRef.current.focus();
};
return (
<>
<input type="text" ref={inputRef} />
<button onClick={handleClick}>Focus Input</button>
</>
);
}
위 코드에서 useRef를 사용하여 inputRef 변수를 생성하고, 이를 input 요소의 ref 속성에 할당합니다. 그리고 handleClick 함수에서 inputRef.current.focus()를 호출하여 input 요소에 포커스를 줍니다.
useRef를 사용하면 컴포넌트가 재렌더링될 때 변수의 값이 유지되도록 할 수도 있습니다. 이를 활용하면, 컴포넌트 내부에서 이전 값과 비교하거나, 이전 값에 기반하여 다음 값을 계산할 수 있습니다.
매번 랜더링 될 때마다 항상 같은 Reference 객체를 반환하고, useRef() Hook은
내부의 데이터가 변경되었을 때 별도로 알리지 않는다.
ref에 도움 노드가 연결되거나 분리된 경우 어떤 코드 실행하고싶으면
useCallback ref 를 사용해야한다. 이 때는 자식 컴포넌트의 변경이 있을 시 알림 받을 수 있고, 다른 정보들을 업데이트 할 수 있다.
예시
function MeasureExample(props) {
const [height, setHeight] = useState(0);
const measureRef = useCallback(node => {
if (node !== null) {
setHeight(node.getBoundingClientReac().height);
}
}, []);
retrun (
<>
<h1 ref={measuredRef}> 안녕, 리액트</h1>
<h2> 위 헤더의 높이는 {math.round(height))px 입니다.</h2>
</>
);
}
이 때 h1이 마운트 언마운트 때만 콜백함수가 호출되며, 재 랜더링이 일어날 때에는 호출되지 않는다.
HOOK 원칙
1. HooK 은 무조건 최상위 레벨에서만 호출해야한다.
2. React 함수 컴포넌트에서만 Hook를 호출해야한다.
클래스 컴포넌트는 하나로 모두 업데이트했지만
useState 함수는 각각 있다.
변수 각각에 대해 set함수가 존재한다.
'개념 창고 > React' 카테고리의 다른 글
[React] Composition vs Inheritance (0) | 2023.03.30 |
---|---|
[React] Form (0) | 2023.03.30 |
[React] List and Keys (0) | 2023.03.30 |
[React] 조건부 렌더링(Conditional Rendering) (0) | 2023.03.30 |
[React] Event (0) | 2023.03.29 |