티스토리 뷰
Hook은 리엑트 v16.8에 추가된 기능이며, 함수형 컴포넌트에서 state와 생명주기와 같은 여러 기능을 제공하는 라이브러리 입니다.
- 최상위(at the Top Level)에서만 hook을 호출해야합니다.
반복문, 조건문 또는 중첩된 함수 내에서 hook을 호출하면 안됩니다.
early return(함수 또는 반복문 등에서 끝에서 return 되기 전 if문 안에서 일찍 return 하는 것)전에 항상 React함수의 최상위에 hook을 호출해야합니다. - 오직 React 함수 내에서 hook을 호출해야 합니다.
import React, { useState } from "react"
function HookTest(props) {
if (props.name == 'User') {
const [name, setName] = useState('User'); // 오류: Hook 규칙 위반
}
}
1. React Hook 내장 API
1. useState : 컴포넌트의 state(상태)를 관리합니다.
(클래스형 컴포넌트의 constructor()에서 state를 초기화하는 것과 비슷한 역할)
// useState의 사용 구조
const [사용할 state, state의 상태값을 설정하는 함수] = useState(state 초기값)
// 일반적인 useState의 사용
const [name, setName] = useState('User');
setName('UserChange'); //name을 UserChange로 바꿔줌.
// 여러개의 state를 한번에 관리하고자 할때 => prevState를 통해 관리
const [userInfo,setUserInfo] = useState({name:'User', email:'a@tistory.com', age:'28' });
setUserInfo(prevState=> {
return {...prevState, name:'UserChange'}
}) //prevState에 userInfo 값들이 들어있고, 이를 통해 바꾸고자하는 name값만 UserChange로 바꿔줌.
2. useEffect : state값이 변경 될 때마다, 특정 기능이 동작하도록 관리합니다.
(클래스형 컴포넌트의 componentDidMount(), componentDidUpdate, componentWillUnmount() 것과 비슷한 역할)
// useEffect의 사용 구조 => []배열에 넣어준 state가 바뀔 때 마다 동작.
useEffect(() => {
~ 함수 로직 전개 ~
}, [state값])
// 1. 빈 배열은 구성 요소가 마운트 될 때마다 효과가 한 번만 실행되고 모든 다시 렌더링시 실행되지 않음을 의미
// componentdidMount
useEffect(() => {
console.log('componentdidMount')
}, [])
// 2. 배열에 state값을 넣어주면 넣어준 state가 변화되면 실행
// componentdidUpdate
useEffect(() => {
console.log('name Changed')
}, [name])
3. useContext : 여러개의 컴포넌트에서 사용 가능한, 변수 나 함수를 만들 수 있습니다.
(전역적 성질, 2중 3중으로 prop를 내려 주는 행위를 방지할 수 있음.)
// newContext.js
import { createContext } from "react" // createContext 함수 불러오기
// context안에 homeText란 변수를 만들고, 공백("") 문자를 저장한다.
const newContext = createContext({
homeText: "",
})
// Home.js
import React from "react";
import { Text, View } from "react-native";
import { useContext } from "react";
import { newContext } from "../newContext"; //newContext.js의 newContext를 불러옴
export default function Home() {
// useContext hook 사용해서, newContext에 저장된 정보 가져오기
const { homeText } = useContext(newContext);
// 불러온 정보 사용하기!!
return (
<View>
<Text>{homeText}<Text>
</View>
);
}
4. useReducer : useState()의 대체 함수로, 다양한 컴포넌트 상황에 따라 상태 값을 설정합니다.
const [state, dispatch] = useReducer(reducer, initialState, init);
// 첫 번째 인자로 현재 상태(state)와 행동(action)을 인자로 받는 reducer 함수를,
// 두 번째 인자로 상태의 초기값을
// 세 번째 인자로는 상태 초기화 함수를 넣고 현재 상태(state)와 액션을 발생시키는 함수(dispatch)를 반환
5.useCallback, useMemo
5-1. useCallback()
렌더링 최적화에 사용하며, 의존 배열에 있는 값이 변할 때만 첫 번째 인자로 주어진 콜백함수를 새로 생성하여 반환합니다.
const memoizedCallback = useCallback(callback, dependency);
// 두 번째 인자로 주어진 의존 배열(dependency)의 값이 바뀌면
// 첫 번째 인자로 주어진 콜백함수(callback)를 새로 생성하여 반환
// ex) number의 값이 변할 때마다 number의 값에 1을 더해주는 함수를 기억하고있다가 클릭 이벤트가 발생할 경우 해당 함수를 실행
const onClick = useCallback(e => { e.preventDefault(); setNumber(number + 1); ), [number]};
5-2. useMemo()
연산 최적화에 사용하며, 의존 배열에 있는 값이 변할 때만 첫 번째 인자로 주어진 콜백함수를 실행하여 구한 값을 반환합니다.
const memoizedValue = useMemo(callback, dependency);
// 렌더링 과정에서 두 번째 인자로 받은 의존 배열(dependency)내 값이 바뀌는 경우에만
// 첫 번째 인자로 받은 콜백함수를 실행하여 구한 값을 반환하는 함수
// ex) 배열의 모든 요소 합을 구하는 함수
const getSum = (arr) => { return arr.reduce((a, b) => a + b); }
const arr = [1, 2, 3, 4];
const sum = useMemo(() => getSum(arr), [arr]);
=> useMemo()는 숫자 또는 문자열, 배열, 객체 등의 값을 반환하고 useCallback()은 함수를 반환한다는 점에서 차이가 있습니다.
6.useRef, useImperativeHandle
6-1. useRef()
ref를 쉽게 사용할 수 있도록 해주고, 컴포넌트나 Html 요소를 래퍼런스로 관리 가능합니다.
6-2. useImperativeHandle()
useRef로 만든 래퍼런스를 상위 컴포넌트로 전달할 수 있습니다. (상위 컴포넌트에서 하위 컴포넌트의 함수, 데이터 가져오기 가능)
// container.js
const MainContainer = (props) => {
const mainContent = useRef();
return (
<div>
<MainContent
ref={mainContent}
/>
</div>
)
};
// ref를 연결하면 하위 컴포넌트 MainContent에 접근이 가능
// mainContent.current.name
// mainContent.current.funcTest
// MainContent.js
// ref를 forwardRef 내부의 (props, ref) => ... 함수의 두 번째 인자로 전달
const MainContent = forwardRef((props, ref) => {
const [name, setName] = useState('User');
let funcTest = () => {
console.log('ref');
}
useImperativeHandle(ref, () => ({ //forwardRef와 같이 써야함.
name: name,
funcTest:funcTest
}));
});
useState, useEffect, useRef, useImperativeHandle 는 프로젝트에 직접 사용을 해보았고
useContext, useReducer, useCallback, useMemo 는 아직 사용을 못해보았다.
사용하지 못한 hook 내장 API도 기회가 될 때 사용해보고 다시 정리해둬야겠다!
'JavaScript > React' 카테고리의 다른 글
React - 상태관리 zustand - 기초 (0) | 2022.05.17 |
---|---|
React - FunctionalComponent. 로컬변수 (1) | 2022.05.02 |
React - ClassComponent 라이프 사이클 (0) | 2022.04.27 |
React - ClassComponent 전역변수 (1) | 2022.04.25 |
React - FunctionalComponent. 함수형 컴포넌트? (4) | 2022.04.18 |
- Total
- Today
- Yesterday
- useRef
- typescript
- 호이스팅
- array
- 자바스크립트 동작원리
- programmers
- 목표 일기
- zustand
- 가상스크롤
- next.js 환경변수
- 1급 시민
- Virtual Scroll
- 함수형 컴포넌트
- 매겨변수와 인자
- next.js에 .gitignore가 적용되지 않을 때
- rewrites
- 시맨틱 웹
- redirects
- Next.js
- debouncing
- React로 쓰로틀링 디바운싱 구현
- 타입스크립트
- react
- redux
- 1급 함수
- vue
- 자바스크립트 비동기 동작원리
- javascript
- 렌더링 속도 개선
- 1급 객체
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |