뷰포트의 너비(px). 기본값 : 980 범위 : 200~10,000 px 속성값은 표2처럼 항수(예:device-width) 로 설정할 수도 있음. ----------------------------------
height
뷰포트의 높이(px) 기본값 : width 속성값과 장치 영상의 가로 세로 비에기초하여 계산됨. 범위 : 223~10,000 px 속성값은 표2처럼 항수로 설정할 수도 있음. ----------------------------------
initial-scale
뷰포트의 초기 배율(곱하는 수) 기본값 : 보이는 영역에서 웹페이지에 맞추기 위해 계산됨 범위 : minimum-scale과 maximum-scale 속성값으로 결정됨 ----------------------------------
minimum-scale
뷰포트의 최소 배율값 기본값 : 0.25 범위 : 0~ 10.0 ----------------------------------
maximum-scale
뷰포트의 최대 배율값 기본값 : 5.0 범위 :0~ 10.0 ----------------------------------
user-scalable
사용자가 화면을 축소/확대(zoom in/out)) 할 수 있는지 여부를 결정 (사용자가 뷰포트의 배율을 변경할 수 있든 아니든) yes는 크기 조절을 가능하게 설정(기본값) no는 크기 조절이 불가능하게 설정 no로 설정하면 웹페이지가 input 영역에서 텍스트를 입력할 때 스크롤되는 것도 방지한다.
안녕하세요. 오늘은 React의 custom hooks에 대해 알아보고 직접 만들어보는 시간을 가져보도록 하겠습니다.
Custom hook이란?
요즘 React 개발 트랜드는 react hook을 적극 활용하는 것입니다. hook을 사용함으로 인해 class component 없이도 여러 state 값을 변경해줄 수 있게 되었고, 이는 React 개발자들이 function component를 통한 간결한 코드 작업을 할수있게끔 만들어주었습니다. useState, useEffect 등등 hook을 사용하는 것만으로도 코드가 훨씬 보기 좋아졌지만,반복되는 훅 활용 메소드들을 하나로 줄여줌으로써 더 간결하고 보기 좋은 코드를 만들 수 있는 것이 바로 custom hooks입니다.이름에서 알 수 있다시피 custom hook은 개발자 본인이 직접 hook을 만드는 것이죠.
그렇지만 중요한 포인트가 있습니다.custom hook의 이름은 무조건!!!! use로 시작해야합니다.이 점은 꼭 유념해주셔야 합니다.
사용 예제 코드
custom hooks 적용 전
Jsonplaceholder API를 사용하여 간단하게 구현해보도록 하겠습니다. 우선 UserList, UserDetail 컴포넌트를 생성했습니다. Jsonplaceholder에서 유저정보 10개를 받아 리스트로 보여주고 유저이름을 클릭하면 UserDetail page로 이동하는 아주 간단한 예제입니다.
UserList,UserDetail 컴포넌트에서 겹쳤던 fetch부분을 그대로 넣어주고 data를 return 해주면 끝입니다. url을 인자로 받고 해당 url을 useEffect의 의존성 배열로 넣어주면 custom hook이 원할때 잘 호출되겠죠??이제 UserList, UserDetail 컴포넌트가 어떻게 변경할 수 있는지 살펴볼까요??
custom hooks 적용 후
//UserList.js
import React from "react"
import { Link } from "react-router-dom"
import useFetch from "./hooks/useFetch"
function UserList() {
const userList = useFetch("https://jsonplaceholder.typicode.com/users")
return userList.map(user => (
<Link
to={`/${user.id}`}
key={user.id}
className="list-group-item list-group-item-action"
>
<div>{user.name}</div>
</Link>
))
}
export default UserList
//UserDetail.js
import React from "react"
import { useParams } from "react-router-dom"
import useFetch from "./hooks/useFetch"
function UserDetail(props) {
const { id } = useParams()
const userInfo = useFetch(`https://jsonplaceholder.typicode.com/users/${id}`)
return (
<div>
{userInfo.name}
<br />
{userInfo.email}
<br />
{userInfo.phone}
</div>
)
}
export default UserDetail
어떤가요??단 한줄로 useEffect와 useState 그리고 fetch 함수를 대체할 수가 있어졌습니다.이전 코드보다 훨씬 간단해졌고 custom hooks의 네이밍이 잘되어있다는 가정하에 코드 가독성도 훨씬 높아지지 않았나요?? 지금은 fetch함수를 사용하는 component가 2개밖에 없지만 fetch함수를 사용하는 컴포넌트가 더 많으면 많을 수록 우리의 custom hooks는 그 힘을 발휘할 것입니다 ㅎㅅㅎ
마무리
이렇게컴포넌트 로직을 뽑아내서 정의한 후 간편하게 호출할 수 있다는 것이 custom hooks의 정말 큰 장점이 아닐까 생각이됩니다. 이 밖에도 여러개의 input들이 존재하고 각각 여러개의 state 값을 control할 때에도 useInput이라는 custom hooks를 사용하여 코드를 간단하게 만들 수 있을겁니다. 아니면 user 정보를 useAuth라는 custom hooks를 만들어 그때그때 편하게 호출할 수도 있겠죠? custom hooks를 좋은네이밍과 더불어 사용하면 코드의 가독성을 높이고 짧고 간결한 코드를 작성할 수가 있을겁니다.
