React- hooks

드디어 Hooks 가 뭔지 감이 온다.

 

공식 문서는 ㅠㅠ 개념만 익혀서 뭔가 사용례가 너무 궁금해서 찾아보니 역시 벨로퍼트님이다.

 

https://velog.io/@velopert/react-hooks

리액트의 Hooks 완벽 정복하기

 

이 글을 참고해서 한땀한땀 작성해가면서 공부해보았다.

 

빠른 시일내에 복습하면 이제 뭔지 제대로 알 듯한데..

 

커스텀 훅스 너무 유용하고 재밌다!

 

context 부분만 좀 더 찾아서 공부해봐야지.

 

 ※ push 말고 concat 으로 새로운 배열을 만들어서 변수에 할당한 이유 : push는 추가된 요소를 포함한 새로운 리스트의 length를 리턴한다.

 

 

 

const onInsert = useCallback(e => {

const nextList = list.concat(parseInt(number));

setList(nextList);

setNumber('');

inputEl.current.focus();

}, [number, list]);

//number 혹은 list 가 바뀌었을 때만 함수 생성 - 기존의 number 와 list 를 조회해서 nextList 를 생성하기 때문에 배열 안에 number 와 list 를 꼭 넣어주어야 합니다.

 

 

// function reducer(state, action){

// return {

// ...state,

// [action.name] : action.value

// }

// }

 

const Info2 = () => {

// const [state, dispatch] = useReducer(reducer, {

// name: '',

// nickname: ''

// })

const [state, onChange] = useInput({

name: '',

nickname:''

})

 

const {name, nickname} = state;

// const onChange = (e) => {

// dispatch(e.target)

// }