Hooks (5) 썸네일형 리스트형 ReactJS(13) useForm ReactJS에서 form 작업을 할 때 useForm hook을 사용하면 작업이 엄청 간편해진다 npm i react-hook-form 우선 다운을 하고 바로 예시를 보자 예) register(input 이름)은 input에 적용시켜서 다양한 event들을 받을 수 있고 (onChange, onBlur) 다른 작업들을 할 수 있다 예) useForm에서 handleSubmit은 input을 submit 했을 때 받을 수 있는 정보들을 보여준다 예시와 같이 onSubmit 함수를 만들어 handleSubmit을 form onSubmit props에 적용시킨 뒤 data를 console로 확인했더니 input 이름과 submit 한 정보를 볼 수 있다 이것뿐만 아니라 input에 더 많은 옵션들을 추가할 .. ReactJS (11) useQuery useQuery는 fetching 할 때 매우 유용한 hook이다 npm i react-query React 버전이 18이면 react query를 못 불러오는 현상이 있어 npm i @tanstack/react-query 이 방식으로 react query를 다운로드 해야한다 이제 useQuery의 사용방법에 대해 알아보자 우선 시작하기 전에 useQuery 세팅을 해야 하는데 간단하다 QueryClient를 만들고 QueryClientProvider component (client props를 넣어줘야 된다)로 App component를 감싸면 된다 이렇게 해서 세팅을 마쳤다 다음으로 api에서 fetch를 해보자 이후 useQuery(고유식별자 다른 query와 고유식별자가 같으면 안 됨, fetch.. ReactJS (10) useRouteMatch useRouteMatch는 특정 url에 들어와 있는지 확인해 주는 hook이다 예) useRouteMatch를 사용할 때에는 () 안에 확인하고 싶은 url을 넣어주면 된다 예시에서는 first 페이지에 있는지 확인을 위해 /first를 넣어주었다 이후 console을 확인해 보면 현재 Second 페이지에 있기 때문에 null이라고 나오는 걸 확인할 수 있다 그럼 First 페이지로 가보면 뭐가 나오는지 한번 보자 이렇게 url에 대한 간단한 정보가 나오는 걸 확인할 수 있다 여기서 끝내긴 아쉬우니까 useRouteMatch를 통해 간단한 작업을 한번 해보도록 하자 우선 페이지에 들어가 있을 때 그 페이지의 Link의 색깔을 바꿔주도록 해보자 예) 우선 첫 번째로 secondMatch를 만들어주고 B.. ReactJS (9) useEffect ReactJS는 state가 변경될 때마다 component 안에 있는 모든 코드가 재실행된다 하지만 API를 호출하거나 중요한 작업을 할 때에는 component가 불려 올 때 한 번만 실행되는 걸 원하는 경우도 생긴다 그때 바로 useEffect를 사용한다 useEffect는 component가 처음 렌더링 될때만 실행되게 한다 그럼 사용방법을 알아보자 예) Click me button을 누를때마다 setValue를 통해 value 값을 1씩 더해주었다 console에 보면 component을 렌더링해 모든 코드들이 한 번씩 실행되는 걸 볼 수 있다 하지만 useEffect를 사용하면 state가 변경되어도 재실행이 되지 않아야 되는데 button을 몇 번 클릭해 보고 console을 다시 확인해 보.. ReactJS (6) useParams ReactJS (5)에서 route를 만들 때 info 변수를 만들었다 이렇게 url에서 어떠한 정보를 빼내올때 useParams를 쓰면 된다 예) 이렇게 useParams를 써준후 url은 /wef로 해주고 info 페이지로 이동후 console을 열어주면 이렇게 wef가 info 변수에 찍히는 걸 볼 수 있다 그럼 이 object안에 있는 info를 어떻게 가져올까? 이런 식으로 {변수이름}을 해주면 바로 정보를 빼내올 수 있다 필자는 typescript을 쓰기 때문에 따로 interface도 지정해 준 걸 볼 수 있다 이전 1 다음
