함수형 컴포넌트의 클래스화
0
안녕하세요! 강의 듣고 응용하여 토이프로젝트 진행중인 학생입니다.
해당 강의에서 (7-18. 폴더 구조와 _error.js) next/app의 App을 가져와 class를 감싸주지 않고 그냥 함수형 컴포넌트 방식으로 진행해도 문제는 없지만 혹시 문제가 발생한다면 클래스로 변환해봐라 하셨었는데
_document.js 적용 후에 가끔 이유없이 새로고침 되는 문제가 발생합니다. 경고문에 Container를 더이상 사용하지 말라는 말도 있고, (이렇게 되면 next/app에서 가져온 무언가로 감싸지 않고 진행하는데 이래도 괜찮은건지 모르겠습니다 ㅠㅠ) 제로초님께서 강의 중 하신 말씀도 있고 해서 혹시 하는 마음에 _app.js를 클래스 형태로 변환해보고자 합니다.
변환을 하고 보니 일단은 문제없이 동작하긴 하지만
클래스형 컴포넌트가 익숙하지 않아 제대로 바꾼 것인지 고민이 되어 질문 드립니다!
변환 전, 변환 후 코드를 덧글로 달겠습니다!
한번 확인해주시면 감사하겠습니다 ㅠㅠ
답변 6
0
답변 감사합니다! propTypes도 앞에 static 을 붙여 이런식으로 작성하면 되는걸까요?
class DreamWitch extends App{
static propTypes = {
Component: propTypes.elementType.isRequired,
store: propTypes.object.isRequired,
pageProps: propTypes.object.isRequired,
};
static async getInitialProps (context){
const {ctx, Component} = context;
let pageProps = {};
const state= ctx.store.getState();
const cookie = ctx.isServer ? ctx.req.headers.cookie : '';
if(ctx.isServer){
Axios.defaults.headers.cookie = '';
}
if(ctx.isServer && cookie){
Axios.defaults.headers.cookie = cookie;
}
if(!state.user.me){
ctx.store.dispatch({
type:LOAD_USER_REQUEST
})
}
if(Component.getInitialProps){
pageProps = await Component.getInitialProps(ctx) || {};
}
return {pageProps};
}
render(){
const {Component, store, pageProps} = this.props;
return(
렌더내용
)
}
}
0
클래스로 변환한 코드입니다
import React from "react";
import propTypes from "prop-types";
import withRedux from "next-redux-wrapper";
import withReduxSaga from 'next-redux-saga';
import { createStore, compose, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import reducer from "../reducers";
import createSagaMiddleware from "redux-saga";
import rootsaga from "../sagas";
import {ThemeProvider} from 'styled-components';
import themes from '../components/styledComponents/theme';
import GlobalStyle from '../components/styledComponents/GlobalStyle';
import Axios from "axios";
import { LOAD_USER_REQUEST } from "../reducers/user";
import App from 'next/app';
import {Helmet} from 'react-helmet';
class DreamWitch extends App{
static async getInitialProps (context){
const {ctx, Component} = context;
let pageProps = {};
const state= ctx.store.getState();
const cookie = ctx.isServer ? ctx.req.headers.cookie : '';
if(ctx.isServer){
Axios.defaults.headers.cookie = '';
}
if(ctx.isServer && cookie){
Axios.defaults.headers.cookie = cookie;
}
if(!state.user.me){
ctx.store.dispatch({
type:LOAD_USER_REQUEST
})
}
if(Component.getInitialProps){
pageProps = await Component.getInitialProps(ctx) || {};
}
return {pageProps};
}
render(){
const {Component, store, pageProps} = this.props;
return(
<Provider store={store}>
<Helmet
title="DREAMWITCH :: 꿈의 마녀"
htmlAttributes={{lang:'ko'}}
meta={[{
charset: 'UTF-8'
}, {
name: 'viewport', content: "width=device-width, initial-scale=1",
}, {
'http-equiv': 'X-UA-Compatible', content: 'IE=edge',
}, {
name: 'og:title', content: 'DREAMWITCH :: 꿈의 마녀',
}, {
name: 'og:description', content: '꿈을 이루기 위한 할일 관리 프로젝트',
}, {
property: 'og:type', content: 'website',
}, {
property: 'og:image', content: '/thumb.jpg'
},]}
link={[{
rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'
}]}
/>
<ThemeProvider theme={themes}>
<GlobalStyle/>
<Component {...pageProps}/>
</ThemeProvider>
</Provider>
)
}
}
DreamWitch.propTypes = {
Component: propTypes.elementType.isRequired,
store: propTypes.object.isRequired,
pageProps: propTypes.object.isRequired,
};
const middleware = (store) => (next) => (action) => {
console.log(action);
next(action);
};
const configureStore = (initialState, options) => {
const sagaMiddleware = createSagaMiddleware();
const middlewares = [
sagaMiddleware,
(store)=>(next)=>(action)=>{
next(action);
}
];
const enhancer =
process.env.NODE_ENV === "production"
? comspose(applyMiddleware(...middlewares))
: compose(
applyMiddleware(...middlewares),
!options.isServer &&
window.__REDUX_DEVTOOLS_EXTENSION__ !== "undefined"
? window.__REDUX_DEVTOOLS_EXTENSION__()
: (f) => f
);
const store = createStore(reducer, initialState, enhancer);
store.sagaTask = sagaMiddleware.run(rootsaga);
return store;
};
export default withRedux(configureStore)(withReduxSaga(DreamWitch));
0
바꾸기 전 코드입니다
import React from "react";
import propTypes from "prop-types";
import withRedux from "next-redux-wrapper";
import withReduxSaga from 'next-redux-saga';
import { createStore, compose, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import reducer from "../reducers";
import createSagaMiddleware from "redux-saga";
import rootsaga from "../sagas";
import {ThemeProvider} from 'styled-components';
import themes from '../components/styledComponents/theme';
import GlobalStyle from '../components/styledComponents/GlobalStyle';
import Axios from "axios";
import { LOAD_USER_REQUEST } from "../reducers/user";
import {Helmet} from 'react-helmet';
const DreamWitch = ({ Component, store, pageProps }) => (
<>
<Provider store={store}>
<Helmet
title="DREAMWITCH :: 꿈의 마녀"
htmlAttributes={{lang:'ko'}}
meta={[{
charset: 'UTF-8'
}, {
name: 'viewport', content: "width=device-width, initial-scale=1",
}, {
'http-equiv': 'X-UA-Compatible', content: 'IE=edge',
}, {
name: 'og:title', content: 'DREAMWITCH :: 꿈의 마녀',
}, {
name: 'og:description', content: '꿈을 이루기 위한 할일 관리 프로젝트',
}, {
property: 'og:type', content: 'website',
}, {
property: 'og:image', content: '/thumb.jpg'
},]}
link={[{
rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'
}]}
/>
<ThemeProvider theme={themes}>
<GlobalStyle/>
<Component {...pageProps}/>
</ThemeProvider>
</Provider>
</>
);
DreamWitch.propTypes = {
Component: propTypes.elementType.isRequired,
store: propTypes.object.isRequired,
pageProps: propTypes.object.isRequired,
};
const middleware = (store) => (next) => (action) => {
console.log(action);
next(action);
};
DreamWitch.getInitialProps = async (context) => {
const {ctx, Component} = context;
let pageProps = {};
const state= ctx.store.getState();
const cookie = ctx.isServer ? ctx.req.headers.cookie : '';
if(ctx.isServer){
Axios.defaults.headers.cookie = '';
}
if(ctx.isServer && cookie){
Axios.defaults.headers.cookie = cookie;
}
if(!state.user.me){
ctx.store.dispatch({
type:LOAD_USER_REQUEST
})
}
if(Component.getInitialProps){
pageProps = await Component.getInitialProps(ctx) || {};
}
return {pageProps};
}
const configureStore = (initialState, options) => {
const sagaMiddleware = createSagaMiddleware();
const middlewares = [
sagaMiddleware,
(store)=>(next)=>(action)=>{
next(action);
}
];
const enhancer =
process.env.NODE_ENV === "production"
? comspose(applyMiddleware(...middlewares))
: compose(
applyMiddleware(...middlewares),
!options.isServer &&
window.__REDUX_DEVTOOLS_EXTENSION__ !== "undefined"
? window.__REDUX_DEVTOOLS_EXTENSION__()
: (f) => f
);
const store = createStore(reducer, initialState, enhancer);
store.sagaTask = sagaMiddleware.run(rootsaga);
return store;
};
export default withRedux(configureStore)(withReduxSaga(DreamWitch));
next 10 이상에서는 redux dev tool 구동이 안되나요?
0
272
1
세션 갱신 문의 건
0
482
7
배포 진행 후 Highlight updates components render 표시
0
445
1
똑같은 기능을 하는 테이블
0
447
4
관계형
0
312
2
프론트 서버를 이용하지 않는경우
1
299
3
인피니트 스크롤링 사용시 오류
0
278
0
계속 이런에러가 떠서 해결하기는 했는데 어떤 의미인지 모르겠습니다.
0
433
2
req.user가 언제 생성되나요??
0
330
2
Cannot read property 'id' of null 에러
0
333
1
리트윗한 게시글 불러오는 sequelize
0
252
1
result.data에서 images인 이유
0
281
2
takeLatest에 대한 질문입니다.
1
342
2
프론트에서 express를 사용하지 않을때 동적라우팅
0
501
6
getInitialProps가 클라이언트에서 수행되는 이유?
0
258
1
리로드하면 팔로우 언팔로우 값이 초기화 되는 문제입니다.
0
445
2
스타일드 컴포넌트와 className을 통한 스타일 적용의 차이에 대해 궁금합니다
0
585
2
할인 쿠폰 사용이 안되는되요 (848-f9af83f183e3)
0
365
1
nodejs mvc 패턴
0
975
4
사용하고 보니, 람다 구성이 궁금합니다!
0
266
1
제로초님
0
445
1
새로고침 로그인 풀림 문제.
0
247
1
안녕하세요. 강의 너무 감사합니다
0
157
1
제로초님
0
170
1