브래의 슬기로운 코딩 생활
모바일 웹 구축 실무 6주차 정리 - 1 (훅(Hooks)) 본문
훅이란 무엇인가?
Hooks
Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)"할 수 있게 해주는 함수
•리액트의 state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것
- 이 때 실행되는 함수가 훅
useState()
useState() - state를 사용하기 위한 훅
useState() 사용법
useEffect()
useEffect() - Side effect를 수행하기 위한 훅
•리액트에서의 Side effect - 효과, 영향, effect
ex) 서버에서 데이터 수신, 수동으로 DOM 변경
-다른 컴포넌트에 영향을 미칠 수 있으며 렌더링 중에는 작업이 완료될 수 없기 때문
-즉, 렌더링이 끝난 이후에 실행되어야 하는 작업
•클래스 컴포넌트에서 제공하는 생명주기 함수 componentDidMount(), componentDidUpdate(), ComponentWillMount()와 동일한 기능을 하나로 통합해서 제공
•useEffect() 훅만으로 위 생명주기 함수와 동일한 기능을 수행할 수 있음
useEffect() 사용법
useEffect() 구조
useMemo()
useMemo() - Memoized value를 리턴하는 훅
렌더링마다 호출되는 컴포넌트 함수
- Memoization 기법 적용
useMemo() 사용법
•의존성 배열의 요소 값이 업데이트될 때만 콜백 함수를 다시 호출
- memoization된 값을 업데이트 후 다시 memoization 해줌
•useMemo()로 전달된 함수는 렌더링이 일어나는 동안 실행됨
•렌더링이 일어나는 동안 실행돼서는 안되는 작업은 useMemo()에 사용하면 안됨
- useEffect()에서 실행돼야 할 이펙트 작업
useMemo() - 의존성 배열
함수 컴포넌트에 useMemo() 훅 적용
useCallback()
useCallback() – 함수를 메모이제이션 하기 위한 훅
•useCallback() 훅을 사용하면 특정 변수의 값이 변한 경우에만 함수를 다시 정의
useRef()
useRef() – Reference를 사용하기 위한 훅
•레퍼런스 객체의 .current 속성 – 현재 참조하고 있는 엘리먼트
useRef() 사용법
훅의 규칙
◦규칙1 - 훅은 무조건 최상위 레벨에서만 호출해야 한다.
규칙2 - 리액트 함수 컴포넌트에서만 훅을 호출해야 한다.
나만의 훅 만들기
커스텀 훅(Custom Hook)
커스텀 훅을 만들어야 하는 상황
커스텀 훅 추출하기
커스텀 훅 규칙
•커스텀 훅은 특별한 규칙이 없음
-파라미터, 리턴 값을 개발자가 직접 정의해서 사용
•커스텀 훅은 단순한 함수와 같지만 다음과 같은 훅의 규칙은 적용됨
-훅의 이름은 use로 시작
-훅은 최상위 레벨에서만 호출해야 함
-리액트 함수 컴포넌트에서만 훅을 호출해야 함
•커스텀 훅의 이름을 use로 시작하지 않는다면?
-특정 함수 내부에서 훅을 호출하는지 알 수 없기 때문에, 훅의 규칙 위반 여부를 자동으로 확인할 수 없음
커스텀 훅 사용
커스텀 훅 사용
•여러 개의 컴포넌트에서 하나의 커스텀 훅을 사용할 때 state는 공유될까?
- 컴포넌트 내부에 있는 모든 state와 effects는 전부 분리됨
- 각각의 커스텀 훅 호출에 대해 분리된 state를 얻게 됨
•커스텀 훅의 호출은 독립적으로 동작
요약
Hook
⁃훅이란?
⁃useState()
사용법
- const [변수, set함수] = useState(변수의 초기값);
- 변수 각각에 대해 set 함수가 따로 존재
⁃useEffect()
사용법
- useEffect(이펙트 함수, 의존성 배열);
- 의존성 배열 안에 있는 변수 중에 하나라도 값이 변경되었을 때 이펙트 함수가 실행됨
- 의존성 배열에 빈 배열([])을 넣으면 마운트와 언마운트 시 한 번씩만 실행됨
- 의존성 배열 생략 시 컴포넌트가 업데이트될 때마다 호출됨
- 선언된 컴포넌트의 props와 state에 접근할 수 있음
- useEffect()에서 리턴하는 함수는 컴포넌트가 해제될 때 호출됨
⁃useMemo()
사용법
⁃useCallback()
사용법
⁃useRef()
사용법
Hook의 규칙
⁃무조건 최상위 레벨에서만 호출해야 함
⁃리액트 함수 컴포넌트에서만 훅을 호출해야 함
커스텀 훅
'2-2 > 모바일 웹 구축 실무' 카테고리의 다른 글
모바일 웹 구축 실무 중간고사 정리 (2) | 2023.10.16 |
---|---|
모바일 웹 구축 실무 6주차 정리 - 2 (이벤트 핸들링) (2) | 2023.10.08 |
모바일 웹 구축 실무 5주차 정리 (State와 생명주기) (0) | 2023.10.07 |
모바일 웹 구축 실무 4주차 추가 정리 (컴포넌트, Props) (0) | 2023.09.24 |
모바일 웹 구축 실무 4주차 정리 (엘리먼트 렌더링) (0) | 2023.09.23 |