항해 19일차
오늘은 리액트에 훅에 대해서 공부를 하였다.
그래서 오늘은 리액트 훅에 대해서 TIL를 써볼려고 한다.
리액트에는 많은 훅들이 있다. 근데 훅이라는 것을 뭘까?
Hook
리액트 훅(React Hook)은 리액트 함수형 컴포넌트에서 상태 관리나 다른 리액트 기능들을 사용할 수 있게 해주는 함수이다. 리액트 훅에는 useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef 등 다양한 종류가 있다. 각각의 훅은 다른 기능을 제공하며, 개발자가 필요한 훅을 선택적으로 사용할 수 있다. 이를 통해 함수형 컴포넌트에서도 더욱 간편하게 상태 관리와 다양한 기능들을 구현할 수 있게 되었다.
그럼 이제 훅에 대해서 살펴보자~~
먼저 가장 유명한 훅인 useState가 있다.
useState
const [state, setState] = useState(initialState);useState 함수는 배열을 반환하며, 첫 번째 원소는 상태 값(state value)이고, 두 번째 원소는 상태를 변경할 수 있는 함수(setState function)이다. setState 함수를 호출하면 첫 번째 원소인 상태 값이 업데이트되며, 해당 컴포넌트가 다시 렌더링된다.
두 번째는 useEffect이다.
useEffect
useEffect(() => {
// 수행할 작업
}, []);
포넌트의 렌더링 결과가 실제 돔에 반영된 후에 비동기적으로 처리해야 하는 작업을 수행할 때 사용한다. 쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 대 내가 무언가를 실행하고 싶다면 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면 사용한다.
세 번째는 useRef이다.
useRef
import React, { useRef } from 'react';
function MyComponent() {
// useRef를 사용하여 ref 객체 생성
const myRef = useRef();
// ref 객체를 컴포넌트 요소에 할당
return <div ref={myRef}>Hello, World!</div>;
}함수형 컴포넌트에서 DOM 요소에 쉽게 접근할 수 있도록 도와준다. useRef 함수를 사용하면, useRef가 반환한 객체의 current 프로퍼티를 이용하여, 해당 객체가 참조하는 DOM 요소에 쉽게 접근할 수 있다.
useRef 함수는 매개변수로 초기값을 받을 수 있으며, 초기값을 전달하지 않을 경우, useRef가 반환하는 객체의 current 프로퍼티는 null로 설정된다.
네 번째는 useContext이다.
useContext
import React, { useContext } from 'react';
import MyContext from './MyContext';
function MyComponent() {
const contextValue = useContext(MyContext);
// 컴포넌트 로직
}useContext는 React에서 제공하는 훅 중 하나로, 컴포넌트 간 데이터를 전달하기 위한 메커니즘이다. 일반적으로 props를 통해 컴포넌트 간 데이터를 전달한다. 그러나 컴포넌트 구조가 깊어질수록 props를 통해 데이터를 전달하는 것은 번거로워질 수 있다. 이러한 경우 useContext를 사용하여 컴포넌트 간 데이터를 전달할 수 있다.
useContext를 사용하면, 컴포넌트 트리 상위에서 createContext를 사용하여 생성한 Context 객체를 이용하여 값을 공유할 수 있다. useContext 함수는 createContext로 생성한 Context 객체를 매개변수로 받아 해당 Context의 값을 반환한다.
다섯 번째 React Memo이다.
React.Memo
컴포넌트를 메모이제이션
import React from 'react';
const MyComponent = React.memo((props) => {
/* 컴포넌트의 로직 */
});
export default MyComponent;리액트 memo는 컴포넌트의 성능 최적화를 위해 사용되는 기능입니다. memo는 순수 함수(Pure Function)로 이루어진 컴포넌트에 대해 사용됩니다. 순수 함수란 동일한 인자가 주어졌을 때 항상 동일한 값을 반환하는 함수를 의미합니다.
memo는 컴포넌트가 렌더링될 때 이전 결과를 저장하고, 다음 렌더링에서 이전 결과와 비교하여 동일한 경우에는 다시 렌더링하지 않고 이전 결과를 사용한다. 이를 통해 불필요한 렌더링을 방지하고 성능을 향상시킬 수 있다.
여섯 번째 useCallback이다.
useCallback
const memoizedCallback = useCallback(
() => {
// 콜백 함수의 로직
},
[]
);useCallback는 React에서 제공하는 훅(Hook) 중 하나로, 함수형 컴포넌트의 성능을 최적화하는 데 도움을 주는 기능이다. 이 Hook은 함수를 메모이제이션(memoize)하는 데 사용되며, 매 렌더링마다 새 함수를 생성하는 대신 가능한 경우 캐시된 버전의 함수를 반환한다.
마지막으로 useMemo이다.
useMemo
import { useMemo } from 'react';
function MyComponent({ list }) {
const getTotal = useMemo(() => {
return list.reduce((total, item) => total + item, 0);
}, [list]);
return <div>Total: {getTotal}</div>;
}함수 컴포넌트 내에서 계산이 많거나 렌더링 성능을 최적화할 필요가 있는 경우에 사용한다. useMemo는 이전 계산 결과를 저장하고, 해당 결과가 필요한 경우에만 새로 계산합니다. 이를 통해 중복 계산을 방지하고 렌더링 성능을 향상시킬 수 있습니다.
useMemo는 두 개의 인자를 받습니다. 첫 번째 인자는 계산할 함수이며, 두 번째 인자는 의존성 배열입니다. 의존성 배열은 해당 함수가 의존하는 값들을 배열로 전달해줍니다. 의존성 배열의 값이 변경될 때마다 useMemo는 새로운 값을 계산합니다.
복잡한 계산을 수행해야 할 때
컴포넌트가 많은 데이터를 렌더링할 때
자주 호출되는 함수의 결과를 최적화할 때
이렇게 많은 리액트의 훅들을 보았다. 앞으로 많이 써봐야겠다. ❤️
