useEffect 예시 추가 및 UseContext

useEffect

사용자가 input창에 값을 입력할때 업데이트 되는 state따라 함수호출에 딜레이를 주고 후속처리하는 예시

ex)

import { useState, useEffect } from 'react';
import styled from 'styled-components';

const Test = () => {
  const [test, setTest] = useState('하위');

  const inputHandler = (e) => {
    setTest(e.target.value);
  };

  useEffect(() => {
    const check = setTimeout(() => {
      console.log(test);
    }, 1000);
    //setTimeout을 이용한 state업데이트시 함추호출 딜레이 추가 및 clearTimeout를 사용하기위한 변수 선언 


    return () => {
      clearTimeout(check);
    };
    // setTimeout이 실행된 후 함수를 종료 시키는 후속처리 과정
  }, [test]);

  return (
    <StyledTest>
      <input type="text" onChange={inputHandler} />
      <div>{test}</div>
    </StyledTest>
  );
};

const StyledTest = styled.div``;

export default Test;

만약 useEffect의 의존성 배열에서 감시하는 데이터가 객체이고 객체안에 특정 속성에 변화만을 감지하고싶다면 객체구조분해 할당을 이용하여 특정속성만 꺼내어 
의존성 배열에 넣어 주는 방법이 있다 자세한 내용은 MAX강의 117번에 문서 참조!

---

useState vs useReducer

useState: 데이터가 업데이트 되는 횟수가 빈번하고 간단한 데이터일때 주로 사용한다

useReducer:데이터가 복잡한 객체일때 useState는 하나하나 명시하는 점이 불편하기 때문이 이런 경우 주로 useReducer를 사용한다

---

useContext
useContext는 하위컴포넌트에게 데이터를 전달할때 자식의 자식같은 경우 props를 몇번이고 반복하는 현상을 
효율적으로 관리하고자 할때 쓰인다 

useContext사용법
1 scr폴더에 context 전용 폴더를 만든후 context를 설정할 js 또는 jsx파일을 만든다
이곳에서 React.createContext함수를 명시하는데 createContext함수는 context를 만들겠다고 선언하는 역할읋 한다
이때 인자로 context의 초깃값을 설정한다

2 context파일을 부모요소에서 import한후 자식요소들에게 전달 할 수있도록 컴포넌트 형태로 만든후 랩핑한다
이때 Provider라는 react내장기능을 사용하는데 하위 컴포넌트에게 데이터를 전달할 수 있게 만드는 기능을한다 
Provider컴포넌트에 하위 컴포넌트에 전달하고자 하는 데이터를 props로 만들어준다 

3 하위 컴포넌트는 Provider가 제공하는 데이터를 전달받기위해 useContext를 사용한다 이때 useContext함수의 인자로 데이터를 전달하는 context를 명시해야한다 

ex)

//context파일
import React from 'react';

export const TestContext = React.createContext(null);

//부모 컴포넌트에서 Provider 설정 및 전달할 데이터 props설정
import Test from '~/components/Test';
import styled from 'styled-components';
import { TestContext } from './Store/context';
const App = () => {
  return (
    <TestContext.Provider
      value={{
        test1: 'this is test',
        test2: 100,
      }}
    >
      <StyledApp>
        <Test />
      </StyledApp>
    </TestContext.Provider>
  );
};

const StyledApp = styled.div``;

export default App;



//하위 컴포넌트에서 데이터를 전달받기위해 useContext를 사용한 예시
import { useReducer, useContext } from 'react';
import styled from 'styled-components';
import { TestContext } from '../Store/context';

const Test = () => {
  const ctx = useContext(TestContext);

  return (
    <StyledTest>
      <div>{ctx.test1}</div>
      <div>{ctx.test2}</div>
    </StyledTest>
  );
};

const StyledTest = styled.div``;

export default Test;

---

react hooks 사용시 규칙
1 hook은 항상 컴포넌트 함수 안에서 호출 해야한다

2 hook은 컴포넌트 함수 최상단에 명시한다 즉 함수 또는 문에서 hook을 호출 하면 안된다
그렇다면 setState는 왜 함수나 문에서 호출하냐 말 할 수 있겠지만 여기서 말하는 hook은
use가 붙은 react 내장함수를 말한다 

3 useEffect 사용시 의존성 배열이 없어야하는 이유가 존재하는게 아니라면 업데이트를 감시할 state가없더라도 의존성 배열을 명시한다
의존성 배열이 없다면 컴포넌트가 랜더링 될때마다 useEffect에 로직이 실행된다 자칫 무한 루프에 빠질 수 있고 불필요한 함수가 실행 될 수 있기때문이다