넘버스
넘버스
리액트(React)는 자바스크립트 UI 프레임워크 중 선두 자리를 지키고 있다. 리액트에는 많은 개발이 진행되고 있는데, 지난 몇 년을 통틀어 가장 중요한 변화는 함수형 구성요소로의 전환이다. 함수형 구성요소는 많은 기능을 후크에 의존한다. 가장 일반적인 후크는 useState이지만 그 외에도 많다.
널리 알려지지 않은 8가지 유용한 리액트 후크를 소개한다.
<예시 1>은 useReducer 후크를 다루는 방법을 보여준다. 또한 이 JSFiddle에서 라이브로 리듀서를 볼 수 있다.
<예시 1> 간단한 useReducer 예제
<예제 1>은 입력 상자에서 텍스트를 가져오고, 사용자가 버튼을 클릭하도록 해 전체 대문자 또는 전체 소문자로 이 텍스트를 표시하도록 한다. 코드는 const [state, dispatch] = useReducer(reducer, initialState);로 새 리듀서를 선언한다. useReducer는 리듀서 함수와 initialstate를 받고 배열을 반환한다. 이 배열을 state 및 dispatch 변수로 해체한다.
리듀서 자체는 const reducer = (state, action) =>로 정의되며, 2인수 함수를 제공한다. 코드에서 dispatch 함수가 호출될 때마다 현재 상태와 함께 액션 객체를 전달한다. 여기서 액션 객체에는 형식 필드가 있으며, 이를 사용해 상태를 변환할 방법을 결정한다. 어느정도 복잡한 애플리케이션에서 useReducer는 복잡성 관리에 도움이 될 수 있고, 컨텍스트를 사용해 애플리케이션 전반에서 공유도 가능하다. 애플리케이션의 복잡성으로 인해 useState를 관리하기가 어렵다면 useReducer 후크가 도움이 된다.
<예시 2>에는 useCallback을 사용해 목록의 많은 항목에 걸쳐 같은 함수를 사용한다. 라이브 JSFiddle 예제도 있다.
<예시 2> 반복되는 목록의 useCallback
React.useCallback()을 사용해 새로운 메모이징된 함수 incrementCounter를 생성한다. list의 onClick 핸들러에서 일반 함수로 메모이징된 함수를 사용할 수 있다. useCallback()은 함수를 첫 번째 인수로 받는다. 이 함수 내에서 필요한 모든 작업을 수행할 수 있다. 중요한 차이점은 리액트는 종속성 변수(<예시 2>에서는 counter 변수) 목록에서 뭔가가 변경되지 않는 한 함수의 캐시된 값을 반환한다는 것이다.
이는 값비싼 함수를 여러 호출자, 특히 자식 구성요소 사이에 공유해야 하는 경우 매우 강력한 힘을 발휘한다. 예를 들어 다음에 살펴볼 useMemo에서 useCallback이 함수 자체를 숨긴다는 것을 볼 수 있다. 즉, useCallback은 실제 함수가 나타날 때마다 다시 생성되는 것을 방지하고 필요할 때만 다시 생성한다.
<예시 3>에서 useMemo의 사용 예를 볼 수 있다. 라이브 JSFiddle에서도 예제를 볼 수 있다.
<예시 3> useMemo
<예시 3>에는 컴퓨팅 비용이 큰 함수인 computeExpensiveValue가 있다. 이 함수는 단일 입력인 count에 의존한다. computeExpensiveValue(count), [count])를 사용해서 리액트에 ‘count가 변경된 경우에만 이 함수를 실행하고 그렇지 않은 경우 캐시된 계산을 반환하라’고 지시할 수 있다. 여기서도 useCallback과의 구분이 명확하지 않다. 중요한 차이점은 useCallback은 함수 자체가 반복적으로 인스턴스화되면서 성능 저하를 유발할 때 사용하는 후크라는 것이다. 그렇지 않은 경우에는 useMemo가 더 좋은 선택이다.
<예시 4>에는 Speak와 Happy, 두 개의 구성요소가 있으며 애플리케이션 부모 구성요소인 App이 이 둘을 사용한다. 사용자는 dog 상태와 cat 상태 사이를 전환할 수 있으며 전역 컨텍스트를 통해 자식 구성요소가 그 선택을 반영한다. 예를 들어 꼬리를 흔들거나 골골거리는 소리 내기 등이다. 이 예제의 라이브 JSFiddle을 확인할 수 있다.
<예시 4> useContext 사용 예
실제로 <예시 5>에서 버튼이 클릭되면 useRef 후크를 사용해 입력 필드에 대한 참조를 저장하고 DOM 메서드를 사용해 포커스를 설정하고 값을 “Something amazing”으로 설정한다. useRef 예제에 대한 JSFiddle이 있다.
<예시 5> 간단한 useRef 예제
<예시 6> useEffect와 API 호출
<예시 7>. 요소를 측정하기 위한 useLayoutEffect
<예시 8>(라이브는 여기 참조)은 부모 구성요소인 App과 자식 구성요소인 Expounder를 보여준다. Expounder는 useImperativeHandle을 통해 맞춤 설정된 참조 API를 노출해 App이 참조의 expound()를 호출할 수 있도록 하고, 결과적으로 맞춤 설정된 동작(UI에 “The way that can be told is not the eternal way” 출력)을 유도한다. <예시 8>의 ChildComponent는 forwardRef를 사용해서 DOM 참조를 포함한다.
<예시 8> useImperativeHandle
useImperativeHandle을 사용하면 첫 번째 인수와 원본 참조를 가져온 다음 두 번째 인수 함수에서 반환한 객체로 데코레이션할 수 있다. 여기서는 해체 할당을 사용해 expound 메서드 만으로, useImperativeHandle(ref, () => ({ expound })와 같이 익명 인라인 객체를 만든다. useImperativeHandle 후크를 사용한 결과로, ParentComponent가 ChildComponent로부터 받은 참조에도 expound 메서드가 있고, 이를 호출하여 필요한 기능을 실행할 수 있다.
editor@itworld.co.kr
널리 알려지지 않은 8가지 유용한 리액트 후크를 소개한다.
useReducer
useState는 누구나 아는 후크다. 클래스 기반 구성요소의 필수적인 기능인 상태 저장을 위한 멤버 변수를 함수형 변수로 대체하기 때문이다. useReducer 후크의 기능도 비슷하지만 상태 전환에 개입되는 요소가 많고 명시적 전환이 애플리케이션에 유리한, 더 복잡한 시나리오에 적합하다. useReducer 후크는 리덕스(Redux)의 리듀서에 착안한 후크다. useState의 간소함과 리덕스와 같은 상태 관리 시스템의 복잡함 사이에 위치한다고 볼 수 있다.<예시 1>은 useReducer 후크를 다루는 방법을 보여준다. 또한 이 JSFiddle에서 라이브로 리듀서를 볼 수 있다.
<예시 1> 간단한 useReducer 예제
const {useReducer, Fragment} = React;
const initialState = {
text: "",
isUpperCase: false,
};
const reducer = (state, action) => {
switch (action.type) {
case 'SET_TEXT':
return {
...state,
text: action.text,
};
case 'TOGGLE_UPPER_CASE':
return {
...state,
text: state.text.toUpperCase(),
};
case 'LOWERCASE':
return {
...state,
text: state.text.toLowerCase(),
};
default:
return state;
}
};
const App = () => {
const [state, dispatch] = useReducer(reducer, initialState);
const handleChange = (event) => {
dispatch({ type: 'SET_TEXT', text: event.target.value });
};
const handleToggleUpperCase = () => {
dispatch({ type: 'TOGGLE_UPPER_CASE' });
};
const handleLowerCase = () => {
dispatch({ type: 'LOWERCASE' });
};
return (
<div>
<input type="text" value={state.text} onChange={handleChange} />
<button onClick={handleToggleUpperCase}>Toggle Upper Case</button>
<button onClick={handleLowerCase}>Toggle Lower Case</button>
<p>{state.text}</p>
</div>
);
};
const initialState = {
text: "",
isUpperCase: false,
};
const reducer = (state, action) => {
switch (action.type) {
case 'SET_TEXT':
return {
...state,
text: action.text,
};
case 'TOGGLE_UPPER_CASE':
return {
...state,
text: state.text.toUpperCase(),
};
case 'LOWERCASE':
return {
...state,
text: state.text.toLowerCase(),
};
default:
return state;
}
};
const App = () => {
const [state, dispatch] = useReducer(reducer, initialState);
const handleChange = (event) => {
dispatch({ type: 'SET_TEXT', text: event.target.value });
};
const handleToggleUpperCase = () => {
dispatch({ type: 'TOGGLE_UPPER_CASE' });
};
const handleLowerCase = () => {
dispatch({ type: 'LOWERCASE' });
};
return (
<div>
<input type="text" value={state.text} onChange={handleChange} />
<button onClick={handleToggleUpperCase}>Toggle Upper Case</button>
<button onClick={handleLowerCase}>Toggle Lower Case</button>
<p>{state.text}</p>
</div>
);
};
<예제 1>은 입력 상자에서 텍스트를 가져오고, 사용자가 버튼을 클릭하도록 해 전체 대문자 또는 전체 소문자로 이 텍스트를 표시하도록 한다. 코드는 const [state, dispatch] = useReducer(reducer, initialState);로 새 리듀서를 선언한다. useReducer는 리듀서 함수와 initialstate를 받고 배열을 반환한다. 이 배열을 state 및 dispatch 변수로 해체한다.
리듀서 자체는 const reducer = (state, action) =>로 정의되며, 2인수 함수를 제공한다. 코드에서 dispatch 함수가 호출될 때마다 현재 상태와 함께 액션 객체를 전달한다. 여기서 액션 객체에는 형식 필드가 있으며, 이를 사용해 상태를 변환할 방법을 결정한다. 어느정도 복잡한 애플리케이션에서 useReducer는 복잡성 관리에 도움이 될 수 있고, 컨텍스트를 사용해 애플리케이션 전반에서 공유도 가능하다. 애플리케이션의 복잡성으로 인해 useState를 관리하기가 어렵다면 useReducer 후크가 도움이 된다.
useCallback
useCallback 후크는 성능 후크다. 함수를 받으며, 모든 호출자에서 하나의 버전만 반환 및 재사용하도록 보장한다. 함수의 비용이 크고 루프 또는 자식 구성요소에 의해 반복적으로 호출되는 경우 useCallback 후크로 상당한 성능 향상을 얻을 수 있다. 이러한 종류의 최적화를 함수의 메모이징(memoizing)이라고 한다.<예시 2>에는 useCallback을 사용해 목록의 많은 항목에 걸쳐 같은 함수를 사용한다. 라이브 JSFiddle 예제도 있다.
<예시 2> 반복되는 목록의 useCallback
const List = ({ items }) => {
const [counter, setCounter] = React.useState(0);
const incrementCounter = React.useCallback(() => {
setCounter(counter + 1);
}, [counter]);
return (
<ul>
{items.map((item) => (
<li key={item.id}>
{item} - {counter}
<button onClick={incrementCounter}>Increment</button>
</li>
))}
</ul>
);
};
const [counter, setCounter] = React.useState(0);
const incrementCounter = React.useCallback(() => {
setCounter(counter + 1);
}, [counter]);
return (
<ul>
{items.map((item) => (
<li key={item.id}>
{item} - {counter}
<button onClick={incrementCounter}>Increment</button>
</li>
))}
</ul>
);
};
React.useCallback()을 사용해 새로운 메모이징된 함수 incrementCounter를 생성한다. list의 onClick 핸들러에서 일반 함수로 메모이징된 함수를 사용할 수 있다. useCallback()은 함수를 첫 번째 인수로 받는다. 이 함수 내에서 필요한 모든 작업을 수행할 수 있다. 중요한 차이점은 리액트는 종속성 변수(<예시 2>에서는 counter 변수) 목록에서 뭔가가 변경되지 않는 한 함수의 캐시된 값을 반환한다는 것이다.
이는 값비싼 함수를 여러 호출자, 특히 자식 구성요소 사이에 공유해야 하는 경우 매우 강력한 힘을 발휘한다. 예를 들어 다음에 살펴볼 useMemo에서 useCallback이 함수 자체를 숨긴다는 것을 볼 수 있다. 즉, useCallback은 실제 함수가 나타날 때마다 다시 생성되는 것을 방지하고 필요할 때만 다시 생성한다.
useMemo
useMemo 후크는 useCallback의 자매 격이다. useCallback은 함수를 캐시하고 useMemo는 함수 반환 값을 캐시한다. 미묘하지만 중요한 차이다. 언제 useCallback이 아닌 useMemo를 사용해야 할까? 답은 useMemo는 사용할 수 있을 때, useCallback은 필요할 때 사용하라는 것이다. 렌더링에서 함수 자체를 생성하는 데서 오는 성능 저하를 피하려면 useCallback이 유리하다. useMemo는 함수가 나오는 모든 곳에서 함수가 재생성되는 것을 막지 않기 때문이다. 그러나 useMemo는 종속성이 변경되지 않은 경우 함수가 캐시된 값을 반환하도록 보장한다.<예시 3>에서 useMemo의 사용 예를 볼 수 있다. 라이브 JSFiddle에서도 예제를 볼 수 있다.
<예시 3> useMemo
const { useMemo, useState } = React;
const ExpensiveComputationComponent = () => {
const [count, setCount] = useState(0);
const computeExpensiveValue = (count) => {
let result = 0;
for (let i = 0; i < count * 10000000; i++) {
result += i;
}
return result;
};
const memoizedValue = useMemo(() => computeExpensiveValue(count), [count]);
return (
<div>
<p>Count: {count}</p>
<p>Expensive Value: {memoizedValue}</p>
<button onClick={() => setCount(count + 1)}>Increment Count</button>
</div>
);
};
const ExpensiveComputationComponent = () => {
const [count, setCount] = useState(0);
const computeExpensiveValue = (count) => {
let result = 0;
for (let i = 0; i < count * 10000000; i++) {
result += i;
}
return result;
};
const memoizedValue = useMemo(() => computeExpensiveValue(count), [count]);
return (
<div>
<p>Count: {count}</p>
<p>Expensive Value: {memoizedValue}</p>
<button onClick={() => setCount(count + 1)}>Increment Count</button>
</div>
);
};
<예시 3>에는 컴퓨팅 비용이 큰 함수인 computeExpensiveValue가 있다. 이 함수는 단일 입력인 count에 의존한다. computeExpensiveValue(count), [count])를 사용해서 리액트에 ‘count가 변경된 경우에만 이 함수를 실행하고 그렇지 않은 경우 캐시된 계산을 반환하라’고 지시할 수 있다. 여기서도 useCallback과의 구분이 명확하지 않다. 중요한 차이점은 useCallback은 함수 자체가 반복적으로 인스턴스화되면서 성능 저하를 유발할 때 사용하는 후크라는 것이다. 그렇지 않은 경우에는 useMemo가 더 좋은 선택이다.
useContext
리액트에서 컨텍스트는 구성요소 외부에 존재하며 모든 구성요소가 액세스할 수 있는 가변 범위다. 즉, 애플리케이션 전체 데이터를 위한 빠르고 쉬운 전역 공간이다. 복잡한 시나리오의 경우 리덕스와 같은 공식적인 데이터 스토어를 사용하는 편이 더 나을 수 있지만 많은 사용 사례에서 context로 충분하다. useContext 후크는 함수형 구성요소가 컨텍스트와 상호작용하는 방법이다.<예시 4>에는 Speak와 Happy, 두 개의 구성요소가 있으며 애플리케이션 부모 구성요소인 App이 이 둘을 사용한다. 사용자는 dog 상태와 cat 상태 사이를 전환할 수 있으며 전역 컨텍스트를 통해 자식 구성요소가 그 선택을 반영한다. 예를 들어 꼬리를 흔들거나 골골거리는 소리 내기 등이다. 이 예제의 라이브 JSFiddle을 확인할 수 있다.
<예시 4> useContext 사용 예
const { createContext, useContext, useState } = React;
const AnimalContext = createContext();
const Speak = () => {
const { animalType } = useContext(AnimalContext);
return (
<div>
{animalType === 'dog' ? 'woof' : 'meow'}
</div>
);
};
const Happy = () => {
const { animalType } = useContext(AnimalContext);
return (
<div>
{animalType === 'dog' ? 'wag tail' : 'purr'}
</div>
);
};
const App = () => {
const [animalType, setAnimalType] = useState('dog');
const toggleAnimalType = () => {
setAnimalType(prevAnimalType => (prevAnimalType === 'dog' ? 'cat' : 'dog'));
};
return (
<div>
<button onClick={toggleAnimalType}>Toggle animal type</button>
<div>{animalType}</div>
<AnimalContext.Provider value={{ animalType }}>
<Speak />
<Happy />
</AnimalContext.Provider>
</div>
);
};
const AnimalContext = createContext();
const Speak = () => {
const { animalType } = useContext(AnimalContext);
return (
<div>
{animalType === 'dog' ? 'woof' : 'meow'}
</div>
);
};
const Happy = () => {
const { animalType } = useContext(AnimalContext);
return (
<div>
{animalType === 'dog' ? 'wag tail' : 'purr'}
</div>
);
};
const App = () => {
const [animalType, setAnimalType] = useState('dog');
const toggleAnimalType = () => {
setAnimalType(prevAnimalType => (prevAnimalType === 'dog' ? 'cat' : 'dog'));
};
return (
<div>
<button onClick={toggleAnimalType}>Toggle animal type</button>
<div>{animalType}</div>
<AnimalContext.Provider value={{ animalType }}>
<Speak />
<Happy />
</AnimalContext.Provider>
</div>
);
};
useRef
useRef 후크는 렌더 사이클 외부의 참조를 관리한다. useState는 변경 시 리액트 엔진이 렌더링하도록 하는 반면 useRef는 그렇지 않다. useRef 후크는 리액트의 한쪽에 따로 마련된 특별한 영역이라고 할 수 있으며 ‘이 변수는 특별하며 리액티브 UI의 일부가 아니다’라고 알리는 역할을 한다. useRef의 가장 일반적인 사용 사례는 DOM 및 해당 API에 직접 액세스할 수 있는 권한을 획득하는 것이다. 일반적으로 리액티브적 사고방식에서 이는 지양하는 부분이고 모든 것이 리액티브 엔진을 통해 처리되어야 하지만, 불가피한 경우도 있다.실제로 <예시 5>에서 버튼이 클릭되면 useRef 후크를 사용해 입력 필드에 대한 참조를 저장하고 DOM 메서드를 사용해 포커스를 설정하고 값을 “Something amazing”으로 설정한다. useRef 예제에 대한 JSFiddle이 있다.
<예시 5> 간단한 useRef 예제
const App = () => {
const inputRef = React.useRef(null);
const handleClick = () => {
inputRef.current.focus();
inputRef.current.value="Something amazing";
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={handleClick}>Focus Input</button>
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<App/>
);
const inputRef = React.useRef(null);
const handleClick = () => {
inputRef.current.focus();
inputRef.current.value="Something amazing";
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={handleClick}>Focus Input</button>
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<App/>
);
useEffect
useEffect는 useState 다음으로 가장 일반적인 후크다. API를 호출하고 DOM을 변경하거나, 기타 구성요소 상태에서 뭔가 변경이 발생할 때 작업을 수행하는 데 자주 사용된다. 어떤 면에서 useEffect는 리액티브 변수와 이에 대해 발생하는 동작을 정의할 수 있게 해준다. <예시 6>에서는 스타워즈 캐릭터를 선택하는 드롭다운 목록을 정의한다. 이 값이 변경되면 스타워즈 API(SWAPI)를 호출하고 캐릭터의 데이터를 표시한다. 이 예제의 라이브 JSFiddle은 여기에서 볼 수 있다.<예시 6> useEffect와 API 호출
const { useState, useEffect } = React;
const StarWarsCharacter = () => {
const [character, setCharacter] = useState('Luke Skywalker');
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(`https://swapi.dev/api/people/?search=${character}`);
const jsonData = await response.json();
setData(jsonData.results[0]);
} catch (error) {
console.error('Error fetching data:', error);
}
};
fetchData();
}, [character]);
const handleCharacterChange = (event) => {
setCharacter(event.target.value);
};
return (
<div>
<h1>Star Wars Character Details</h1>
<select value={character} onChange={handleCharacterChange}>
<option value="Luke Skywalker">Luke Skywalker</option>
<option value="Han Solo">Han Solo</option>
<option value="Princess Leia">Princess Leia</option>
</select>
{data ? (
<div>
<h2>{data.name}</h2>
<p>Height: {data.height}</p>
<p>Mass: {data.mass}</p>
<p>Hair Color: {data.hair_color}</p>
</div>
) : (
<p>Loading...</p>
)}
</div>
);
};
const StarWarsCharacter = () => {
const [character, setCharacter] = useState('Luke Skywalker');
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(`https://swapi.dev/api/people/?search=${character}`);
const jsonData = await response.json();
setData(jsonData.results[0]);
} catch (error) {
console.error('Error fetching data:', error);
}
};
fetchData();
}, [character]);
const handleCharacterChange = (event) => {
setCharacter(event.target.value);
};
return (
<div>
<h1>Star Wars Character Details</h1>
<select value={character} onChange={handleCharacterChange}>
<option value="Luke Skywalker">Luke Skywalker</option>
<option value="Han Solo">Han Solo</option>
<option value="Princess Leia">Princess Leia</option>
</select>
{data ? (
<div>
<h2>{data.name}</h2>
<p>Height: {data.height}</p>
<p>Mass: {data.mass}</p>
<p>Hair Color: {data.hair_color}</p>
</div>
) : (
<p>Loading...</p>
)}
</div>
);
};
useLayoutEffect
useLayoutEffect는 잘 알려지지 않은 후크로, 렌더링된 DOM을 측정할 때 사용한다. useLayoutEffect 후크는 리액트가 UI를 그린 후에 호출되므로 확실히 실제 레이아웃에 액세스할 수 있게 해준다. <예시 7>에서는 useRef를 사용해 DOM에서 요소를 가져오고 useLayoutEffect를 사용해 렌더링이 완료될 때 알림을 받는다. 그런 다음 DOM API를 사용해 요소 크기를 계산한다. 이 예제의 JSFiddle을 참조하라.<예시 7>. 요소를 측정하기 위한 useLayoutEffect
const { useState, useRef, useLayoutEffect } = React;
const App = () => {
const [width, setWidth] = useState(null);
const elementRef = useRef(null);
useLayoutEffect(() => {
if (elementRef.current) {
const { width } = elementRef.current.getBoundingClientRect();
setWidth(width);
}
}, []);
return (
<div>
<div ref={elementRef}>Measure Width</div>
<p>Width: {width}</p>
</div>
);
};
const App = () => {
const [width, setWidth] = useState(null);
const elementRef = useRef(null);
useLayoutEffect(() => {
if (elementRef.current) {
const { width } = elementRef.current.getBoundingClientRect();
setWidth(width);
}
}, []);
return (
<div>
<div ref={elementRef}>Measure Width</div>
<p>Width: {width}</p>
</div>
);
};
useImperativeHandle
가끔 구성요소로 직접 참조를 가져와야 할 때가 있는데, useRef를 사용하면 된다. 또한 구성요소의 DOM에 대한 액세스도 제공하려면 forwardRef를 사용하면 된다. 다만 참조를 통해 구성요소가 노출하는 동작을 맞춤 설정해야 할 때가 종종 있다. 이를 위해서는 useImperativeHandle 후크를 사용해야 한다. 이 후크는 설명보다 예제를 봐야 한다.<예시 8>(라이브는 여기 참조)은 부모 구성요소인 App과 자식 구성요소인 Expounder를 보여준다. Expounder는 useImperativeHandle을 통해 맞춤 설정된 참조 API를 노출해 App이 참조의 expound()를 호출할 수 있도록 하고, 결과적으로 맞춤 설정된 동작(UI에 “The way that can be told is not the eternal way” 출력)을 유도한다. <예시 8>의 ChildComponent는 forwardRef를 사용해서 DOM 참조를 포함한다.
<예시 8> useImperativeHandle
const { useState, useRef, forwardRef, useImperativeHandle } = React;
const ChildComponent = forwardRef((props, ref) => {
const [count, setCount] = useState("");
const expound = () => {
setCount("The way that can be told is not the eternal way.");
};
useImperativeHandle(ref, () => ({
expound
}));
return (
<div>
<p>Count: {count}</p>
</div>
);
});
const App = () => {
const childRef = useRef(null);
const handleClick = () => {
childRef.current.expound();
};
return (
<div>
<ChildComponent ref={childRef} />
<button onClick={handleClick}>Expound</button>
</div>
);
};
const ChildComponent = forwardRef((props, ref) => {
const [count, setCount] = useState("");
const expound = () => {
setCount("The way that can be told is not the eternal way.");
};
useImperativeHandle(ref, () => ({
expound
}));
return (
<div>
<p>Count: {count}</p>
</div>
);
});
const App = () => {
const childRef = useRef(null);
const handleClick = () => {
childRef.current.expound();
};
return (
<div>
<ChildComponent ref={childRef} />
<button onClick={handleClick}>Expound</button>
</div>
);
};
useImperativeHandle을 사용하면 첫 번째 인수와 원본 참조를 가져온 다음 두 번째 인수 함수에서 반환한 객체로 데코레이션할 수 있다. 여기서는 해체 할당을 사용해 expound 메서드 만으로, useImperativeHandle(ref, () => ({ expound })와 같이 익명 인라인 객체를 만든다. useImperativeHandle 후크를 사용한 결과로, ParentComponent가 ChildComponent로부터 받은 참조에도 expound 메서드가 있고, 이를 호출하여 필요한 기능을 실행할 수 있다.
결론
리액트의 다양한 후크를 사용하는 것은 리액트 프레임워크를 최대한 활용하기 위해 중요한 부분이다. 여기서는 유용한 후크의 몇 가지 샘플을 살펴봤지만 리액트에는 그 외에도 많은 후크가 포함돼 있다. 또한 다양한 용도 및 프레임워크와의 통합을 위한 서드파티 후크도 있다. 필요한 경우 직접 맞춤형 후크를 정의할 수 있다.editor@itworld.co.kr
Tags
Sponsored
Surfshark
“유료 VPN, 분명한 가치 있다” VPN 선택 가이드
ⓒ Surfshark VPN(가상 사설 네트워크, Virtual Private Network)은 인터넷 사용자에게 개인 정보 보호와 보안을 제공하는 중요한 도구로 널리 인정받고 있다. VPN은 공공 와이파이 환경에서도 데이터를 안전하게 전송할 수 있고, 개인 정보를 보호하는 데 도움을 준다. VPN 서비스의 수요가 증가하는 것도 같은 이유에서다. 동시에 유료와 무료 중 어떤 VPN을 선택해야 할지 많은 관심을 가지고 살펴보는 사용자가 많다. 가장 먼저 사용자의 관심을 끄는 것은 별도의 예산 부담이 없는 무료 VPN이지만, 그만큼의 한계도 있다. 무료 VPN, 정말 괜찮을까? 무료 VPN 서비스는 편리하고 경제적 부담도 없지만 고려할 점이 아예 없는 것은 아니다. 보안 우려 대부분의 무료 VPN 서비스는 유료 서비스에 비해 보안 수준이 낮을 수 있다. 일부 무료 VPN은 사용자 데이터를 수집해 광고주나 서드파티 업체에 판매하는 경우도 있다. 이러한 상황에서 개인 정보가 유출될 우려가 있다. 속도와 대역폭 제한 무료 VPN 서비스는 종종 속도와 대역폭에 제한을 생긴다. 따라서 사용자는 느린 인터넷 속도를 경험할 수 있으며, 높은 대역폭이 필요한 작업을 수행하는 데 제약을 받을 수 있다. 서비스 제한 무료 VPN 서비스는 종종 서버 위치가 적거나 특정 서비스 또는 웹사이트에 액세스하지 못하는 경우가 생긴다. 또한 사용자 수가 늘어나 서버 부하가 증가하면 서비스의 안정성이 저하될 수 있다. 광고 및 추적 위험 일부 무료 VPN은 광고를 삽입하거나 사용자의 온라인 활동을 추적하여 광고주에게 판매할 수 있다. 이 경우 사용자가 광고를 보아야 하거나 개인 정보를 노출해야 할 수도 있다. 제한된 기능 무료 VPN은 유료 버전에 비해 기능이 제한될 수 있다. 예를 들어, 특정 프로토콜이나 고급 보안 기능을 지원하지 않는 경우가 그렇다. 유료 VPN의 필요성 최근 유행하는 로맨스 스캠은 인터넷 사기의 일종으로, 온라인 데이트나 소셜 미디어를 통해 가짜 프로필을 만들어 상대를 속이는 행위다. 이러한 상황에서 VPN은 사용자가 안전한 연결을 유지하고 사기 행위를 방지하는 데 도움이 된다. VPN을 통해 사용자는 상대방의 신원을 확인하고 의심스러운 활동을 감지할 수 있다. 서프샤크 VPN은 구독 요금제 가입 후 7일간의 무료 체험을 제공하고 있다. ⓒ Surfshark 그 외에도 유료 VPN만의 강점을 적극 이용해야 하는 이유는 다음 3가지로 요약할 수 있다. 보안 강화 해외 여행객이 증가함에 따라 공공 와이파이를 사용하는 경우가 늘어나고 있다. 그러나 공공 와이파이는 보안이 취약해 개인 정보를 노출할 위험이 있다. 따라서 VPN을 사용하여 데이터를 암호화하고 개인 정보를 보호하는 것이 중요하다. 서프샤크 VPN은 사용자의 개인 정보를 안전하게 유지하고 해킹을 방지하는 데 유용하다. 개인정보 보호 인터넷 사용자의 검색 기록과 콘텐츠 소비 패턴은 플랫폼에 의해 추적될 수 있다. VPN을 사용하면 사용자의 IP 주소와 로그를 숨길 수 있으며, 개인 정보를 보호할 수 있다. 또한 VPN은 사용자의 위치를 숨기고 인터넷 활동을 익명으로 유지하는 데 도움이 된다. 지역 제한 해제 해외 여행 중에도 한국에서 송금이 필요한 경우가 생길 수 있다. 그러나 IP가 해외 주소이므로 은행 앱에 접근하는 것이 제한될 수 있다. VPN을 사용하면 지역 제한을 해제해 해외에서도 한국 인터넷 서비스를 이용할 수 있다. 따라서 해외에서도 안전하고 편리하게 인터넷을 이용할 수 있다. 빠르고 안전한 유료 VPN, 서프샤크 VPN ⓒ Surfshark 뛰어난 보안 서프샤크 VPN은 강력한 암호화 기술을 사용하여 사용자의 인터넷 연결을 안전하게 보호한다. 이는 사용자의 개인 정보와 데이터를 보호하고 외부 공격으로부터 사용자를 보호하는 데 도움이 된다. 다양한 서버 위치 서프샤크 VPN은 전 세계 곳곳에 여러 서버가 위치하고 있어, 사용자가 지역 제한된 콘텐츠에 액세스할 수 있다. 해외에서도 로컬 콘텐츠에 손쉽게 접근할 수 있음은 물론이다. 속도와 대역폭 서프샤크 VPN은 빠른 속도와 무제한 대역폭을 제공하여 사용자가 원활한 인터넷 경험을 누릴 수 있도록 지원한다. 온라인 게임, 스트리밍, 다운로드 등 대역폭이 필요한 활동에 이상적이다. 다양한 플랫폼 지원 서프샤크 VPN은 다양한 플랫폼 및 디바이스에서 사용할 수 있다. 윈도우, 맥OS, iOS, 안드로이드 등 다양한 운영체제 및 디바이스에서 호환되어 사용자가 어디서나 안전한 인터넷을 즐길 수 있다. 디바이스 무제한 연결 서프샤크 VPN은 무제한 연결을 제공하여 사용자가 필요할 때 언제든지 디바이스의 갯수에 상관없이 VPN을 사용할 수 있다.
추천기사
