목록React를 파고파고/Hook (3)

이것저것

[Hook]노마드 코더로 hook 공부하기 (3)

useBeforeLeave 탭을 닫을때 실행되는 function이다. 마우스가 창을 벗어나면 alert창을 실행시킬수도 있다. useEffect를 사용하기 때문에 addEvent를 생성해줬으므로 return값에는 removeEvent를 정의해준다. dependency는 [ ]로 빈값을 주어서 update 되었을때도 addEvent가 작동하도록한다.(여기서는 update 될일은 없다.) handle에서 event를 출력해주니 마우스가 browser의 위로 올라갈때 clientY가 0보다 작아지는 것을 확인했다. 그래서 창위로 올라갔을때 onBefore를 출력하도록 하였다. event로 clientY가 0보다 작을때의 조건을 넣어주었다. 이것을 응용해서 alert창으로 onBefore를 출력하도록 하는 방법..
React를 파고파고/Hook 2020. 6. 28. 21:51
[Hook]노마드 코더로 hook 공부하기 (2)

https://nomadcoders.co/react-hooks-introduction/lobby Watch Now - Nomad Coders nomadcoders.co useEffect useEffect는 생명주기에서 componentWillUnmount와 componentDidMount, componentWillUpdate와 비슷하다. 위의 모든 것과 동일한 function이라고 생각하면 된다. useEffect는 componentDidMount의 역할을 하기 때문에 새로고침을 하면 먼저 sayHello();가 실행된다. 그리고 componentDidUpdate의 역할도 하기 때문에 클릭을 하면 또 sayHello를 실행한다. useEffect도 2개의 인자를 받는데 첫 번째는 function으로써의 ..
React를 파고파고/Hook 2020. 6. 26. 16:30
[Hook] 노마드 코더로 hook 공부하기 (1)

노마드코더에서 hooks 무료강좌가 있어서 공부를 하며 정리(?) 해보았다. https://nomadcoders.co/react-hooks-introduction/lobby Watch Now - Nomad Coders nomadcoders.co 훅을 사용하면 functional component에서 state를 가질 수 있게 해 준다. 앱을 리액트 훅으로 만든다면, class component, did mount, render... 등을 안 해도 된다. funtional programming(함수형 프로그래밍) 스타일이 된다는 뜻이다. useTitle - react document의 title을 몇 개의 hooks와 함께 바꾸는 것 useInput - 그냥 input 기능 usePageLeave - 유저..
React를 파고파고/Hook 2020. 6. 25. 19:55
Prev 1 Next