에러는 아니지만 Warning 으로 떠서 원인을 찾으려고 메시지를 읽고 찾아내려니 상당히 불친절한 안내로 원인을 사실 찾기 힘들다.
그래서 검색도 해보고 내가 작업한 내용을 역학조사를 해봤다.
대부분 검색 내용들은 라우터 역할을 한 곳에서 수정하라고 한다. (링크)
<Route path="/movies/list" exact element={ MoviesList } /> //위 코드 대신 아래 코드 방식으로 수정하라고 한다. <Route path="/movies/list" exact element={ <MoviesList/> } />
하지만 나는 props를 넘겨줘야 하는 구조의 엘리먼트로 저 방식이 안될 뿐더러 갑자기 왜 저것이 문제이지? 하면서 내가 작업한 것들을 되짚어 봤다.
원인은 Swipeable 엘리먼트를 사용하는데 속성으로 하위 엘리먼트를 불러오는 부분 변경에서 문제가 되었다.
//원래 코드 const LeftEmpty = () =>( <View style={{width: 0}}/> ); <Swipeable renderRightActions={ LeftEmpty } > ... //변경한 코드 const LeftEmpty = () =>( <View style={{width: 0}}/> ); <Swipeable renderRightActions={ () => LeftEmpty } > ...
함수로 호출하는 방식으로 변경했을 때 컴포넌트가 아니라 변수로 되어 있어서 문제였던 것이다. 위 예제는 오류를 보여주기 위해 예시로 작성한 것이고 실제로는 함수로 바꿔야만 하는 코드였다.
결론은 아래처럼 수정해주니 정상 작동되었다.
const LeftEmpty = () =>( <View style={{width: 0}}/> ); <Swipeable renderRightActions={ () => <LeftEmpty/> } > ...
이 주의 메시지는 종종 나타나는 데 진짜 다양한 케이스에서 나타나서 사례가 생길 때마다 업데이트 하려고 한다.