[React/Context] 실무에서 사용할 수 있을까

Jinjer·2021년 11월 16일
2
post-thumbnail

1. 프롤로그

React는 Redux, MobX, Context를 이용해서 전역에서
props를 공유할 수 있다

그렇다면 한 번 적용해보면서 현업에서 사용할 수 있을지 따져보자
오늘 다뤄볼 예제는 다음과 같은 미션이 있다.

  1. Context로 데이터를 공유했으면 좋겠어요
  2. Hook도 사용해 주세요
  3. 인증 여부에 따라 로그인/비로그인 화면을 나눠주세요

2. Context

React 서버가 정상적으로 구동되었다는 전제하에
Context를 만들어 하위 컴포넌트에서 데이터를 조작할 수 있도록
파일을 하나씩 만들면서 알아보도록 하자😙

루트 경로에 ‘src’ 폴더를 하나 생성하고 ‘context’ 폴더를
하나 더 만들어 AuthContext.js 파일을 생성하고
context를 만들기 위해 ‘createContext’를 import 하면 된다

// src/context/AuthContext.js
import React, { useState, createContext } from "react";

export const AuthContext = createContext();

export const AuthProvider = ({children}) => {
    const [userState, setUserState] = useState({
        _id: '',
        name: '',
        auth: false
    });

    const isAuthenticated = async (token) => {
        return await fetch(apiURL, {
            method: "GET",
            headers: {
                "Accept": "application/json",
                "Authorization": `Token ${token}`
            }
        })
        .then(response => response.json())
        .catch(err => console.log(err))
    };

    return (
        <AuthContext.Provider value={ {userState, setUserState, isAuthenticated} }>
            {children}
        </AuthContext.Provider>
    );
};

‘useState’ Hook으로 사용자의 인증여부에 따라 ‘auth’의 값을 바꾼다

Provider는 Context를 구독하는 컴포넌트들에게 context의 변화를
알리는 역할을 맡는데 ‘AuthContext’에 value로

useState Hooks로 설정한 userState, setUserState와
isAuthenticated 함수를 하위 컴포넌트로 전달한다

3. App

다음은 루트 경로에 ‘src’ 폴더를 하나 생성하고
app.js 파일을 하나 만들고 다음과 같이 코드를 작성한다

// src/app.js
import React, {useContext, useEffect} from "react";
import ReactDOM from "react-dom";
import {AuthContext, AuthProvider} from "./context/AuthContext";

const App = () => {
    const {userState, setUserState} = useContext(AuthContext);
    
    return userState.auth ? <div>true</div> : <div>false</div>;
};

ReactDOM.render(
    <AuthProvider>
        <App />
    </AuthProvider>,
    document.getElementById("app"));

‘AuthProvider’를 최상위에서 렌더링해야 context에 설정된 props를 가져올 수 있다

‘useContext’ Hook을 사용하여 위에서 만들었던 AuthContext의
현재 값을 반환 받을 수 있다

그럼 fetch를 사용해서 인증을 해보고 userState의 auth값을
변경해 보도록 한다

// src/app.js
const App = () => {
    const {userState, setUserState, isAuthenticated} = useContext(AuthContext);
    const token = 로그인 후 저장된 토큰

    const authenticationUser = () => {
        isAuthenticated(token)
        .then(data => {
            if(data.error) {
                console.error('Error:', data.error)
            } else {
                setUserState({
                    _id: data.user._id,
                    name: data.user.name,
                    auth: data.user.auth
                });
            }
        });
    };

    useEffect(() => {
        authenticationUser();
    }, []);
    
    return userState.auth ? <div>true</div> : <div>false</div>;
};

눈치가 빠르다면 단번에 알아챌 수 있다👏

로그인 후에 쿠키나 세션에 저장된 토큰을 context의 ‘isAuthenticated’ 함수를
통해 인증 받고 결과를 ‘setUserState’로 변경해주므로 인증여부에 따라
다른 화면이 보이는 것을 확인할 수 있다

4. 정리

✔ Context도 Redux나 MobX와 같은 의도로 만들어졌다
✔ 컴포넌트 재사용이 어렵다는 단점이 존재한다
✔ 특정값이 아닌 다른값이 변경되도 전체 리렌더링된다(치명적)
✔ store가 따로 없어서 상태 관리가 어렵다
✔ 컴포넌트 밖에서는 사용이 불가능하다
✔ 미들웨어를 이용한 Side-effect 관리가 안된다

✔ 위의 여러 단점들로 인하여 현업에서는 사용하기 어렵다고 판단했다

profile
프론트엔드개발자

0개의 댓글