Notice
Recent Posts
Recent Comments
Link
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Archives
Today
Total
관리 메뉴

차근차근

[React Hooks] Hooks (2) 본문

대학교/FE

[React Hooks] Hooks (2)

SWKo 2020. 4. 7. 15:45

0. useEffect

  • useEffect는 componentWillUnmount, componentDidMount, componentWillUpdate와 비슷하다.
  • 이 모든 것과 동일한 function이다.
  • react hooks로 작업할 때 중요하다.
  • 다음 예시를 보자.

  • useEffect는 ComponentDidMount, componentDidUpdate의 역할을 하기 때문에 시작하거나 버튼을 클릭할 때 콘솔에 hello가 찍힌다.
  • useEffect의 첫번째 인자는 function으로서의 effect가 된다. 두번째 인자는 dependency이다.
  • 만약 dependency(deps)가 있다면 effect는 (deps)리스트에 있는 값일 때만 값이 변하도록 활성화 될 것이다.
  • 다음 dependency를 추가한 예시를 보자.

  • 여기서 useEffect 두번째 인자 dependency로 [number]를 주었다. 그러면 number를 클릭할때만 콘솔에 hello가 출력되고 aNumber을 클릭했을 때는 출력되지 않는다.
  • 이것만 기억하자! useEffect는 ComponentDidMount, ComponentWillUnMount, ComponentDidUpdate 이다!!

1. useTitle

  • 이제 useEffect를 사용한 첫번째 hooks인 useTitle에 대하여 알아보겠다.
  • 나의 문서의 제목을 업데이트 시켜주는 것을 담당하는 hooks를 작성해보자.

  • 일단 App함수에서 useTitle에 "Loading..."이 인자로 들어가 있다. 이것이 initialTitle로 가고 title은 initialTitle로 초기 설정이 된다.
  • 그 후 updateTitle함수를 정의한다.
  • 보면 useEffect의 1번째 인자로 updateTitle이 들어가고, 2번째 인자인 dependency에 title이 들어가 있다. 이것은 title값에 영향을 끼치겠다는 뜻이다. 그리고 useTitle함수는 setTitle을 반환한다.
  • 위 코드의 결과로는 처음에 title이 "Loading..."으로 되어 있다가 5초 후 "Home"으로 바뀌게 된다.

5초 후 title 변신!

||

||

V


2. useClick

  • useClick을 보기 전에 reference에 대해 알고가자.
  • reference는 기본적으로 우리의 component의 어떤 부분을 선택할 수 있는 방법인데 document.getElementByID()와 비슷한 의미라고 보면 된다.
  • react에 있는 모든 component는 reference element를 가지고 있다.
  • useClick은 누군가 element를 클릭하는 시점을 발견한다.
  • 다음 주석을 참고하여 코드를 보자.

  • Hi를 클릭할때 콘솔에 다음과 같은 결과가 나온다.


3. useConfirm

  • useConfirm은 사용자가 무언가를 하기전에 (확인)하는 것인데 사용자가 버튼을 클릭하는 작업 을 하면 (이벤트를 실행하기 전에) 메세지를 보여주는 것이다. 
  • 예를 들면, 나가기를 뒤로가기 버튼을 눌렀을 때 "정말 나가시겠습니가?"라는 메세지를 보여주는 것이다.
  • 취소 혹은 확인버튼이 나오며 선택되는 내용마다 다른 메세지를 띄워줄 수 있다.
  • 코드와 결과화면은 다음과 같다.


4. usePreventLeave

  • preventLeave는 보통 웹사이트에서 볼 수 있다. 내가 window창을 닫을 때 정말 나갈 것인지 물어보는 알림창을 띄워준다.
  • 코드와 결과화면을 보겠다.

  • Protect를 누르고 종료버튼을 클릭하면 위와 같은 화면이 뜨고 Unprotect를 다시 누르면 위와 같은 화면이 뜨지 않고 나가진다.

5. useBeforeLeave

  • useBeforeLeave는 마우스가 화면을 벗어날 때 사용자가 정의한 함수를 호출하는 것이다.
  • 마우스가 벗어나는 좌표를 알 수 있기 때문에 그것을 조정하여 사용하면 된다.
  • 사용예시와 결과화면을 보자.

  • clientY를 음수로 하였고 음수일 때 onBefore을 호출하는 코드이다. 위 코드는 마우스가 화면 위로 갈때마다 콘솔에 메세지를 띄워준다.

 

'대학교 > FE' 카테고리의 다른 글

[Apollo-Client] useQuery사용 시 update 방법  (0) 2020.08.12
[React & RN] Styled Components  (0) 2020.04.14
[React-Native] react-native init  (0) 2020.04.02
[Redux] Pure Redux: To Do List  (0) 2020.04.01
[Redux] Pure Redux: Counter  (0) 2020.03.30
Comments