React Hooks

박요셉·2024년 6월 9일

React

목록 보기

11/15

01. React Hooks

01. useState

컴포넌트 내에서 변경 가능한 값이 필요하며 그 값의 변화에 따라 화면이 다시 그려져야 할 때 사용하는 훅

02. useEffect

컴포넌트의 생애 주기 또는 데이터의 생애 주기에 따라 특정 코드를 실행시키고 싶을 때 사용하는 훅
화면이 실제로 업데이트 된 이후에 비동기적으로 실행이 되는 특징이 있다.

03. useLayoutEffect

컴포넌트의 생애 주기 또는 데이터의 생애 주기에 따라 특정 코드를 실행시키고 싶을 때 사용하는 훅
화면이 실제로 업데이트 되기 이전에 동기적으로 실행이 되는 특징이 있다. <- 차이점
여기서 무거운 작업을 해버리면 어떡하나? 작업이 끝나기 전엔 화면이 나오질 않아..ㅜ

[참고] useEffect vs useLayoutEffect

Render = 화면에 그리는 것이 Render일까? 화면에 그리기 전 단계에서 DOM 트리를 만드는 단계임
body가 화면에 그려지기 전(Browser paints screen)에 이미 Render단계에 값은 존재한다.

04. useMemo

컴포넌트의 생애 주기 또는 데이터의 생애 주기에 따라서 특정 값을 업데이트하고 싶을 때 사용하는 훅

05. useCallback

컴포넌트의 생애 주기 또는 데이터의 생애 주기에 따라서 함수를 새로 정의하고 싶을 때 사용하는 훅

[참고] 어떤 때에 useMemo와 useCallback을 사용하는가?

크게 두 가지 경우가 있다.

“정말로” 컴포넌트의 생애주기 또는 데이터 값의 변화에 따라 어떤 값을 업데이트하고 싶을 때
리렌더링 될 때마다 새롭게 값을 계산하거나 새롭게 함수를 정의하는 것이 문제가 될 때
1. 새로운 값의 계산이나 새로운 함수의 정의가 무거운 작업일 때
2. 값의 참조값 또는 함수의 참조값을 유지하는 것이 중요할 때
  a. 새로운 값의 계산이나 새로운 함수의 정의가 무거운 작업일 때
  b. 값 또는 함수의 참조값을 유지하는 것이 중요할 때
```
const student = useMemo(() => ({
}),[])
```
  위 student에 useMemo가 없다면 함수가 실행될 때마다 참조하는 메모리 주소가 바뀌기에 이런 억울함을 useMemo가 해결해준다.

06. useRef

컴포넌트의 리렌더링에 영향을 받지 않는 참조를 유지하고 싶을 때 사용하는 훅

엘리멘트가 재생성 될 때 DOM ref가 바뀌지 않아서 문제가 없는 것이 아니라 바뀔 때마다 다시 ref를 담아주기 때문에 문제가 없는 것이다.

const aa = React.createElement();
aa 가 달라지는 것이지 DOM이 달라지진 않는다.
virtual DOM과 물리 DOM이 달라야 새로 그리는데 h2 ref={ref}일 때 h2는 바뀌지 않으니 객체는 달라지나 DOM은 바뀌지 않는 것.

02. Memoization

01. useMemo, useCallback

02. React.memo

‘부모 컴포넌트가 리렌더링 되면 자식 컴포넌트도 리렌더링 된다’를 회피하기 위한 메모이제이션 장치

03. API 활용하기

데이터를 가져온다

-> 통신을 한다
-> HTTP 프로토콜(HTTPS)
-> 요청과 응답
-> 요청을 하는 주체를 클라이언트
-> Request HTTP를 서버에게 보내고
-> 응답을 하는 주체를 서버
-> Response HTTP를 클라이언트에게 보내고
-> 요청에 응답을 만들어 보내주면 끝

요청을 할 때 필요한 정보
-주소 : "https://www.api.com/products"
이 주소 하나가 하나의 요청에만 대응하기에는 아까움
-HTTP Method
- GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS
위 메서드들을 CRUD에 대응하게 끔 API를 구성하는 것
리소스의 위치 정보를 그대로 url 패스로 구성하는 것
-> RESTful API
- GET 방식 요청을 읽기(READ)에다가 연결하는 것
- GET "https://www.api.com/posts/100/comments/30" 여기 있는 정보를 읽겠어
- Post "https://www.api.com/posts/100/comments" 코멘츠에 하나 추가할게
- PUT "https://www.api.com/posts/100/comments/30" 30을 덮어쓸게
- PATCH "https://www.api.com/posts/100/comments/30" 부분적으로 덮어쓸게
- DELETE "https://www.api.com/posts/100/comments/30" 30 삭제할게

01. fetch vs. axios

fetch
- 장점:
  1. 설치를 안 해도 된다. 내장함수다.
  2. 모든 브라우저에서 기본적으로 호환이 된다.
- 단점:
  1. 외부 라이브러리들에 비해서 상대적으로 사용편의성이 떨어진다.
- 그럼 언제 fetch를 쓸까?
  - 내가 만약 npm 패키지를 만든다! 이 패키지는 가능한 다른 패키지에 의존적이지 않을 수록 좋겠죠.
  - 만약에 내가 만든 패키지가 axios에 의존해서 작동을 한다면, axios가 사라지거나, 고장나면 내 패키지도 고장나거나 문제가 발생하겠죠.
Axios
- 장점
  1. fetch에 비해 사용편의성이 높다.
    - baseURL을 설정할 수 있어서 반복적으로 host를 작성할 필요가 없다.
    - 인스턴스화 해서 사용할 수 있다.
    - 인터셉터를 사용할 수 있다.
    - 자동으로 JSON을 JS 객체로 변환해 준다.
    - HTTP 메서드 이름과 대응하는 인스턴스 메서드를 가지고 있다.
- 단점
  1. 별도로 설치를 하거나 불러다 사용해야 한다.
  2. (따라서) 프로젝트의 용량이 커진다. 사용자의 인터넷 환경이 느릴 경우 영향을 줄 수 있다.