⚠️ TIL은 제가 이해한 내용을 바탕으로 작성되어 있으며, 쉽게 이해하기 위해서 이것저것 스스로 비유를 많이 생각하는 편이라 비약이 있을 수 있습니다. ⚠️
1. useEffect
✓안전한코딩✓에러검증
우리가 매일 사용하는 useEffect.. 혹시 모르고 사용하셨나요?
✓안전한코딩✓에러검증
우선, useEffect에 대해서 한 번 정리해보자.
useEffect는 언제 실행되는가
1) 컴포넌트가 mount되었을 때
2) 컴포넌트가 업데이트 되었을 때
3) [ ]가 있다면 [ ] 내부의 state가 변경될 때만
1) 컴포넌트가 mount 되었을 때 & 2) 컴포넌트가 업데이트 되었을 때
function 내컴포넌트(){
useEffect(()=>{
console.log(1111)
})
}위와 같이 useEffect를 사용하면 내컴포넌트가 mount되었을 때 console.log(1111)이 실행이 된다(1111 콘솔 출력). 이후에 내컴포넌트가 업데이트 될 때마다 console에 1111을 출력한다. 예를 들어 이후에 input을 추가해서 onChange이벤트 등을 받을 때.
그러나 위와 같이 console.log(1111) 정도면 다행이지만 무거운 코드라면 어떻게 될까? 업데이트가 될 때마다 내부 함수가 계속해서 실행이 될 것이다. 그렇기 때문에 useEffect는 뒤에 무언가를 추가해줄 수 있다.
3) [ ] 내부의 state가 변경될 때
function 내컴포넌트(){
useEffect(()=>{
console.log(1111)
}, [⭐])
}만약 위와 같이 코드를 써주면 이제 ⭐가 변경될 때만 console.log(1111)을 실행시켜준다. 그렇다면 요것을 이용하면? [ ]을 비어있게 처리를 하면 한 번 페이지가 로드되고 mount 될 때만 실행이 되고 이후에는 실행되지 않는다. (⭐딱 한 번만 실행!⭐)
+추가 적인 내용
useEffect (()=>{
return 함수 어쩌구~~
})이렇게 return 이후에 적어주면 unmount될 때 실행된다. 요것을 이제 응용해보자!
Context 추가 공부
주중에 context 공부를 너무 후다다닥 넘긴 느낌이 있어서, 공식 사이트를 들어가서 추가적으로 Context에 대해서 공부했다.
언제 쓸까?
context는 React 컴포넌트 트리 안에서 전역(global)하게 데이터를 공유할 수 있게 만들어졌다. 그래서 로그인, 테마, 선호하는 언어 등에 사용한다.
사용하기 전에 고려해보자
전역! 이라고 하면 느낌이 우선 쎄하다. context는 여러 층위의 컴포넌트에 네스팅된 많은 컴포넌트에게 데이터를 전달하는 것이 목적이다. context를 사용하면 컴포넌트의 재사용성이 낮아지므로 꼭 필요한 경우에만 사용하자.
데이터를 트리 안 여러 층에 있는 많은 컴포넌트에 주어야 할 때도 있다. 이런 데이터 값이 변할 때마다 모든 하위 컴포넌트에게 널리 "방송"하는 것이 context이다.
prop이 조선 시대 파발처럼 이곳 저곳 들리면서 모두 알려주는 느낌이라면
Context는 요즘 푸쉬 알림처럼 딱 푝! 하고 사용하게 하는 것인가..?
API
React.createContext
const MyContext = React.createContext(defaultValue);context 객체를 만든다고 쫄 필요 없다. 위와 같이 만들어 주면 된다. 그럼 이후에 구독! 하고 있는 컴포넌트를 렌더링 할 때 React는 컴포넌트 트리에서 가장 가까이 있는 Provider로부터 현재 값을 읽언낸다.
그럼 저기 defalutValue는 뭐하는 친구일까? 그렇게 트리 안에서 Provider를 찾지 못했을 때만 사용하는 값. 그래서 컴포넌트에서 얘만 테스트할 때 유용하다.
context.Provider
<MyContext.Provider value={/* 어떤 값 */}>context 오브젝트
Context 오브젝트에 포함된 React 컴포넌트인 Provider는 Context를 구독하는 컴포넌트들에게 Context의 변화를 알려주는 알림 설정 버튼!
Provider 컴포넌트는 위에 value={/ 어떤 값 /}> 의 value prop을 받아서 이 값을 하위의 컴포넌트에게 넘겨준다. 값을 받을 수 있는 컴포넌트의 수에는 제한이 없다. 유튜버가 유튜버를 구독하는 것처럼 Provider 하위에 Provider도 괜찮다. 다만 이 경우에는 하위의 Provider가 우선한다.
새로운 영상이나 커뮤니티에 글이 올라오면 파파파박 전달 되는 것처럼. Provider 하위에서 Context를 구독하는 모든 컴포넌트는 Provider의 value Prop이 바뀔 때마다 재렌더링 된다. 이러한 하위 consumer로의 전파는 shouldComponent 메서드가 적용되지 않아 업데이트를 건너뛰어도 consumer가 업데이트 된다.
이 때 context 값이 변경되었는지 여부는 Object.is 와 동일한 알고리즘이다.
코드 분석
import { createContext, useReducer } from "react";
🙋♂️ 우선은 컨텍스트를 만들기 위해서 임포트를 해준다
export const AuthContext = createContext();
🙋♂️ AuthContext라는 컨텍스트를 만들어준다
export const authReducer = (state, action) => {
🙋♂️ state는 state 이며, action은 dispatch이다.
dispatch의 type에 따라서 밑의 switch가 작동
switch (action.type) {
default:
return state;
}
};
export const AuthContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(authReducer, {
// 함수와 초기값을 인수로 받는다
user: null,
});
return (
<AuthContext.Provider value={{ ...state, dispatch }}>
{children}
</AuthContext.Provider>
);
};
잠깐 useReducer는?
보완해야 할 점
- 생각보다 React 공식 문서가 자세하고 친절하고 내가 모르는 부분도 많다. 라이브러리를 쓰면서 공식 문서도 모르면.. 안 되기 때문에 계속해서 모르는 부분이 있으면 그 부분과 관련된 부분들을 찾아서 읽고 전체를 정리해야겠다.
