끄적끄적 코딩
Published 2023. 6. 22. 06:30
[React] Hooks React

useState

useState 는 함수 컴포넌트에서 가변적인 상태를 지닐 수 있게 해줍니다. 만약 함수 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 됩니다.

useState 의 기본적인 구조

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

코드를 보면 오른쪽의 useState 를 비구조화 할당으로 배열로 받아왔습니다.

배열과 같이 두개의 원소가 있습니다. 첫 번째 원소는 원소의 상태 값, 두 번째 원소는 상태를 설정하는 함수입니다. 물론 두 원소 모두 원하는데로 네이밍 할 수 있습니다.

쉽게 말해 첫번째 원소로 현재 상태 값을 참조하고, 두번째 원소로 상태 값을 수정한다고 보면 됩니다.

다음 오른쪽 useState 를 보면 파라미터로 초기 값인 0을 설정해준 것을 확인 할 수 있습니다.

이 초기 값은 0뿐만 아니라 ' ' , [ ] , { } 등등 다양하게 설정해줄 수 있습니다.

*useState 에 초기값을 반드시 넣어줘야 할까?

- 성능상에 큰 문제는 없으므로 넣어주지 않아도 상관 없습니다.
- 하지만 초기값을 설정하는 것을 적극 권장합니다. 그 이유로는 다음과 같습니다.

  1. 초기값이 없을 경우 할당되는 undefined 로 인한 예기치 못한 문제 발생 가능성
  2. 초기값 설정 안할 시 가독성 저하

다음과 같은 코드로 실습해 볼 수 있습니다.

import React, { useState } from 'react';

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

	return (
		<div>
			<div>{value}<div>
			<button onClick={() => setValue(value + 1)}>+1</button>
		</div>
	);
};

export default Counter;

useState 는 하나의 상태 값만 관리할 수 있기 때문에 함수 컴포넌트에서 관리해야 할 상태가 여러개라면 useState 를 여러개 사용해야 합니다.


useEffect

useEffect 는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다.

 

import React, { useState } from 'react';

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

	useEffect(() => {
		console.log("숫자가 증가하였습니다.");
	});

	return (
		<div>
			<div>{value}<div>
			<button onClick={() => setValue(value + 1)}>+1</button>
		</div>
	);
};

export default Counter;


마운트될 때만 실행하고 싶을 때

useEffect 에서 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링될 때만 실행하고 업데이트 될 때는 실행하지 않으려면, 즉 초기에만 실행하게 하려면 함수의 두 번째 파라미터로 비어 있는 배열을 넣어 주면 됩니다.

useEffect(() => {
	console.log("마운트될 때만 실행됩니다.");
}, []);



특정 값이 업데이트될 때만 실행하고 싶을 때

클래스형 컴포넌트라면 다음과 같이 작성할 것입니다.

componentUpdate(prevProps, prevState) {
	if(prevProps.value !== this.props.value) {
		// 특정 함수 실행
	}
}

위 코드는 props 안에 들어 있는 value 값이 바뀔 때만 특정 작업을 수행합니다.

useEffect 는 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어 주면 됩니다.

useEffect(() => {
	console.log("value가 수정 될 때만 실행합니다.");
}, [value]);

이처럼 하면 다른 이벤트가 발생하더라도 value가 변경되지 않는다면 실행되지 않을 것 입니다.

배열 안에는 useState를 통해 관리하는 값이나 props로 전달 받은 값을 넣어 주어도 됩니다.


정리

useEffect 는 기본적으로 렌더링되고 직후마다 실행됩니다.

컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect 에서 뒷정리(cleanup) 함수를 반환해 주어야 합니다.

useEffect(() => {
	console.log("effect");
	console.log(value);

	return () => {
		console.log("cleanup");
		console.log(value);
	}
}, [value]);

useEffect(() => {
	console.log("effect");

	return () => {
		console.log("cleanup");
	}
}, []);

 

useReducer

useReducer 은 useState 보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook 입니다.

리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션 값(action)을 전달 받아 새로운 상태를 반환하는 함수입니다. 리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜 주어야 합니다.

function reducer(state, action) {
	return { ... };  // 불변성을 지키면서 업데이트한 새로운 상태를 반환합니다.
}

액션 값은 주로 다음과 같은 형태로 이루어져 있습니다.

{
	type: 'INCREMENT',
	// 다른 값들이 필요하다면 추가로 들어감
}

후에 배울 리덕스에서는 type 필드가 꼭 있어야 하지만 useReducer 에서는 반드시 필요하지 않고 심지어 객체가 아니라 문자열이나 숫자여도 상관 없습니다.


