원티드 프론트엔드 프리온보딩 (22.12.19 월 ~ 23.01.20 금)
1. useEffect
useEffect에서 의존성 배열 자세히 살펴보기
📍의존성 배열이란?
의존성이란?
- A라는 요소가 온전히 동작하기 위해서 B, C 등의 다른 요소들을 필요로 한다면
- A는 B, C 등에 의존하고 있다고 표현
⭐B, C 등이 A의 의존성이 된다
useEffect 의 의존성 배열
- effect 함수가 사용(의존하고 있는) 외부 값들의 모음
📍의존성 관점에서 useEffect 제대로 사용하기
⭐가능한 의존성 적게 만들기
⭐setState 함수도 의존성 배열에 넣어야
- bad
// 많은 의존성 사용
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
const intervalID = setInterval(() => {
setCount(count + 1);
}, 1000);
return () => clearInterval(intervalID);
}, [count, setCount]);
return (
<div>
<h1>count:{count}</h1>
</div>
);
}
- good
// setCount에 count 대신 콜백함수 사용하여 의존성 줄임
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
const intervalID = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
return () => clearInterval(intervalID);
}, [setCount]);
return (
<div>
<h1>count:{count}</h1>
</div>
);
}
이외에도
- effect 안에 함수를 정의하여 의존성 제거
- effect 안에서 실행할 함수를 컴포넌트 밖에서 정의
- useCallback으로 메모이제이션
같은 방법을 활용할 수 있다
2. Context API
📍Context API란?
- React의 단방향 데이터 전달을 극복
- props drilling 문제를 해결
📍사용법
1️⃣createContext
- createContext 함수를 통해 context 객체 생성
- 인수로 default value 전달 가능
(Provider에서 데이터 제공하기 전에 사용할 초기값)
2️⃣Provider
- 만들어진 context 객체의 프로퍼티 컴포넌트
- value에 전달할 값을 입력
3️⃣useContext
- Context의 value에 접근
const UserContext = createContext(null);
const user = {name: "yeonuk"};
<UserContext.Provider value={user}>
<Child />
</UserContext.Provider>
function Child() {
const user = useContext(UserContext);
return <h1>{user.name}</h1>
}