[React / Bugfix] Unknown Prop Warning

버그 내용

Warning: React does not recognize the `computedMatch` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `computedmatch` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

원인

react warning computedMatch regarding some case issues?

 

Unknown Prop Warning – React

The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.

불확실한, 알 수 없는 DOM 요소를 렌더링하려고 할 때 발생되는 에러인 것 같다.

문서 내용을 보아하니, 불확실한 props 요소를 사용하여 렌더링할 때도 발생되는 에러로 확인된다.

나의 경우 react-router-dom을 사용하던 중, <Switch> 하위에 삼항 연산자를 사용하여 HTML Tag를 지정해주어 발생된 문제였다.

해결

어디까지나 아래 케이스에 대한 해결법일 뿐이니 참고만 부탁드립니다.

react-router-dom의 <Switch> 하위에 Fragment를 추가해주었다. (<></>)

 

👇 관련 코드 보기

Before

const AppRouter = ({ isLoggedIn, userObj, refreshUser }) => {

    return (
        <Router>
            {isLoggedIn && <Navigator userName={userObj.displayName} />}
            <Switch>
                {

                    isLoggedIn ? (
                        <div
                            style={{
                                maxWidth: 890,
                                width: "100%",
                                margin: "0 auto",
                                marginTop: 80,
                                display: "flex",
                                justifyContent: "center",
                            }}
                        >
                            <Route exact path="/">
                                <Home userObj={userObj} />
                            </Route>
                            <Route exact path="/profile">
                                <Profile userObj={userObj} refreshUser={refreshUser} />
                            </Route>
                        </div>
                    ) : (
                        <>
                            <Route exact path="/">
                                <Auth />
                            </Route>
                        </>
                    )
                }
            </Switch>
        </Router>);
}

 

After

const AppRouter = ({ isLoggedIn, userObj, refreshUser }) => {

    return (
        <Router>
            {isLoggedIn && <Navigator userName={userObj.displayName} />}
            <Switch>
                <>
                    {
                        isLoggedIn ? (
                            <div
                                style={{
                                    maxWidth: 890,
                                    width: "100%",
                                    margin: "0 auto",
                                    marginTop: 80,
                                    display: "flex",
                                    justifyContent: "center",
                                }}
                            >
                                <Route exact path="/">
                                    <Home userObj={userObj} />
                                </Route>
                                <Route exact path="/profile">
                                    <Profile userObj={userObj} refreshUser={refreshUser} />
                                </Route>
                            </div>
                        ) : (
                            <>
                                <Route exact path="/">
                                    <Auth />
                                </Route>
                            </>
                        )
                    }
                </>
            </Switch>
        </Router>);
}

export default AppRouter;