카운터 구현하기

Counter.js

import React, { useReducer } from 'react';

function reducer(state, action) {
	// action.type에 따라 다른 작업 수행
	switch (action.type) {
		case 'INCREMENT'
			return { value: state.value + 1 };
		case 'DECREMENT'
			return { value: state.value - 1 };
		default:
			return state;
	}
}

const Counter = () => {
	const [state, dispatch] = useReducer(reducer, { value: 0 });

	return (
		<div>
			<div>{state.value}<div>
			<button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
			<button onClick={() => dispatch({ type: 'DECREMENT' })}>-1</button>
		</div>
	);
};

export default Counter;

useReducer 의 첫 번재 파라미터(reducer)에서는 리듀서 함수를 넣고, 두 번째 파라미터에는 해당 리듀서의 기본 값({ value: 0 })을 넣어 줍니다.

이 Hook 을 비구조화 할당으로 받아오면 state 값과 dispatch 함수를 받아오는데요. 여기서 state 는 현재 가리키고 있는 상태고, dispatch 는 액션을 발생시키는 함수입니다.

  • useState, useReducer의 장단점
    • 장점: 코드가 간결하고 직관적입니다.
    • 단점: 여러개의, 복잡한 상태관리가 어렵습니다.
    useReducer
    • 장점: 복잡한 상태 관리뿐만 아니라 복잡한 로직, 다수의 하위 컴포넌트에 걸쳐 공유해야 하는 상태값을 관리할 때 유용합니다.
    • 단점: 상태를 직접 업데이트할 수 없기 때문에 이를 위해 액션을 정의해야 하고 이는 코드의 복잡성을 높일 수 있습니다.
    따라서 간단한 상태관리는 useState, 복잡하고 여러 개의 상태 관리는 useReducer을 사용하는 것이 좋습니다.
  • useState

 

useMemo

useMemo 를 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있습니다.

Sum.js

import { useState, useMemo } from 'react';

const get**Sum** = numbers => {
	return numbers.reduce((a, b) => a + b);
};

const **Sum = () => {**
	const [list, setList] = useState([]);
	const [number, setNumber] = useState('');

	const onChange = e => {
		setNumber(e.target.value);
	}
	const onInsert = () => {
		const nextList = list.concat(parseInt(number));
		setList(nextList);
		setNumber('');
	}

	const sum = useMemo(() => get**Sum(**list**), [**list**]**);

	return (
		<div>
			<input value={number} onChange={onChange} />
			<button onClick={onInsert}>등록</button>
			<b>합 계:</b> {sum}
		</div>
	)
**}**

위 코드는 getSum 함수를 jsx 코드에서 바로 호출하는 것이 아닌 useMemo 파라미터로 전달 후 useMemo를 호출하였습니다.

useMemo는 첫번째 파라미터로 생성하고 싶은 함수, 두번째 파라미터로 배열을 넣는데, 이 때 배열에 들어가는 값은, 해당 값이 변경되어야 첫번 째 파라미터로 전달된 함수가 생성되어 값이 최신화 된다는 것을 의미합니다. 만약 해당 값이 변경되지 않는다면, 위 코드에선 list의 요소가 변경되지 않는다면 이전의 연산 결과를 출력합니다.

만약 위에서 useMemo를 사용하지 않았을 경우 input태그에 값을 입력하는 등의 다른 이벤트에도 getSum함수가 실행되어 불필요한 비용이 발생합니다.


useCallback

useCallback 은 useMemo 와 용도가 비슷합니다. 주로 성능을 최적화해야 하는 상황에서 사용하는데요. 이 Hook을 사용하면 만들어 놨던 함수를 재사용할 수 있습니다.

컴포넌트를 리렌더링 할 때마다 새로 만들어진 함수를 사용하는 것이 큰 문제는 없지만 렌더링이 자주 발생하거나 렌더링 해야 할 컴포넌트 수가 많아지면 이 부분을 최적화 해주는 것이 좋습니다.

 

import { useState, useMemo, useCallback } from 'react';

...

const onChange = useCallback(e => {
	setNumber(e.target.value);
}, []);

const onInsert = useCallback(() => {
	const nextList = list.concat(parseInt(number));
	setList(nextList);
	setNumber('');
}, [number, list]);

...

onChange 와 onInsert 함수를 최적화 해주었습니다.

useCallback 의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 됩니다. 이 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야 합니다.

