[React Hooks] Hooks

[React Hooks] Hooks

0. Introducing Hooks

- Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.

- 몇가지 Hooks를 알아보겠다.

useTitle : react document 의 title을 몇개의 hooks와 함께 바꾸는 것이다.

useInput : Input과 같다.

usePageLeave : 유저가 page를 벗어나느 시점을 발견하고 함수를 실행한다.

userClick : 누군가 element를 클릭하는 시점을 발견한다.

useFadeIn : 어떤 element든 상관없이 애니메이션을 element 안으로 서서히 사라지게 만든다.

useFullscreen : 어떤 element든 풀스크린으로 만들거나 일반 화면으로 돌아갈 수 있게 한다.

useHover : 어떤것을 마우스에 올렸을때 감지한다.

useNetwork : Online인지 Offline인지를 상태를 감지한다.

useNotification : norification API를 사용할때 유저에게 알림을 보내준다.

useScroll : 스크롤을 사용할 때를 감지해 알려준다.

useTabs : 웹사이트에 메뉴 또는 무엇이든간에 tab을 사용하기 쉽게 만들어준다.

usePreventLeave : 유저가 변경사항이나 무엇이든간에 저장하지 않고 페이지를 벗어나길 원할때 확인을 하는 것이다.

useConfirm : usePreventLeave와 비슷하지만 어떤 기능이 존재한다.

useAxios : HTTP requests client axios을 위한 wrapper 같은 것이다.

1. Requirements

-

from http://sw-ko.tistory.com/191 by ccl(A) rewrite - 2020-03-21 23:20:19

댓글

댓글 쓰기

이 블로그의 인기 게시물

단위 테스트 환경 구축

단위 테스트 환경 구축 개발 노트/vue.js 단위 테스트 환경 구축 create-nuxt-app로 프로젝트를 설정할 때 단위 테스트 프레임워크를 선택할 수 있다. AVA, Jest 중에 선택할 수 있는데 React.js로 개발했을 때 사용한 Jest를 사용한 경험이 있었기 때문에 Jest로 선택했다. 참고로 Jest는 facebook에서 만들었다. 선택하지 않은 경우에는 테스트 관련 모듈을 수동으로 설치 및 설정해줘야 한다. 아래 모듈을 --save-dev로 추가하자. @vue/test-utils : vue 코드를 단위 테스트할 때 필요한 유틸을 제공한다. jest : 단위 테스트 작성에 필요한 matcher, teardown 등을 제공한다. mock, spy 방식도 안내하고 있으니 공식 사이트 를 방문해서 꼭 보도록 하자. vue-jest , babel-jest : vue, ES6 문법으로 작성된 코드를 jest 수행 시 변환해주는 플러그인 모듈입니다. 그리고 package.json에 scripts를 추가하자. "scripts": { ... "test": "jest" }, jest.config.js 파일을 생성한 후 아래 설정을 추가 하자. module.exports = { moduleNameMapper: { '^@/(.*)$': '/$1', '^~/(.*)$': '/$1', '^vue$': 'vue/dist/vue.common.js' }, moduleFileExtensions: ['js', 'vue', 'json'], transform: { '^.+\\.js$': 'babel-jest', '.*\\.(vue)$': 'vue-jest' }, collectCoverage: true, col
자세한 내용 보기

Coupang CS Systems 채용 정보: Front-end 개발자를 찾습니다!

Coupang CS Systems 채용 정보: Front-end 개발자를 찾습니다! PC/Mobile Web Front-end 개발 1997년, 초창기 아마존에 입사한다고 상상해보세요. 그 당시 누구도 e-commerce 산업이, 아마존이라는 회사가 지금처럼 성장하리라고는 생각하지 못했을 것입니다. 하지만, 그 당시 아마존을 선택한 사람들은 e-commerce 산업을 개척했고, 아마존을 세계적인 회사로 성장시켰습니다. 2016년 '아시아의 아마존'으로 성장하고 있는 쿠팡, 당신에게 매력적인 선택이 아닐까요? 1997년, 초창기 아마존에 입사한다고 상상해보세요. 그 당시 누구도 e-commerce 산업이, 아마존이라는 회사가 지금처럼 성장하리라고는 생각하지 못했을 것입니다. 하지만, 그 당시 아마존을 선택한 사람들은 e-commerce 산업을 개척했고, 아마존을 세계적인 회사로 성장시켰습니다. 2016년 '아시아의 아마존'으로 성장하고 있는 쿠팡, 당신에게 매력적인 선택이 아닐까요? Global Operation Technology: eCommerce에서 주문을 한 뒤 벌어지는 상황에 대해서 호기심을 가져보신 적이 있나요? Global Operation Technology는 상품을 고객에게 지연 없이 전달 될 수 있도록 하는 조직입니다. 매일 최첨단 소프트웨어 기술을 이용해 고객의 주문을 받고 상품을 어느 창고에서 출고 시킬지, 포장을 하나의 박스 또는 여러 개로 나눌 것인지, 어떤 배송 루트를 선택하고 어떻게 고객에게 배송 상태를 보여줄지 결정하는 시스템과 서비스를 개발 합니다. What Global Operations Technology does: CS and C-Returns System 적극적 고객서비스를 바탕으로 고객의 목소리를 통해 끊임없이 고객 에게 서비스를 제공하고 Andon 메커니즘을 통해 고객의 목소리를 회사 전체와 공유합니다. 그리고 고객 문제 해결과 구매 이후 벌어질 수 있는 고객
자세한 내용 보기

스토리북에서 스토리를 작성하는 방법

스토리북에서 스토리를 작성하는 방법 스토리북은 스토리의 집합이다. 각각의 스토리는 컴포넌트의 하나의 시각적 상태를 나타낸다. 기술적으로 얘기하면 스토리는 스크린에 렌더링될 수 있는 어떤것을 리턴하는 함수이다. 기본 스토리 버튼 컴포넌트의 스토리에 대한 기본 예제이다. import React from 'react'; import { action } from '@storybook/addon-actions'; import Button from './Button'; export default { component: Button, title: 'Button', }; export const text = () => Hello Button; export const emoji = () => ( 😀 😎 👍 💯 ); named export(text, emoji)를 하게 되면 스토리북에서 스토리로 정의된다. default export는 스토리 그룹(Button)에 대한 메타데이터를 정의한다. export default { component: Button, title: 'Button', }; 위에서 이런 메타데이터를 정의했는데 이러한 포맷을 CSF(Component Story Format)이라고 한다. 링크 타이틀은 유니크해야한다. 스토리북 5.2 버전 이전에는 스토리를 정의하기 위해서 storiesOf API를 사용했어야 했다. 하지만 이제는 리액트 네이티브를 제외하고 모든 프레임워크에서 CSF 포맷을 사용할 수 있게 되었다. 스토리의 위치 • └── src └── components └── button ├── button.js └── button.stories.js 유지보수를 쉽게 하려면 스토리북 파일 (.stories.js)을 컴포넌트의 위치와 동일하게 하는게 좋다. 다른 방법도 두개 더 소개하고 있는데 그냥 이렇게 하는게 젤 깔끔한것
자세한 내용 보기