[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

댓글

댓글 쓰기

이 블로그의 인기 게시물

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 메커니즘을 통해 고객의 목소리를 회사 전체와 공유합니다. 그리고 고객 문제 해결과 구매 이후 벌어질 수 있는 고객 ...
자세한 내용 보기

Context API 상태 관리 라이브러리

Context API 상태 관리 라이브러리 React에서 state와 props가 뒤엉켜서 무엇이 무엇에게서 정보를 내려 받고 어떤 props 속성들이 있는지 파악하기 힘들때 상태 관리 라이브러리를 사용하면 마치 DB warehouse 처럼 상태를 따로 관리할 수 있게 되어 편리하다. React의 대표적인 상태 관리 라이브러리로는 Redux, Mobx, Context API가 존재한다. 간단한 웹을 만들어보면서 Context API를 구성해보자 🚗 Set up //react를 생성합니다 npx create-react-app contextapi // style을 위해 다음 패키지를 설치합니다. 필수는 아니고 제가 편하자고 설치한 겁니다 npm i styled-components styled-reset styled-flex-component typography 상태 관리 라이브러리는 크게 스토어(데이터가 저장되는 곳)와 프로바이더 (칠드런에게 데이터를 줌), 컨슈머(데이터를 사용함) 으로 구성됩니다. React package 내부에는 createContext가 존재합니다. 이를 이용해 Store를 생성해줍니다. import React from "react"; const Store = React.createContext(null); export default Store; 생성한 Store는 다음과 같은 방식으로 사용할 수 있습니다. Provider의 자식에 Consumer를 사용한 것에 주의합시다. * Consumer 태그 내(Consumer의 child)에서는 일반 html을 사용할 수 없습니다. 오로지 함수인 child만 작동합니다. import Store from "store"; class AppContainer extends Component { state = { message: "hello guys" }; render() { return ( {test => ...
자세한 내용 보기

피플펀드(PEOPLEFUND) 채용 정보: 피플펀드의 평균연령을 낮춰주실...

피플펀드(PEOPLEFUND) 채용 정보: 피플펀드의 평균연령을 낮춰주실... 마케팅팀 인턴 디자이너로 오시게 되면 이런일을 하게 됩니다.1. 온라인 광고 및 홍보 컨텐츠를 함께 기획하고 마케팅팀 디자이너분의 제작 서포트2. 페이스북 컨텐츠를 함께 기획하고 제작 서포트3. 마케팅 회의 중 젊고 새로운 시각으로 아이디어 내기4. 브랜드의 아이덴티티가 담긴 브로셔 함께 제작하기5. 디자이너분들과 아이디어를 시각화 하기 자격요건 - 현재 4학기 이상 재학중이거나 졸업예정자 - 기졸업자 가능 - Adobe 디자인 툴 사용가능 자 (포토샵, 일러스트레이터 등) 우대사항 - 마케팅 관련 업무 관심 및 경험자 - 주변 사람들이 나를 볼 때 "너 진짜 아이디어 뱅크다"라고 한 얘기를 들어보신 분 - 디자인을 하실 때 "1픽셀의 미학"을 인지하고 계시는 분 - 다루는 디자인툴은 많으면 많을 수록 "다다익선" 복지 - 대한민국 금융혁신의 역사를 함께할 수 있는 기회 - 개발, 비즈니스, 금융, 투자, 전략 등의 전문가와 매일같이 부딪히며 성장할 수 있는 기회 - 강남 한복판에 실리콘벨리를 재현한 듯한 멋지고 아늑한 사무실에서 근무 (역삼역에서 지하로 바로 연결) - 점심식대와 저녁식대, 커피, 간식 무한정 제공 - 근무시간 중 아무때나 자유롭게 가벼운 음주 가능 (단 주사는 곤란함) - 훌륭한 스타플레이어들과 원할 때 스타를 할 수 있음 (브루드워만 가능) - 근래에는 오버워치 경쟁전 함께할 파티원 찾고 있음 (겐지충 사절) 채용절차 1) 공감프로필 (피플펀드 지원사유 포함) 2) 서류 합격시 실무자와 면접 진행 더 많은 내용은 더 많은 내용은 더팀스 에서 확인하세요! from http://theteams.tistory.com/757 by ccl(A) rewrite - 2020-03-24 09:20:18
자세한 내용 보기