[React] Hooks

임유정·2022년 12월 7일

React

목록 보기

5/16

이 글은 인프런 강의 소플의 처음 만난 리액트(React) 강의를 보고 정리했습니다.
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8

컴포넌트에는 함수 컴포넌트와 클래스 컴포넌트가 존재한다

hook을 사용하면 함수 컴포넌트도 클래스 컴포넌트와 동일하게 기능한다.

Hook = 갈고리

use를 붙여서 hook을 사용함

use붙여서 훅이라는 것을 표현해야함

useState() 사용법

useState( ) = state를 사용하기 위한 hook

useState() 사용법

const [변수명, set함수명] = useState(초기값);

useEffect

= side effect를 수행하기 위한 hook

= 리액트의 side effect 이란 → 효과, 영향

= 다른 컴포넌트에 영향을 미칠 수 있으며 , 렌더링 중에는 작업이 완료될 수 없기 때문

= 리액트의 함수 컴포넌트에서 side effect를 실행할 수 있게 해주는 Hook

useEffect(이펙트 함수, 의존성 배열);

의존성 배열 ?

이펙트가 의존하고 있는 배열인데

배열 안에 있는 값이 하나라도 변경되었을 때 이펙트함수가 실행된다.

의존성 배열을 생략하면 컴포넌트가 업데이트될 때마다 호출 됨.

useEffect(이펙트 함수);

이펙트 함수는 처음 커포넌트가 랜더링이 된 이후와 업데이트로 인한 재 랜더링이 된 이후에 실행된다.

⇒ effect function이 mount, unmount 시에 단 한 번씩만 실행됨

useEffect(이펙트 함수, []);

useEffect(() ⇒ {
	// 컴포넌트가 마운트 된 이후,
	// 의존성 배열에 있는 변수들 중 하나라도 값이 변경되었을 때 실행됨
	// 의존성 배열에 빈 배열([])을 넣으면 마운트와 언마운트시에 단 한번씩만 실행됨
	// 의존성 배열 생략 시 컴포넌트 업데이트 시마다 실행됨
	...

	return () => {
		// 컴포넌트가 마운트 해제되기 전에 실행됨
		...
	}
}, [의존성 변수1, 의존성 변수2, ...]);

useMemo

: Memoized value를 리턴하는 Hook

Memoization? ⇒ 최적화를 위해서 사용하는 개념, 비용이 높은 즉 연산량이 많이 드는 함수의 호출 결과를 저장해 두었다가 같은 입력값으로 함수를 호출하면 새로 함수를 호출하지 않고, 이전에 저장해 두었던 호출 결과를 바로 반환하는 것.

⇒ 함수 호출 때 까지 걸리는 시간도 짧아지고, 중복연산도 줄어들어서 자원도 줄어든다. 빠른 렌더링 속도

⇒ 메모를 해두었다가 다시 사용하는 것.

useMemo는 렌더링이 일어나는 동안만 실행한다.

const momoizedValue = useMemo(
	() => {
				//연산량이 높은 작업을 수행하여 결과를 반환
				return computeExpensiveValue(의존성 변수1, 의존성 변수2);
	},
	[의존성 변수1, 의존성 변수2]
);

그래서 렌더링이 일어날때 실행하면 안되는 경우는 useMemo에 넣으면 안된다. 예) sideEffect..이건 useEffect hook을 사용해야함

의존성 배열을 넣지 않을 경우, 매 렌더링마다 함수가 실행 됨.

const momoizedValue = useMemo(
	() => {  computeExpensiveValue(a, b)
);

useCallBack

: useMemo() hook과 유사하지만 값이 아닌 함수를 반환

const momoizedValue = useCallback(
	() => {
				doSomething(의존성 변수1, 의존성 변수2);
	},
	[의존성 변수1, 의존성 변수2]
);

동일한 역할을 하는 두줄의 코드

useCallback(함수, 의존성 배열); //컴포넌트가 마운트 될때만 함수가 정의됨, 처음 마운트될때만 함수가 정의되고 이후에는 다시 정의되지않고 불필요하게 재 랜더링도 안됨.

useMemo(() => 함수, 의존성 배열);

uesRef

: reference : 특정 컴포넌트에 접근할 수 있는 객체

: refObject.current → current라는 속성이 있는데 현재 참조하고 있는 element라는 뜻이다.

const refContainer = useRef(초기값);

⇒ uesRef : 변경가능한 current라는 속성을 가진 하나의 상자

⇒ useRef() Hook은 내부의 데이터가 변경되었을 때 별도로 알리지 않는다.

callback ref

커런트 속성을 변경한다해서 재랜더링이 이루어지진 않는다.

따라서 useRef에 돔 노드가 연결되거나 분리되었을 경우 어떤 코드를 실행하고 싶다면,

callback ref를 사용해야한다.

돔노드의 변경을 알기위한 가장 기초적인 방법으로 callback ref가 있다.

리액트는 ref가 다른 노드로 연결될때마다 콜백을 호출하게 된다.

Hook의 규칙

hook은 무조건 최상위 레벨에서만 호출해야 한다.

: 최상위 레벨 = 리엑트 함수 컴포넌트의 최상위 레벨을 의미 (반복문, 조건문 등 안에서 호출하면 안된다는 뜻)

: hook은 컴포넌트가 렌더링될 때마다 매번 같은 순서로 호출되어야 한다.
리액트 함수 컴포넌트에서만 Hook을 호출해야한다.
: 일반 js에서는 호출 x

https://www.npmjs.com/package/eslint-plugin-react-hooks