본문 바로가기

useEffect

(2)
react에서 게시글 생성 실시간 적용하기 현재 진행중인 프로젝트에서 채팅방을 생성한 뒤 지금 생성되어 있는 채팅방 리스트를 확인하는 기능을 구현해야 했다. 나는 아래와 같이 modal창을 이용해서 채팅방을 생성하도록 설정하였기 때문에 채팅방 생성 후 따로 라우팅을 시키지 않는 상태였다. 그래서 채팅방을 생성한 뒤에 별도로 리렌더링해주지 않는 한 아래와 같이 생성된 채팅방을 확인할 수 없었다. 나는 채팅방 정보를 useEffect를 이용해 받아오고 있었기 때문에 아래와 같이 rerender라는 state를 이용해 useEffect가 실행되는 트리거를 만들어 페이지를 리렌더링 해주었다. (참고로 리액트로 만든 SPA는 state가 변경되면 페이지가 리렌더링 된다.) useEffect(() => { axios .get("http://localhost..
React Hook useEffect has a missing dependency 오류 해결하기 리액트 앱을 실행했는데 갑자기 이런 오류가 발생했다. 이게 뭔데... 검색해보니 useEffect에서 데이터를 렌더링 하는데 그 데이터가 useEffect 외부에 존재할 경우 발생한단다. 사실 뭔 말인지 잘 모르겠다... 사실 오류 메시지도 아니고 경고 메시지라서 리액트 앱 실행에는 큰 문제가 없기 때문에 개발과정에서는 신경 안써도 되지만 그래도 문제가 생겼으면 해결은 해봐야지 싶어서 이것저것 시도해봤다. 그 중에서 제일 효과적이었던 방법이 eslint를 무시하도록 코드를 작성하는 것이었다. 리액트는 친절해서 어떤 파일의 몇번째 줄에서 문제가 발생했는지 다 알려준다. 위 이미지에서는 musiccontroller.js 파일의 38번째 줄에서 문제가 생겼다고 알려줬다. 그럼 우리는 37번째 줄에 아래 코드를..