Custom Hook

alajillo·2021년 10월 8일
0

React

목록 보기
9/12
post-thumbnail

Custom Hook은 별거 없다

Custom Hook은 기존의 다른 Hook들을 사용할수 있으면 정말 별거 없이 사용 할수 있다.

	const [value, setValue] = useState(0)
	const addValue = useCallback(()=>{setValue(value + 1)},[])

여기서 겹치는 것들이 아주 많다.

useState에서 뽑아온 상태가 useCallback에서 그대로 사용되었다.

import {useState, useCallback} from 'react'
const integrateHooks = (initial)=>{
	const [value, setValue] = useState(initial)
	const addValue = useCallback(()=>{setValue(value + 1)},[])

	return {value,addValue}
}

export default integrateHooks

이게 custom hook이다. 별거 없이 기존의 hook에서 조금의 로직을 추가하면 custom hook이 되고 다른 hook들과 다르게 react에서 가져와야 하는 것들도 기존의 hook을 제외하고는 없다.

import integrateHooks from '~/'

const [value1,addValue1] = intergrateHook(1)
const [value2,addValue2] = intergrateHook(2)
const [value3,addValue3] = intergrateHook(3)
const [value4,addValue4] = intergrateHook(4)
const [value5,addValue5] = intergrateHook(5)
const [value6,addValue6] = intergrateHook(6)

이런식으로 만들어놓은 custom hook을 가져와서 쓰기만 하면 된다.

값을 반환하는 방식이여서 참조관계상 문제될 것도 없고 독립적이고 유용하게 쓰일 수 있다.

근데 모양이 내가 알던 것과 비슷하다.

const [state,setState] = useState(0)

다른점은 내가 만든 integrateHook은 배열의 두번째 함수가 상태를 1씩 증가시키는 것이고

기존의 useState는 배열의 두번째 함수가 상태를 받은 인자로 변환 시키는 것이다.

이런것들 말고도 다양한 방식의 custom Hook을 만들 수 있다.

내가 느낀 Vue와 React의 차이점

우선 Vue의 경우에는 바닐라 자바스크립트만 써본 입장에서 처음에는 사용하기 낯설게 느껴졌지만 프로젝트를 진행하면서 점점 익숙해지다 보니 굉장히 편하게 사용했다.

가장 편했던 것은 데이터만 신경쓰면 화면은 별로 신경을 안써도 알아서 잘되고 최적화도 알아서 다 해주는 것이다.

바닐라 자바스크립트도 노션 프로젝트를 진행했을때는 신경쓸게 너무 많이 있었다.

예를 들어서 데이터를 변경하면 다시 Dom을 조작해서 화면을 바꿔줘야하는데 컴포넌트가 이리저리 흩어져있다보니 모든 컴포넌트들을 어떻게 통제할까도 생각을 해야되고 복잡했지만 Vue는 데이터를 변경하는 것에만 초점을 맞추면 되고 가상 돔을 이용해서 최적화까지 해주니 너무 편했다.

Vue의 조금은 익숙해진 뒤 React를 시작하니까 바닐라 자바스크립트 보다는 편하지만 Vue에 비해서 수동으로 해줘야 할것들이 조금 있는 것 같다.

왜 사람들이 React는 바닐라 자바스크립트를 잘해야 잘할수 있다고 말하는지 조금은 알 것 같다.

여담으로 요즘 Svelte가 뜨는데 뭔차이가 있을까?

React 와 Vue는 가상 돔을 활용해서 렌더링을 할지 말지를 결정한다면 Svelte의 경우에는 가상 돔을 사용하지 않고 데이터의 변경 여부를 활용해서 렌더링을 결정 한다고 한다.

기본적으로는 Vue랑 비슷하게 생긴 것 같다.

profile
Developer's High

0개의 댓글