실전형 리액트 Hooks 10개 (21.01.15 ~ 20)

사전학습 > what is Hooks?

음... 쉽게 말하면 react의 구조에도 귀찮음을 느낀 개발자가 react를 더욱 쉽게 사용할 수 있는 방법을 고안했다고 하면 될거같아. 본래 리액트는 클래스를 만들고, 스테이트를 설정하고 등등등... 번거로웠던 과정들을 하나의 함수로 선언할 수 있도록 하는 도구이다. 정말 간결하다!

​

1.0 >

useState() : item의 초기값을 설정해주는 함수

setState() : item의 값을 변경시켜주는 함수이다.

​

class 구조를 사용하게 되면, state, render 같은 구조를 사용해야 하지만 hook을 사용하면 함수로 선언하고 return만 해주면 끝난다. ㅁㅊ; 이거 ㄹ 쓰니까 리액트가 만만해졌어. 근데 이제야 리액ㅇ트의 클래스 구조가 이해됐는데 ㅠㅜㅠㅜㅠㅜㅠㅜ 이런 망할

​

1.1 > Make useInput

컴포넌트에 스테이트들을 넘기고 싶을 때 보통 value = {something.some} 이런식으로 넘기는데, { ...something } 하면 이 친구가 가지고 있는 모든 속성들이 넘어간다.

​

페이지 내의 이벤트를 다른 엔티티(객체)에서 다룰 수 있다. (Hook 사용시) 렌더되는 함수가 아니더라도 객체로 넘겨준 함수에서 이벤트를 핸들링 할 수 있다.

​

Hook을 만드는 건, (재사용 가능한) 함수를 만드는 행위이다. 이런 행위의 반복이라 정리할 게 별로 없다...

​

2.0 > useEffect 이건 내장인가?...

useEffect(function, array) 인데, array안에 있는 컴포턴트에 변화가 생기면 함수를 실행시켜주는 기능을 한다.

componentDidMount였던가? 이런 계열의 친구들과 같은 기능을 한다. array를 넣고 안넣고에 따라서도 달라진다.

​

2.2 > 막간의 용어정리 + useRef()

reference : component의 어떤 부분을 선택할 수 있는 방법. (ex, document.getElementByID() )

모든 리액트 컴포넌트는 레퍼런트 속성을 갖고있다. ref = { something }

const someting = useRef() 로 선언해 준 뒤, 어떤 react 컴포넌트에 ref={something}으로 설정해주면, something이 그 컴포넌트를 의미하게 된다. document.getElementByID()를 한 것처럼 말이다.

​

2.3 > usePreventLeave를 만들었다.

신기했던건 addEventListener에 들어가는 event 중에 beforeunload라는 이벤트가 있었다. 페이지를 닫는 이벤트를 전달해 줄 수 있는데, 이 때 event.preventDefault() 를 실행시키고 event.returnValue = "";을 설정해주면, 페이지를 보호한 뒤 정말 닫을거냐고 물어봐준다. 정말 좋은 기능인듯. 근데 returnValue를 해주는 이유는 웹 브라우저가 멍청해서? 알려줘야한다나?

​

2.4 > mouseleave 라는 이벤트도 있다. 우와신기..

근데 Hook 짜는거는 약간의 노련함이 필요해 보인다.. 연습 많이 해야지.

​

2.5 > Hook + animation.

뭐 이것저것 짰는데,, 이건 뭐 JS에 있는 이벤트 기능을 알아보는 수업같달까?... 이거 진짜 그만 써도 될거같은데?

navigator.online 네트워크 연결 상태를 알려준다.

useEffect(function, debs) : 이게 좀 어려운데 아주 중요하다!

이걸 componentDidMount처럼 사용하고 싶다면, 추가해준 이벤트 리스너를 function이 return할 때 삭제해야 한다.

https://xiubindev.tistory.com/100

