Hooks | Notion

React에는 다양한 목적으로 사용할 수 있는 hooks가 존재한다.
hooks는 컴포넌트의 상태가 변경되었을때에 대해서 각자 처리하는 일이 존재한다.
Hooks의 규칙
- 반드시 네이밍은 use~ 로 시작해야 한다.
- 반복문, 조건문 등에서 사용할 수 없고, 컴포넌트내의 최상위 위치에서만 사용해야 한다.
- 리액트 컴포넌트 혹은 커스텀 hooks 파일에서만 사용 가능하다.

useState

useState 훅은 컴포넌트내에서 상태를 업데이트하여 Re-Rendering(리렌더링)을 발생시키는 상태관리 hooks이다.
- 주로 사용자의 인터랙션에 의해서 상태가 업데이트된다.
특정한 값이 변경되었을때 UI를 업데이트 하기 위해서 사용해야한다.
인자에는 상태의 초기값을 넘겨준다.
두개의 요소가 들어있는 배열을 반환한다.
- 첫번째: 현재 상태값을 나타내는 변수
- 두번째: 해당 상태값을 업데이트 하여 리렌더링을 발생시키는 함수

const [value, setValue] = useState(0);

import { useState } from 'react';

const RandomNumber = () => {
	const [value, setValue] = useState(0);

	const onClick = () => {
		// 0 ~ 1000 까지의 무작위 숫자 생성 및 소수점 버림 처리
		const randomNumber = Math.floor(Math.random() * 1000);

		setValue(randomNumber);
	}

	return (
		<div>
			<p>현재 숫자: {value}</p>

			<button onClick={onClick}>숫자 재생성</button>
		</div>
	);
}

export default RandomNumber;

위의 기능을 순수 자바스크립트를 사용하여 구현하면 아래처럼 작성할 수 있다.

매번 getElementById 메소드를 사용하여 반환된 엘리먼트의 속성을 일일히 변경해주는 과정이 없어진다. (Virtual DOM 사용의 장점)

<html>
	<body>
		<p id='current-value'></p>
		<button id='generate-number'>숫자 재생성</button>

		<script>
			const currentValueElement = document.getElementById('current-value');
			const generateNumberElement = document.getElementById('generate-number');

			function onClick() {
				const randomNumber = Math.floor(Math.random() * 1000);

				currentValueElement.innerText = `현재 숫자: ${randomNumber}`;
			}

			generateNumberElement.addEventListener('click', onClick);
		</script>
	</body>
</html>

예제 만들어보기
- 현재 입력중인 값을 다른 엘리먼트에서 보여주기 (Input State 다루기)
- Counter 컴포넌트 만들기
- Modal 컴포넌트 만들기

리액트의 불변성(Immutable)

Untitled

자바스크립트의 참조타입(Array, Object, Function)에 해당되는 상태를 변경할때 해당된다.
React에서 참조타입의 상태 변화를 감지하는 기준은 값이 아닌 주소값이다.
- 배열이나 객체의 상태를 다룰때는 값을 직접 수정하는것이 아닌 새로운 배열이나 객체를 할당하는 형태로 작성해야한다.

useCallback

useCallback 훅은 컴포넌트의 상태를 사용하는 함수를 재사용 가능하도록 만들어주는 훅이다. (메모이제이션)
- 메모이제이션이란 이전에 계산을 통해서 만들어진 값을 메모리에 저장하여 연산 과정을 생략하고 재사용하는 방법이다.