[TIL] FE 면접후기2 실무 중심 질문 + react strictMode?

실제 업무를 겪으면서 FE개발자가 해결해야할 보안적 이슈(권한이 없는 사용자, 웹 스토리지), 비동기 처리, JWT 토큰 refreshtoken의 특징, API 요청이 여러 개 갔을 때(비동기 처리의 연장선) 그리고 무한 스크롤 페이징 처리 시 DOM의 최적화 등 해결방법에 대해 FE개발자님과 얘기를 나눴습니다. 외에도 최근에 관심있는 툴이나 제가 개인적으로 궁금했던 점을 여쭤볼 수 있었는데요. 개인적으로 이런 기회가 쉽게 있지않아 저에게는 값진 시간이었습니다. 아 또한, Next에 대해서도 여러가지 견해를 들을 수 있었습니다. 예를 들어 Next가 제공하는 이미지 최적화가 정말 효율적인가에 대해서 얘기하였는데 제공하는 기능을 그냥 갖다쓰는 것이 아니라 어떤 방법이 베스트인가부터 비교하면서 잘 생각하고 기능을 사용해야겠더라구요. 

 

면접이 끝나고 바로 단톡에 면접 질문과 제가 답한 것과 제시해주신 답변을 최대한 많이 공유하려고 했습니다. 지식을 공유하면서 제가 한 번 더 생각할 수 있고 일종의 메모장 역할을 하기 때문입니다. 가장 좋았던 점을 꼽자면 의문을 가지지않고 마냥 적용했던 기능이나 행위에 대해서 한 번 더 생각해볼 수 있다는 것인데요.

예시로 간단히 리액트에서 strict mode 는 콘솔을 두 번 출력하니 디버깅 시 불편하므로 두 번 실행시키는 strict mode는 App.js에서 지워버리거나 주석처리하는 행동을 매번하면서도 왜 "두 번 실행시킬까?" 에 대해서는 큰 의문을 갖지않고 썼었습니다. 마음 속으로 단순히 "뭐 두 번 체크하니까 더 안전하겠지" 이런 생각을 가지고 안일하게 사용했던 거 같네요. 

---

리액트 공홈에만 가도 왜 strict mode를 지원하고 이 기능이 어떤 것을 방지하는 지 그 필요성에 대해서 알 수 있습니다. 

예상치 못한 부작용 검사

React는 두 단계로 동작한다. 

• 렌더링 단계는 특정 환경(e.g DOM과 같이)에 어떤 변화가 필요한 지 결정하는 단계이다. 이 과정에서 React는 render를 호출하여 이전 렌더와 결과값을 비교한다.
• 커밋 단계는 React가 변경 사항을 반영하는 단계이다.(React DOM의 경우 React가 DOM 노드를 추가, 변경 및 제거하는 단계를 말한다.) 이 단계에서 React는 componentDidMount나 componentDidUpdate 와 같은 생명주기 메서드를 호출한다. 

커밋 단계는 일반적으로 매우 빠르지만, 렌더링 단계는 느릴 수 있다. 이로 인해, 곧 추가될 concurrent 모드(기본적으로는 비활성화됨)는 렌더링 작업을 더 작은 단위로 나누고, 작업을 중지했다 재개하는 방식으로 브라우저가 멈추는 것을 피한다. 즉, React는 커밋하기 전에 렌더링 단계의 생명주기 메서드를 여러 번 호출하거나 아예 커밋하지 않을 수도(에러 혹은 우선순위에 따른 작업 중단) 있다.

 

렌더링 단계 생명주기 메서드는 클래스 컴포넌트의 메서드를 포함해 다음과 같다. 

• onstructor
• componentWillMount (or UNSAFE_componentWillMount)
• componentWillReceiveProps (or UNSAFE_componentWillReceiveProps)
• componentWillUpdate (or UNSAFE_componentWillUpdate)
• getDerivedStateFromProps
• shouldComponentUpdate
• render
• setState 업데이트 함수 (첫 번째 인자)

위 메서드들은 여러 번 호출될 수 있기 때문에, 부작용을 포함하지 않는 것이 중요하다. 이 규칙을 무시할 경우, 메모리 누수 혹은 잘못된 어플리케이션 상태 등 다양한 문제를 일으킬 가능성이 있다. 불행히, 보통 이런 문제들은 예측한 대로 동작하지 않기때문에 발견하는 것이 어려울 수 있다.

 

Strict 모드는 자동으로 부작용을 찾아주는 것은 아니지만 조금 더 예측할 수 있게끔 만들어 문제가 되는 부분을 발견할 수 있게 도와준다. -> 아래의 함수를 의도적으로 이중으로 호출하여 찾는다. 

• 클래스 컴포넌트의 constructor, render 그리고 shouldComponentUpdate 메서드
• 클래스 컴포넌트의 getDerivedStateFromProps static 메서드
• 함수 컴포넌트 바디
• State updater 함수 (setState의 첫 번째 인자)
• useState, useMemo 그리고 useReducer에 전달되는 함수

🔥Strict 모드는 개발 모드에서만 적용되며 생명주기 메서드들은 프로덕션 모드에서 이중으로 호출되지 않음

🐱‍👤사용하는 리액트의 버전에 따라 Strict Mode의 log출력이 다를 수 있습니다! 

리액트 17버전부터 자동적으로 라이프사이클 함수에서 두번째 호출되는 콘솔 메서드(e.g. console.log())의 내역이 안보인다고 되어있네요. 하지만 이렇게되면 우리가 원하는 동작이 아닐수도 있습니다. 

리액트 18버전부터는 아무런 logs를 제한하지않습니다. 만일 React DevTools를 설치한 상태라면 두번째 호출로 오는 log를 흐릿하게(연그레이) 구분하여 확인할 수 있기 때문에 좋습니다. 혹은 DevTools의 세팅을 통해 해당 로그를 아예 지워버릴 수도 있습니다. 기본값은 off로 되어있으니 on으로 설정을 키면 로그가 아예 안보이게 할 수 있겠지요.

StrictMode is a React Developer Tool primarily used for highlighting possible problems in a web application. It activates additional deprecation checks and warnings for its child components.