REACT HOOK의 용도 정리

 

REACT HOOK의 용도를 정리했습니다.

아직 현장에서 일을 안해보니 정확한 용도를 알기가 어려워서 간단하게 각각의 HOOK들이

무슨 역할을 하는지 정리해보도록 하였다.

(역할이 뭔지도 제대로 파악도 못했는데 하루에 hook을 1~2개씩 익히려니 자꾸 까먹는다...)

 

 

useState()

[설명]

데이터 값이 자주 변경되는 곳에 상태 관리를 할 수 있도록 한다.

컴포넌트에서 관리하는 상태값이 적거나 단순한 숫자나 문자열의 경우 사용하는 것이 좋음

값이 바뀔 때마다 렌더링을 한다.

[기초문법]

const [초기변수, 초기변수를 변화시킬 함수] = useState(초기값);

초기변수 = 초기값

 

 

useEffect()

[설명]

(조건에 해당하는 부분이)렌더링 될 때마다 특정 작업을 실행시킨다.

[기초문법]

useEffect(함수, [의존성배열])

- 조건 없음 의 경우 모든 렌더링에서 실행

- [] 경우 컴포넌트가 처음 나타날 때만 실행

- [의존성배열] 경우 의존성 배열에 해당하는 것이 실행 될 때마다 실행

[추가문법]

return 함수

useEffect에서 함수를 반환한다(cleanup)

 

 

useRef()

[설명]

1. 불필요한 렌더링을 발생시키지 않는 값을 관리할 경우

메모리를 저장할 때 이용한다. 값이 변경되어도 렌더링 되지 않는다.

(변경 시 렌더링을 발생시키지 말아야 할 데이터를 다룰 때 사용)

2. 접근하고자 하는 DOM요소에 ref속성을 부여하면 해당 DOM요소에 접근

[문법]

const 변수 = useRef();

사용1. 변수명.current

사용2. 변수명.current.함수,요소 등등 (ex : focus(), value...)

 

 

useMemo()

[설명]

*Memoriztion기법을 활용하여 컴포넌트를 최적화 하는 기능.

의존성이 변할 때만 재선언

고비용의 연산을 하지 않기 위해 연산된 값을 저장하는 용도.

변수(값)의 선언을 기억.

[문법]

const 변수 = useMemo(함수, [의존성배열])

 

 

useCallback()

[설명]

*Memoriztion기법을 활용하여 컴포넌트를 최적화 하는 기능.

의존성이 변할 때만 재선언

컴포넌트를 실행할 때마다 새로운 레퍼런스를 가진 함수를 만들어서 자꾸만 리렌더링 하는 것을 방지.

함수의 선언을 기억.

[문법]

const 변수 = useCallback(함수, [의존성배열])

 

>>useMemo를 useCallback처럼 사용할 수 있지만 그 반대는 불가능하다<<

 

 

useContext()

[설명]

프로젝트 내 props를 전역적으로 사용할 수 있게 한다.

[문법]

const 생성Context = createContext(초기상태)

const 변수 = useContext(생성Context)

생성Context.provider value={객체}

 

 

 

 

 

*Memoriztion*

Memoizetion이란 어떤 자주사용하는 값을 반복적으로 받아오기위한 목적으로 계산을 해야한다면 이전에 이미계산한 값을 캐싱해두므로 해당 값이 또 필요할 때마다 반복적으로 계산하는게 아니라 메모리에서 꺼내서 재사용하는 최적화 기법

 

 

 

 

 

참고자료

리액트 개발자 5주차 ( 화살표 함수/ useState / useEffect / useRef / 삼항연산자 / `` , ${} / window.scrollY / spread) : 네이버 카페 (naver.com)

리액트 개발자 5주차 ( 화살표 함수/ useState / useEffect / useRef / 삼항연산자 / `` , ${} / window.scrollY /

 

usememo usecallback 리액트 짬.. : 네이버블로그 (naver.com)

usememo usecallback 리액트 짬지식2

React Hook - useRef : 네이버 블로그 (naver.com)

React Hook - useRef