8. Hooks(2)

Hooks(1)で整理したものから続けて書きたいと思います.😊

8-5. useRef

useref hookでは、関数要素でrefを簡単に使用できます.前回整理したクラスコンポーネントでrefを使用する方法では、コールバック関数とcreateRefを使用してrefを設定します.今日はHookの利用方法を整理してみましょう

import { useState, useMemo, useCallback, useRef } 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('');
  	//useRef추가
  	const inputEl = useRef(null);
  
	//useCallBack를 사용해 최적화! 컴포넌트가 처음 렌더링 될때만 함수 생성
  	const onChange = useCallback(e => {
    	setNumber(e.target.value);
    }, []);
  	
  	//useCallBack를 사용해 최적화! number, list가 바뀌었을 때만 함수 생성
  	const onInsert = useCallback(() => {
    	const nextList = list.concat(parseInt(number));
      	setList(nextList);
      	setNumber('');
      	inputEl.current.focus();
    }, [number, list]);
  
  	const avg = useMeno(() => getAverage(list), [list]);
  
  	return (
    	<div>
      		<input value={number} onChange={onChange} ref={inputEl}/>
      		<button onClick={onInsert}>등록</button>
			<ul>
              {list.map((value, index) =>(
                //리액트에서 배열만들때에는 key props는 필수!
                <li key={index}>{value}</li>
              ))}
            </ul>
			<div>
            	<b>평균값:</b> {avg}
            </div>
      	</div>
    );	
};

export default Average;

userefを使用してrefを設定すると、userefによって作成されたオブジェクトの現在の値が実際のエンティティを指します.

8-6. カスタムショップ

同様の機能を複数のエレメント間で共有する場合は、Hookをカスタマイズして論理を再使用できます.それを使用するにはReducerを使用する必要があります.

✔ 커스텀 hook 만들기

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];
}

✔ 커스텀 hook 사용하기

const Info = () => {
  	const [state, onChange] = useInputs({
    	name: '',
      	nickname: ''
    });
  	const { name, nickname } = state;
  	
  
  	return (
    	<div>
      		<div>
      			<input value={name} onChange={onChange}/>
      			<input value={nickname} onChange={onChange}/>
      		</div>
			<div>
            	<b>이름:</b> {name}      
            </div>
			<div>
            	<b>닉네임:</b> {nickname} 
            </div>
      	</div>
    )
}

export default Info;

繰り返しのonChangename/ニックネームをCustom Hookで圧縮すると、より簡潔になります.
応答でHooksモードを使用すると、クラス構成部品を作成することなく、ほとんどの機能を実現できます.しかし,反応マニュアルによれば,既存のクラス素子は今後もサポートされる.したがって、メンテナンス中の場合は、クラス構成部品の知識も理解する必要があります.
これははんのうぎじゅつの文章を読む要約です.😊