Hook
Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수이다.
🤙Hook 사용 규칙
- 최상위(at the top level)에서만 Hook을 호출해야 한다.
- React 함수 컴포넌트 내에서만 Hook을 호출해야 한다. (JavaScript 함수에서는 호출해서는 안된다.)
useState
가장 기본적인 hook으로, 함수 컴포넌트에서 가변적인 상태를 갖게 해준다.
const [state, setState] = useState(initialState);업데이트 방식
이전에 공부했던 방식은 setState 안에 수정할 값을 넣어줬었다.
하지만 함수도 넣을 수 있다.
setState((currentNumber)=>{return currentNumber+1});차이점
함수형 업데이트 방식은 동시에 명령을 내렸을 때, 그 명령들을 모아 순차적으로 각각 한번씩 실행시킨다.
(일반 업데이트 방식은 명령들을 하나로 모아 한번만 실행시킨다.)
useEffect
useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다.
인자로 실행시킬 함수와 dependency array를 받는다.
useEffect(()=>{
//function
},[dependency array]);dependency array
dependency array의 값이 변경될 때만 useEffect를 사용한다.
하나의 예시를 들어보자
import React, { useEffect, useState } from "react";
const App = () => {
const [value, setValue] = useState("");
useEffect(() => {
console.log("hello useEffect");
});
return (
<div>
<input
type="text"
value={value}
onChange={(event) => {
setValue(event.target.value);
}}
/>
</div>
);
}
export default App;위 코드를 실행해보면, "hello useEffect"가 input에 값이 입력될 때마다 실행되는 것을 확인할 수 있다. input에 값이 입력되면서 state가 변경되고, App 컴포넌트가 리렌더링 됐기 때문이다.
이 때, dependency array로 빈배열 []을 넣어주면 이 현상을 막을 수 있다.
useEffect(() => {
console.log("hello useEffect");
}, []);
useEffect(() => {
console.log("hello useEffect");
}, [value]); [value]를 넣는다면, 입력될 때마다 console이 찍히는 것을 확인할 수 있다.
clean up
반대로 컴포넌트가 사라지면 무언가를 실행하고 싶을 때 이 과정을 clean up이라고 표현한다.
방법은 아래 코드와 같다.
useEffect(()=>{
// 화면에 컴포넌트가 나타났을(mount) 때 실행하고자 하는 함수를 넣어주세요.
return ()=>{
// 화면에서 컴포넌트가 사라졌을(unmount) 때 실행하고자 하는 함수를 넣어주세요.
}
}, [])useRef
DOM 요소에 접근할 수 있도록 하는 React Hook이다.
const ref = useRef("초기값");
ref에는 {current: '초기값'} 이렇게 값이 담겨 있다.
current 값을 변경하고 싶을 땐
ref.current = "바꾼 값";위와 같이 사용해주면 된다.
이렇게 설정된 ref값은 컴포넌트가 렌더링 되어도 unmount 전까지 값을 유지한다!
용도
- 저장공간
state는 변화가 일어나면 다시 렌더링 되지만, ref는 변화가 일어나도 렌더링되지 않는다. - DOM
렌더링 되자마자 특정 input이 focusing돼야 할 때 사용한다.
DOM 접근
화면이 렌더링 됐을 때 아이디 부분에 자동으로 포커싱을 맞추고 싶다면
import { useEffect, useRef } from "react";
import "./App.css";
function App() {
const idRef = useRef("");
// 렌더링이 될 때
useEffect(() => {
idRef.current.focus();
}, []);
return (
<>
<div>
아이디 : <input type="text" ref={idRef} />
</div>
<div>
비밀번호 : <input type="password" />
</div>
</>
);
}
export default App;