<사용법 예시>
import React, { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
const [state, setState] = useState(initialValue);
setCount(count + 1);
useEffect(() => {
... // 실행할 내용들
});
dependency 값 추가
let something = 2;
useEffect(() => {
... // 싫행할 내용
}, [something]);
// 비어있는 dependency 추가
useEffect(() => {
... // 실행할 내용들
}, []);
useEffect에는 [] 안에 값이 들어가거나 들어가지 않는 경우가 있다. 이를 dependency
라고 부르는데 dependency 파라미터 값에 의존
하여 useEffect 함수가 실행될지 말지를 결정한다.
위와같이 dependency값에 something이 들어가 있는 경우에는 해당 변수의 값이 변경될 때
, useEffect 함수가 실행된다.
something이라는 값을 순차적으로 3, 4, 5로 총 세 번 변경하게 되면, 해당 useEffect함수는 3번 실행되게 된다.
비어있는 dependency 추가할 경우
는 컴포넌트가 처음으로 마운트되었을 때
실행된다.
이 경우에만 실행되고 다른 경우에는 실행되지 않기에 초기에 한 번 실행
할 작업들이 필요할 때 사용한다.
context
는 부모가 자식컴포넌트에게 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 전달할 수 있게 해준다.
useContext
는 context를 좀더 편하게 사용할 수 있도록 도와주는 hook이다.
import React, { useState, createContext } from "react";
import Mart from "./components/Mart";
export const AppContext = createContext(); // context생성
const initialValue = {
name: 'kim',
age: 20
};
return (
<>
<AppContext.Provider value={initialValue}> // Provider로 하위컴포넌트를 감싼다.
<Children />
</AppContext.Provider>
</>
);
}
export default App;
// .Consumer 사용시
import React from "react";
import { AppContext } from "./App";
const Children = () => {
return (
<AppContext.Consumer> // .Consumer로 감싸준다.
{(initialValue) => (
<>
<h3>이름은 {initialValue.name}입니다.</h3>
<h3>나이는 {initialValue.age}입니다.</h3>
</>
)}
</AppContext.Consumer>
);
};
export default Children;
<useContext 사용 예시>
// useContext hook사용시
import React, { useContext } from "react";
import { AppContext } from "./App";
const Children = () => {
const initialValue = useContext(AppContext); // useContext hook사용.
return (
<>
<h3>이름은 {initialValue.name}입니다.</h3>
<h3>나이는 {initialValue.age}입니다.</h3>
</>
);
};
export default Children;