[React]Hook 훅을 알아보자 !

리액트에서 훅을 사용하면 엄청 편리하다.

대표적인 몇개의 훅을 살펴보자.

 

useEffect()

- componentDidmount역할을 한다. 또한 componentDidUpdate의 역할도 한다.

- 2개의 인자를 받는데, 첫 번째는 function으로써의 effect이다. 두 번째는 deps가 있다면 effect는 (deps)리스트에 있는 값일 때만 값이 변경하도록 활성화 된다.

 

위와 같은 코드에서 useEffect의 첫 번째 인자로는 함수가, 두 번째 인자로는 Array형태의 변경할 값을 적어주었다.

두 번째 값이 변경될 때 마다 첫 번째의 함수가 계속 실행이된다.

버튼을 클릭할 때 마다 console창에는 "hello"라는 것이 찍히게 된다. 즉, 버튼을 누를 때 number값이 변경되므로, sayHello 함수가 계속해서 호출되어지는것이다.

 

한 마디로, useEffect()는 ComponentDidMount, ComponentWillUnMount, ComponentWillUpdate 이다.

(변화가 이뤄지면 ComponentWillUpdate을 가지게 된다.)

만약 변화를 주더라도 업데이트가 이뤄지지 않도록  하고 싶다면 빈 배열 "[]"을 넣어주면 된다.

 

useRef()

:react에 있는 모든 component는 reference element를 가지고 있다.

변수 potato 에는 input태그에서 ref={potato}로 참조한 값(current)인 태그 자체가 들어있다.

또한 console.log(potato.current.focus()); 처럼 focus() 메서드도 사용 가능하다.

 

" Hook "을 사용하지 않는 사용자 정의 메서드를 살펴보자 ! 

useConfirm()

- useConfirm()은 confirm창을 띄워주고 사용자의 확인값을 받는 역할을 한다.

useConfrim(메시지,callback함수)가 인자로 들어간다.

-> 10번째줄 if문에서는 confirm(message)를 받아 확인버튼이 눌렀을 경우에만 callback()함수가 실행된다.

또한 reject를 추가로 인자로 받아 else 문제 "취소"버튼을 클릭 시 해당 함수를 실행하는 구문을 추가할수도 있다.

 

usePreventLeave

- 사용자가 페이지를 떠날때 팝업창 같은 알림을 띄워주도록 설정해줍니다.

- event 를 통하여 window함수의 addEventListener를 통하여 listener를 등록해줍니다.

- 여기서 주의할점은 listener에서 event객체의 returnValue="" 를 초기화시켜줘야지만 동작합니다.

- 즉, beforeunload는 returnValue를 갖고, returnValue는 "" 빈 값으로 꼭 초기화 시켜 사용해야 합니다.