일단 찾아본건 10가지이다..
가장 기본이 되는 Hook이다.
함수형 컴포넌트에서 가변적인 상태를 지닐 수 있게 해주며 상태를 관리해야 할 때 사용한다.
import React, { useState } from 'react';
const Hook() {
const [state, setState] = useState(0)
return (
<>
<p>{state}</p>
<button onClick={() => setState(state + 1)}</button>
</>
)
}
위와 같이 사용한다.
랜더링을 할때마다 특정 작업이 실행되게 해준다.
import React, { useEffect } from 'react';
const Hook() {
useEffect(() => {
console.log('hi!!');
}, []);
return (
)
}
위와 같이 처음 랜더링 될때 실행 할 수 있다.
useEffect의 의존성배열을 사용하면 특정 상태가 변화할때만 실행 되게 할수있는대
import React, { useState, useEffect } from 'react';
const Hook() {
const [state, setState] = useState(0);
useEffect(() => {
console.log('hi!!');
}, [state]);
return (
<>
<p>{state}</p>
<button onClick={() => setState(state + 1)}</button>
</>
)
}
위와 같이 사용한다.
context를 이용하면, 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에서 데이터를 사용할 수 있다.
크게 3가지 단계로 구분된다.
1. Context(저장소)를 생성
2. Context(저장소)에 값을 저장
3. Context에 저장된 값 불러오기
//context.js
import React, { createContext } from "react";
export const UserNameContext = createContext(null);
- Context(저장소)를 생성하면 내부에 Provider이라는 컴포넌트가 생성이 된다.
- Provider 컴포넌트는 value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달한다.
// App.js
import React from "react";
import Screen from "./Screen";
import { UserNameContext } from "./context";
export default function App() {
return (
<UserNameContext.Provider value="John">
<Screen />
</UserNameContext.Provider>
);
}
// Screen.js
import React, { useContext } from "react";
import { UserNameContext } from "./context";
export default function Screen() {
const userName = useContext(UserNameContext);
return <p>My name is {userName}</p>;
}
위와 같이 useContext를 사용하여 값을 불러온다.
useReducer부터는 다음편에서..