22.03.23(수) Hooks
Hooks?
Hooks는 리액트 v16.8에 새로 도입된 기능으로
1. 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState,
2. 렌더링 직후에 수행할 작업을 설정하는 useEffect 등의 기능을 제공하여
기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.
useState
함수형 컴포넌트에서도 상태 관리를 할 수 있게 해주는 Hook 함수.
사용법
const [value, setValue] = useState(0);
- useState의 파라미터: 기본으로 설정할 상태 값.
- useState의 반환값: 배열을 반환하며 배열의 첫번째 원소는 상태 값, 두번 째 원소는 상태를 변경하기 위한 setter 함수이다.
사용 예시
import React, { useState } from 'react';
const CounterUseState = () => {
const [value, setValue] = useState(0);
return (
<div>
<p>
현재 카운터 값은 <b>{value}</b>입니다.
</p>
<button onClick={() => setValue(value + 1)}>+1</button>
<button onClick={() => setValue(value - 1)}>-1</button>
</div>
);
};
export default CounterUseState;
useEffect
리액트 컴포넌트가 렌더링 될 때마다 수행할 작업을 설정 할 수 있는 Hook 함수.
사용법
useEffect(()=> {
/*렌더링 직후 수행할 작업*/
return (/*렌더링 직전 또는 언마운트되기 전 수행할 작업*/ );
},[/*검사하고 싶은 값들*/])
useEffect 파라미터: 단계별 수행할 작업을 담은 함수, 검사하고 싶은 값들을 담은 배열
useEffect 반환 값: 렌더링 직전 또는 언마운트 되기 전 수행할 작업을 담은 함수.
사용 예시
import React, { useState, useEffect } from 'react';
const CounterUseEffect = () => {
const [value, setValue] = useState(0);
useEffect(() => {
console.log('카운터 렌더링 완료');
return () => console.log('렌더링 직전 작업 수행 중');
}, [value]);
return (
<div>
<p>
현재 카운터 값은 <b>{value}</b>입니다.
</p>
<button onClick={() => setValue(value + 1)}>+1</button>
<button onClick={() => setValue(value - 1)}>-1</button>
</div>
);
};
export default CounterUseEffect;
useReducer
useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용하는 Hook 함수.
리듀서는 현재 state, 업데이트를 위해 필요한 정보를 담은 action을 전달받아 새로운 state를 반환하는 함수이다.
리듀서 함수에서 새로운 state를 만들어서 반환할 때는 반드시 불변성을 지켜주어야 한다.
useReducer의 가장 큰 장점은 reducer 함수를 따로 정의함으로써 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다는 것.
사용법
function reducer (state,action) {
return 새로운 state;
}
const [state,dispatch] = useReducer(reducer,state의 기본 값);
- useReducer의 반환 값: state, dispatch
- state: 현재 상태
- dispatch: action을 파라미터로 받아 reducer에게 전달해주는 함수.
- reducer: 현재 state와 action을 받아서 새로운 state를 반환하는 함수.
사용예시
import React, { useReducer } from 'react';
function reducer(state, action) {
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>
<p>
현재 카운터 값은 <b>{state.value}</b>입니다.
</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>-1</button>
</div>
);
};
export default Counter;
Author And Source
이 문제에 관하여(22.03.23(수) Hooks), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@koseyeon/22.03.23수-Hooks저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)