node.js/React.js

[React] Hooks

IT공부블로그 2019. 12. 6. 13:06
728x90
반응형


useState

기본 Hooks

함수형 컴포넌트에서 state를 사용할수있도록 해줌

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { useState } from 'react';
 
const Counter = () => {
    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>
    )
}
cs


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

value : state

setValue : value 값을 변경할 state 함수

useState(value의 초기값을 넣음);

useState는 여러개 사용할수있다


useEffect

componentDidMount와 componentDidUpdate를 합친거와 비슷

마운트 or 업데이트 되고난뒤 뒷정리 등을 할때 사용

업데이트 되기 직전의 값 확인가능

useEffect의 2번쨰 인자에 [] 를 주면 Unmount될때 작동

useEffect의 2번쨰 인자에 []에 특정한 값을 주면 해당 값이 변할때 작동

ex) [name]

useEffect( () => {
console.log('렌더링이 완료되었습니다.');
console.log(name);
console.log({
name,
nickname
});

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


useReducer

useState보다 좀 더 다양하게 상태를 변화시킬수있다

1
2
3
4
const [state, dispatch] = useReducer(reducer, {
        name: '',
        nickname: ''
    });
cs

dispatch : 액션을 발생시키는 함수

reducer : 리듀서 함수

1
2
3
4
5
6
const reducer = (state, action) => {
    return {
        ...state,
        [action.name]: action.value
    }
}
cs
1
2
3
4
5
6
7
8
9
10
const reducer = (state, action) => {
    switch(action.type){
        case 'INCREMENT':
            return {value: state.value + 1};
        case 'DECREMENT':
            return {value: state.value - 1};
        default:
            return state;
    }
}   
cs

action의 타입에 따라 변함


useMemo

라이프사이클의 shouildComponentUpdate과 같이 비슷함

연산의 최적화에 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import React, { useState, useMemo } from 'react';
 
const getAverage = numbers => {
    console.log('평균값 계산 중..');
    if(numbers.length === 0) return 0;
    const sum = numbers.reduce((a, b) => a + b);
    return sum / numbers.length;
}
 
const Average = () => {
    const [list, setList] = useState([]);
    const [number, setNumber] = useState('');
 
    const onChange = e => {
        setNumber(e.target.value);
    }
 
    const onInsert = e => {
        const nextList = list.concat(parseInt(number));
        setList(nextList);
        setNumber('');
    }
 
    const avg = useMemo( () => getAverage(list), [list]);
 
    return (
        <div>
            <input value={number} onChange={onChange}/>
            <button onClick={onInsert}>등록</button>
            <ul>
                {list.map( (value, index) => (
                    <li key={index}>{value}</li>
                ))}
            </ul>
            <div>
                <b>평균 값 : </b> {avg}
            </div>
        </div>
    )
}
 
export default Average;
cs


1
const avg = useMemo( () => getAverage(list), [list]);
cs
ㅇ

위와같이 코드 작성시 list에 요소가 추가될떄만 getAverage함수가 호출됨

728x90
반응형
저작자표시 비영리 변경금지