그나마 여기에 정리되어 있는 느낌은 있지만,,, 음,,, 더 많이 써봐야겠다.

​

아 미친 집중이 하나도 안된다.. 공부하는데 뒤에서 뒹구는 놈 때문에;;;

코딩은 여기까지..

​

2.6 > 이것저것 작업하다가 안 사실

== : 추상(동등)비교 -> 비교 전에 자료형을 통일시킨다.

=== : 엄격(일치)비교 -> 자료형과 값을 모두 비교한다.

​

오.. 신기

​

requestFullscreen(); -> 전체화면으로 바꿔준다.

document.exitFullscreen(); -> 전체화면 종료

​

2.7 > Notification을 사용하면 크롬에 알람이 뜨게 할 수 있다.

​

2.8 > useAxios()

axios를 다루는 hook을 만들었다.

인상적인 부분은 refetch 기능을 만드는거였는데, 기본적으로 useEffetc함수는 인자로 function, dependency를 갖는다. dependency의 변화를 감지하고, 변할 때 마다 function을 실행시키는데 이 기능을 응용하는게 신기했다.

refetch 함수를 실행시키면 trigger라는 변수가 현재 시간 값으로 설정되게 만든 뒤, 이 트리거를 useEffect의 dependency에 넣어주면 된다. 짱신기... 여튼 여기까지 훅 제작은 끝났다.

​

​

------------------------------------------Bonus track on React JS for beginner---------------------------------------

​

- 9.1 > context and state Management

​

state management가 뭐냐 하면, UI를 제작할 때, UI components의 재사용성을 위한 추상적 개념이라고 생각하면 될 것 같다. 자주 사용하는 component가 페이지가 바뀔 때 마다 reload가 된다면 정말 많은 networking이 필요해질테니까. 그래서 한번 로드된 components를 특정 data frame에 저장해 놓고 필요할 때 바로바로 가져다 쓰는 개념이라고 보면 될 것 같다.

​

- 9.2, 9.3 > useContext in Action

이해했어!!! 이게 뭐냐면, state management를 효율적으로 해주는 Hook 함수인데, 본래는 어떤 state를 다른 함수나 다른 JS파일에서 사용하려면 계속 함수에 인자로 넣어줬어야 했잖아? 굉장히 번거롭고 버그가 엄청많이 생겼지. 근데 Context를 사용하면, 원하는 위치의 부모컴포넌트에 설정한번만 해주면 자식 컴포넌트에서 무한정 사용할 수 있는 엄청나게 섹시한 친구라는거지 넘나신기!

사용방식은 이렇지

import {createContext} from "react"

const somethingContext = createContext();

이후에, <somethingContext.Provider></somethingContext.Provider>; 형태의 태그로 사용하면 된다.

​

+) 으악!!! arrow function을 정의할 때, 바로 return 값을 쓰는 경우에는 (괄호)를 사용하고, 따로 return을 지정해 주고 다른 작업을 더할 때에는 {중괄호}를 사용하란말이다 바보멍청아!! (YOU!! RETURN!!! NOTHING!!!!)

이제 운동을 하고 돌아오자고... 컴백순

​

- 9.4, 9.5 > Hypertranslate

오 걍 열심히 만듬

​

- 9.6 > useReducer

reducer(감속기) 는 특정 state와 이를 지속적으로 변화시켜야하는 함수가 필요한 경우에 적절하다.

useReducer(function, {data:init_value}) 를 하면 state와 dispatch 를 리턴해주는데,

state는 우리가 조절하고픈 변수이고, dispatch는 해당 조건에 맞춰서 function을 실행한다.

​

---------- 자 이제 배울건 다 배웠으니까 서비스를 한번 만들어보자 ----------

걍 열심히 만들어... add기능... delete버튼... check 버튼,,, completed list...

​

​

[출처] 실전형 리액트 Hooks 10개 (21.01.15 ~ 20)|작성자 winney