콜백 품질개선

콜백 프로젝트 기간이 길어졌다.
디버깅도 거의 다 했고
코드리뷰 전 코드를 개선해보자.

📌 문제점

• 모든 API 접근시 user_id와 token값이 필요한데, 모두 props로 넘겨주어 코드가 반복되고 길어짐

📌 해결방법

• 모든 컴포넌트에서 필요로하는 정보이며 바뀌지 않는 값이므로 전역으로 설정해주는게 효율성 있어보임
• useContext()를 사용해보겠다.

- useContext()

• props를 전역으로 관리할 수 있는 hook
• 종속 관계가 복잡할수록 props 전달의 비효율이 높아지기때문에 전역 관리의 필요성 ㅇㅇ

- 기존코드

• App.js

  return (
    <BrowserRouter>
    <div className="App">
      
      <div className='content'>
      {
          theme.bgColor===''?
         <Empty theme={theme}/>
        :
      <Routes>
       {/* {토큰없을시 로딩페이지로 연결 */}
        {token == undefined
        ?
        <Route path="/empty" element={<Empty/>}></Route>
        :
        <Route path="/" element={<Main theme={theme} user={user} token={token} auth={auth}/>}></Route>
        }
        {/* 토큰과 user_id값을 props로 넘김  */}
        <Route path="/create" element={<CreateMSG theme={theme} user={auth.id} token={token}/>}></Route>
        <Route path="/create/:id/:id2" element={<CreateMSG theme={theme} user={auth.id} token={token}/>}></Route>
        <Route path="/mypage" element={<MyPage user={auth.id} theme={theme} token={token}/>}></Route>
        <Route path="/empty" element={<Empty/>}></Route>
        <Route path="/account" element={<Login email={auth.email} theme={theme} isLogin={true} user={auth.id} token={token} phone={auth.phone}/>}></Route>
        <Route path="/terms" element={<Terms isTerms={true}/>}></Route>
        <Route path="/policy" element={<Terms isTerms={false}/>}></Route>
        <Route path="/log" element={<Log user={user} color={auth.color} isSelected={true} token={token}/>}></Route>
        <Route path="/payment" element={<Payment user={user} theme={theme} token={token} email={auth.email}/>}></Route>
      </Routes>
      }
      </div>
      
    </div> 
    </BrowserRouter>
  );

- useContext()로 props를 전역으로 관리하는 코드

• App.js

import { useEffect, useState, useLayoutEffect, createContext } from 'react';
export const AppContext = createContext();

function App() {

 const [value,setValue] = useState({
    user : 0,
    token : null
  })

.
.
.
  useLayoutEffect(()=>{
    const temp_token = getTokenFromPhone();
    setToken(temp_token)
  },[])

  useLayoutEffect(()=>{
    let tempInfo = getUserIdFromPhone();
    setUser(tempInfo);
    setValue({
      user:tempInfo,
      token:token
    })
  },[token])

.
.
.
 return (
 // Router를 useContext()를 선언한 변수로 감싸고, 해당 변수에 props처럼 전달한 전역 변수를 객체로 전달
    <AppContext.Provider value={value}>
    <BrowserRouter>
    <div className="App">
      
      <div className='content'>
      {
          theme.bgColor===''?
         <Empty theme={theme}/>
        :
      <Routes>
       
          {/* token 값 확인안될시 loading page 보여주기 */}
          {token == undefined
          ?
          <Route path="/empty" element={<Empty/>}></Route>
          :
          <Route path="/" element={<Main theme={theme} auth={auth}/>}></Route>
          }
          <Route path="/create" element={<CreateMSG theme={theme} />}></Route>
          <Route path="/create/:id/:id2" element={<CreateMSG theme={theme} />}></Route>
          <Route path="/mypage" element={<MyPage theme={theme} />}></Route>
          <Route path="/empty" element={<Empty/>}></Route>
          <Route path="/account" element={<Login email={auth.email} theme={theme} isLogin={true} phone={auth.phone}/>}></Route>
          <Route path="/terms" element={<Terms isTerms={true}/>}></Route>
          <Route path="/policy" element={<Terms isTerms={false}/>}></Route>
          <Route path="/log" element={<Log color={auth.color} isSelected={true} />}></Route>
          <Route path="/payment" element={<Payment theme={theme} email={auth.email}/>}></Route>
        
      </Routes>
      }
      </div>
      
    </div> 
    </BrowserRouter>
    </AppContext.Provider>
  );
 }

• Main.js

import React, { useEffect, useState, useRef, useLayoutEffect, useContext } from "react";
import { AppContext } from "../App";

function Main(props) {

const value = useContext(AppContext);
.
.
.
// API 통신 코드 중 부분

await fetch(config.URL_ADDRESS+config.SEARCH_CALLBACK_LIST+'/'+value.user+'/'+pages.start+'/'+pages.end, {
                mode: 'cors',
                headers: {
                    'Accept':'application/json',
                    'Authorization': 'Bearer ' + value.token,
                  }
            })
            
}

📌 의문점

• 나는 부모-자식 컴포넌트가 3중 이상으로 가지 않아서 모두 props로 넘겨줘도 상관없어보이는데
• 이것이 성능의 개선이 되는가??