2023 07 10

2023-07-10¶

React StrictMode 해결하기¶

참고: https://www.youtube.com/watch?v=MXSuOR2yRvQ&t=626s

개요
- initial mount -> component -> unmount
  - 근데 리액트는 이걸 재사용할 수 있도록 최적화를 최대한 지원하려고해
- 그래서 StrictMode를 통해 old component가 뇌절하는 현상을 StrictMode를 통해서 해결하려고 해

useEffect()
- 절차
  1. Component mount -> useEffect 실행 -> 무엇인가 생김
  2. Component unmount
  3. (at StrictMode) Component mount -> useEffect 실행 -> 무엇인가 생김
- 해결방법
  - Component unmount 시점에 후술할 clean up을 해주면 remove를 해주면 두개 생길게 하나만 생김!
  - 혹은 useRef() 를 사용하여 해결해보자
```
function App() {
    const shouldLog = useRef(true);
    useEffect(() => {
        if (shouldLog.current) {
            shouldLog = false;
            // do Something
        }
    }, [])
}
```

React cleanup function¶

참고: https://kiwitrip.tistory.com/entry/react-clean-up-function%EC%97%90-%EB%8C%80%ED%95%9C-%EC%9D%B4%ED%95%B4

기존 클래스형 컴포넌트의 componentDidMount와 유사한 기능

Component의 unmount 이전에 어떠한 작업을 수행하고자 한다면, Clean-up 함수를 반환해주세요!

useEffect(() => {
    /* 이 함수를 실행해 주세요 */
    return () => {
        /* 변경된 값이 화면에서 사라질 때 */
    }
}, [/*이 값이 변경된다면*/])

React UseContext¶

참고: https://www.youtube.com/watch?v=LwvXVEHS638

리액트에서 데이터 흐름
- 부모 -props-> 자식
- Context: 상위 컴포넌트 데이터를 하위 컴포넌트 중에 필요한 놈만 가져다가 쓸 수 있도록 지원
  - 다만 Context는 컴포넌트 재사용에 어려움을 주기에 필요할 때만 사용하자!

코드

export const ThemeContext = createContext(null);

function App() {
    const [isDark, setIsDark] = useState(false);

    return (
        <ThemeContext.Provider value={{isDark, setIsDark}}>
            // 하위 컴포넌트
        </ThemeContext.Provider>
    );
}