useEffect로 router 진입 막는 것 질문입니다.

Question

강의를 보고 개인적으로 프로젝트를 진행중입니다.  navigation guard(vue에서는 이렇게 부르던데 리액트는 잘모르겠네요) 로직을 작성하기 위해 아래의 첫번째 부분과 같이 작성했습니다. url 진입시, me에 대한 정보가 없기때문에 처음 화면으로 돌려줘야하는데 첫번째와 같이 작성하니 me.id를 찾을 수 없다고 error를 내더라구요. 그런데 두번째 코드와 같이 작성하니 문제가 없어졌습니다.  이게 연산자 우선순위 때문에 발생하는 것인가요?  mdn 문서를 보니 '!' 연산자가 && 연산자보다 우선하는데, 이 문제인가요? 정확히 답을 알고 싶습니다 ㅠ  useEffect(() => { console.log('repo me', me); if (!me && !me.id)) { Router.replace('/'); } }, [me]); useEffect(() => { console.log('repo me', me); if (!(me && me.id)) { Router.replace('/'); } }, [me]);

비오 · Answer

아.. 그렇네요. 제가 너무 인간의 사고 방식으로 생각을 했네요 ㅋㅋ 감사합니다.

제로초(조현영) · Answer

!(me && me.id)는 !me || !me.id와 같습니다. 드모르간의 법칙입니다. &&와 ||의 차이 때문에 다릅니다. !me && !me.id를 하게 되면 me가 존재하지 않을 시 !me가 true가 되어 !me.id까지 검사합니다. 그런데 me가 존재하지 않으므로 me.id는 에러를 뿜게 됩니다.