onChange 처럼 비어 있는 배열을 넣게 되면 컴포넌트가 렌더링 될 때 만들었던 함수를 계속해서 재사용하게 됩니다. 이같은 경우는 상태 값에 의존하지 않을 때 적용합니다.

onInsert 처럼 배열 안에 number과 list를 넣게 되면 인풋 내용이 바뀌거나 새로운 항복이 추가될 때 새로 만들어진 함수를 사용하게 됩니다. 이같은 경우는 상태 값에 의존할 때 적용합니다.


useRef

useRef 는 함수 컴포넌트에서 ref를 쉽게 사용할 수 잇도록 해 줍니다.

import { useState, useMemo, useCallback } from 'react';

const getSum = numbers => {
	return numbers.reduce((a, b) => a + b);
};

const Sum = () => {
	const [list, setList] = useState([]);
	const [number, setNumber] = useState('');

	const inputEl = useRef(null);

	const onChange = useCallback(e => {
		setNumber(e.target.value);
	}, []);
	
	const onInsert = useCallback(() => {
		const nextList = list.concat(parseInt(number));
		setList(nextList);
		setNumber('');
		inputEl.current.focus();
	}, [number, list]);

	const sum = useMemo(() => getSum(list), [list]);

	return (
		<div>
			<input value={number} onChange={onChange} ref={inputEl}/>
			<button onClick={onInsert}>등록</button>
			<b>합 계:</b> {sum}
		</div>
	)
}

useRef를 사용하여 ref 를 설정하면 useRef 를 통해 만든 객체 안의 current 값이 실제 엘리먼트를 가리킵니다.



로컬 변수 사용하기

컴포넌트 로컬 변수를 사용할 때도 useRef를 활용할 수 있습니다. 다음은 클래스 형태와 함수 컴포넌트에서 로컬 변수를 사용하는 예시 입니다.

클래스형 컴포넌트

import React, { Component } from 'react';

class MyComponent extends Component {
	id = 1
	setId = (n) => {
		this.id = n;
	}
	printId = () => {
		console.log(this.id);
	}
	render() {
		...
	}
}

함수형 컴포넌트

import React, { useRef } from 'react';

class MyComponent = () => {
	const id = useRef(1);
	const setId = (n) => {
		id.current = n;
	}
	const printId = () => {
		console.log(id.current);
	}
	return (
		...
	)
}

export default RefSample;
  • 로컬 변수를 사용하는 이유예를 들어, 특정 이벤트에 응답하거나 애니메이션 효과를 적용할 때, 이전 상태 값을 유지하면서 변경된 값을 반영해야 하는 경우 등이 있습니다.
  • 이런 경우에 useRef를 사용하여 로컬 변수를 만들고 이 변수에 데이터를 저장하면, 컴포넌트가 다시 렌더링되어도 변수 값이 유지됩니다. 따라서 로컬 변수를 사용하여 상태와는 별개로 데이터를 유지하고 업데이트할 수 있습니다.
  • React에서 useRef를 사용하여 로컬 변수를 만들 수 있는 이유는 컴포넌트의 렌더링과 관련된 데이터를 저장하고 유지하기 위해서입니다.


커스텀 Hooks 만들기

여러 컴포넌트에서 비슷한 기능을 공유할 경우 나만의 Hook으로 작성하여 로직을 재사용할 수 있습니다.

인풋을 관리하기 위해 useReducer로 작성했던 로직을 useInputs라는 Hook으로 따로 분리해 보겠습니다.

useInputs.js

import { useReducer } from 'react';

function reducer(state, action) {
	return {
		...state,
		[action.name]: action.value
	};
}

export default function useInputs(initialForm) {
	const [state, dispatch] = useReducer(reducer, initialForm);
	const onChange = e => {
		dispatch(e.target);
	};

	return [state, onChange];
}

Info.js

import useInputs from './useInputs';

const Info = () => {
	const [state, onChange] = useInputs({
		name: '',
		nickname: ''
	});
	const { name, nickname } = state;

	return (
		<div>
			<input name="name" value={name} onChange={onChange} />
			<input name="nickname" value={nickname} onChange={onChange} />
		</div>
	)
}
저작자표시

'React' 카테고리의 다른 글

[React] 컴포넌트 스타일링  (0) 2023.06.27
[React] 컴포넌트 스타일링  (0) 2023.06.22
[React] 컴포넌트의 라이프사이클 메서드  (0) 2023.06.22
[React] 컴포넌트 반복  (0) 2023.06.22
[React] ref란  (0) 2023.06.20

검색 태그

티스토리툴바