React - Redux (fan page)-4

Props를 통해서 화면 구성을 완료 -> Context API

ContextAPI란? 리액트의 기능중에 하나로, props를사용하지 않아도 특정 값을 모든 컴포넌트끼리 공유가 가능하도록하는 장치이다.(전역상태관리 용이)

1. 새로운 context를 만든다 --> createContext함수 사용
2. 만든 context 컴포넌트에서 value의 값을 공유하기 위해서는 provider라는걸 써서 value값을 넣어주면 모든 컴포넌트끼리 공유가 가능하다
3. context안의 값을 사용할때는 counsumer컴포넌트를 사용한다.

const LetterContext = createContext();
export const useLetterContext = () => useContext(LetterContext);

1. letterContext라는 이름을 가진 컨텍스트를 createContext()함수를 통해서 만듦(어디서든 데이터제공할수있음)
2. useContext()로 letterContext컨텍스트를 접근하게 만든다.

export const LetterProvider = ({ children }) => {
  const [letterList, setLetterList] = useState([]);
  const [setselectedMember, setSetselectedMember] = useState("");
  const handleMember = (membername) => {
    setSetselectedMember(membername);
  };
  const newMessage = (todo) => {
    const updatedList = [todo, ...letterList];
    setLetterList(updatedList);
    localStorage.setItem("letterList", JSON.stringify(updatedList));
  };

1. LetterProvider라는 상태관리 컴포넌트를 만든다
2. letterList와 setselectedMember라는 useState훅을 만들고 관리한다.

<LetterContext.Provider 
      value={{ letterList, newMessage, setselectedMember, handleMember }} 

      {children}
    </LetterContext.Provider>

contextAPI에서 value값을 사용하기 위해서는 해당 컴포넌트에 .Provider를 쓰고 해당 value값들을 접근할수 있게 한다. {children}으로 감싸서 하위컴포넌트들에게 노출시켜준다.