React Hooks

hooks이란 react의 state machine에 연결하는 기본적인 방법입니다.이것은 코드를 더욱 예쁘게 만들어주고 더이상 class를 사용하지 않고 모든 것이 함수형 프로그래밍이 되게 해줍니다.매우 멋진 프로그래밍 스타일 중 하나라고 말하고 싶습니다.위의 2가지

useInput은 기본적으로 input을 업데이트 합니다.useInput은 initialValue를 받습니다.해당 코드에서 userInput는 initalvValue(초기값)을 지정할 수 있는 함수입니다.useInput는 value를 리턴하고 name은 value의 값

이번에는 useTabs 작업을 해보겠습니다.

useEffect는 componentWillUnmount와 componentDidMount, componentWillUpdate와 비슷합니다.이런 것들과 동일한 함수이며 react hooks로 작업할때 이 함수는 중요합니다.useEffect의 예제를 하나 보겠습니다.c

자 이제 useEffect를 이전 포스팅에 설명하였습니다.따라서 useEffect를 사용한 첫 번째 hooks를 작성해보겠습니다. 보통 이것을 위해서 helmet를 사용하는데 문서 제목을 업데이트하는functional hooks의 방식으로 만들어 보겠습니다.우선 이렇게

useConfirm은 사용자가 무엇인가를 하기전에 확인하는 것입니다. 사용자가 버튼을 클릭하는 작업을 하면 이벤트 실행전에 메세지를 보여주고 싶은 경우라고 이해하시면 됩니다. 정말 클릭하시겠습니까? 이런 거 같이 시작하기전에 한번 더 확인하는 것입니다. 이런 메시지는

코드는 다음과 같습니다.우선 App부분을 살펴보면 begForLife라는 함수를 가지고있고 그 밑줄에서 begforLife를 사용하여 useBeforeLeave 함수를 실행하고 있습니다. 페이지 에는 Hello 라는 텍스트만 존재합니다.그럼 위의 함수를 보겠습니다.해당

우선 useFadeIn을 말하기 전에 해당 코드에서 사용할 css 트랜지션 2개를 설명하겠습니다.transition-duration : 트랜지션이 일어나는 지속 시간을 명시하는 속성transition-delay : 속성이 변하는 시점과 트랜지션이 실제로 시작하는 사이에

useScroll 스크롤을 해서 무언갈 지나쳤을때 색상을 바꾸거나 어떤 행동을 하는 것입니다.위의 코드에서 우선 App을 보면y라는 변수가 useScroll이라는 함수를 가지고 있고 페이지의 높이는 1000px, 페이지의 글자는 y가 200보다 작으면 빨간색, 그보다

useFullscreen은 어떤 요소를 풀스크린으로 보여주는 hooks입니다.코드는 다음과 같고웹 페이지는 다음과 같이 만들어집니다. 물론 이미지는 다른 걸 사용해도 됩니다. 먼저 App 부분을 보겠습니다.우선 onFulls 함수를 보면 isFull의 true, fal

useNotification는 알림이 실행되는 함수입니다.웹 콘솔에 Notification을 사용했을때 위의 사진처럼 알림을 주는 것입니다.해당 코드를 한번 봅시다. 우선 App을 볼텐데triggerNotif가 useNotification함수를 가지고 있고 본문의 버튼