이어서 다시 리액트 훅 공부 ㄱㄱ
(
포스팅 했던거 임시저장 분명 해놓았는데
날라가서
다시 정리...
ㅂㄷㅂㄷ
)
| useEffect
(실전형 리액트 Hooks | #2 0 Introduction to useEffect)
useEffect 는
componentWillUnmount 와 componentDidMount, componentWillUpdate 와 비슷하다!
리액트 훅으로 작업할 때는 이 function 이 중요한데,
예제>
컴포넌트가 마운트될때 바로 function 을 실행하려고 한다
** POINT **
dependency 중요하다!
빈 리스트인지, 어떤 값이 들어있는지에 따라 컴포넌트의 마운트 상태가 달라진다!!
| useTitle
(실전형 리액트 Hooks | #2 1 useTitle)
하나의 value 가 바뀌면
setTitle 을 이용할 것이고 이게 시발점이 되어서 모든 것들이 작동하게 된다.
| useClick
(실전형 리액트 Hooks | #2 2 useClick)
reference는,
기본적으로 우리의 컴포넌트의 어떤 부분을 선택할 수 있는 방법이다
인풋창에 5초후에 포커스 효과 넣어보기
| useClick
(실전형 리액트 Hooks | #2 2 useClick)
useEffect는,
componentDidmount 상태에 작동한다.
componentWillUnmount 일때, 이벤트가 발생한 뒤 정리할 필요가 있기 때문에
function을 retrun 한다. (44~48 줄)
정리를 해보자면!
컴포넌트를 콜할때는 블록처리(40~43 줄)이 마운트 된다
** POINT **
useEffect 는 componentWillUnmount 때 발생하게 되는데
useEffect 안에 fuction 을 넣으면, + dependency 가 존재한다면,
componentDidMount, componentDidUpdate 때 호출된다
useEffect 를 return 받은 그 함수는 componentWillUnmount때 호출된다.
다시다시
function은 ,
componentWillUnMount로 부터 호출(40~43) -> componentWillUnmount 때 return 호출 (44~48)
=> 중요한 이유는, 컴포넌트가 마운트 되지 않았을 때 이벤트리스터가 배치되게 하고 싶지 않기 때문이다!!!
(
이러한 개념은 이후 강의에서 반복된다고 하네요..
그래서 잘 이해는 안되지만 넘어감...
)
| useConfirm
실전형 리액트 Hooks | #2 3 useConfirm & usePreventLeave
usecofirm, usePreventLeave 는
실제로는 Hooks 이 아니다 ( useState, useEffect 를 사용하지 않기 때문)
useConfrim 은,
사용자가 무언가를 하기전에 확인하는 것
예를 들어, 사용자가 버튼을 클릭하면 이벤트를 실행하기 전에 메세지를 보여준다든가
그런데!
여기 코드 부분이 강의랑 달랐습니다
강의에서는
confirm(message)8째줄에 window. 가 붙지 않았어요...
애초에 defualt 값으로 window. 가 설정이 되어있다고는 하는데
이런 에러가 떴어요 ㅠㅠ
왜일까요... ㅇㅅㅇ
| usePreventLeave
윈도우 창을 닫을 때 아직 저장하지 않았다고 알림창 보여주는 것
여기선 hooks 를 요구하지 않는다!
protect 버튼 클릭 후, 화면 나갈려고 하면,
unprotect 버튼 누르면 그냥 화면에서 나가진다!
'Dev > JavaScript | React' 카테고리의 다른 글
| JavaScript | 해당 월의 일수 계산하기 (0) | 2020.05.03 |
|---|---|
| React | 리액트 Hooks 공부하기 1 (useState, useInput, useTabs) (0) | 2020.04.03 |
| 누구든지 하는 리액트 (0) | 2020.01.11 |