React 기술면접 2주차(1)

9. React.Suspense에 대해 설명해주세요.
   • 답변)
     • 의도: 비동기 데이터 로딩 및 렌더링 과정을 이해하고 Suspense를 사용할 수 있는지 확인하는 질문
     • 모범 답안: 네 리액트의 Suspense는 비동기 데이터를 로딩할 때, 그리고 로딩 상태를 표시할 때 사용하면 좋은 선언형 코드의 일종입니다. Suspense에는 fallback 속성을 줄 수 있는데 이 속성이 바로 로딩 상태일 때 화면에 보여줄 요소가 됩니다.
       선언형 코드이니만큼 기존에는 로딩 상태 표시를 위해 isLoading으로 상태를 관리해 로딩 화면을 조건부 렌더링을 해주었다면, 이제는 태그에 속성을 주는 것만으로 간결하게 구현할 수 있다는 장점을 가지고 있습니다. 다만 주의할 점은 특정 비동기 데이터 호출 라이브러리만 Suspense를 지원하기 때문에 잘 알아보고 적용해야 합니다.

---

10. 리액트의 상태가 불변성을 유지하는 이유는 무엇일까요?
    • 답변)
      • 의도: 무의식적으로 사용하고 있던 개념에 대해 확인하는 질문
      • 모범 답안: 네 리액트는 불변성을 유지하도록 설계되었습니다. 그래서 잘 아시다시피 상태를 변경하려면 직접 변경하는 것이 아니라, 새로운 객체를 만들어서 할당해주어야 합니다. 이러한 불변성을 유지하는 것에는 여러 이유가 있는데 그중 대표적으로 불변성 덕분에 리액트는 상태가 언제 어떻게 변경되었는지 추적하기가 쉬워집니다.
        만약 직접 변경한다면 무엇이 언제 어떻게 변경되었는지 추적하기 쉽지 않을 것입니다. 리덕스나 리액트의 개발자 도구를 보면 상태가 어떻게 변화되었는지 찾아보는 게 굉장히 유용한데, 이게 다 불변성 덕분입니다.
        다만 불변성을 유지하는 게 개발자 입장에서는 어려울 수도 있는 일이라 immer 같은 라이브러리를 이용해 대신 불변성을 유지할 수 있도록 위임하는 일도 가끔 있습니다. 오히려 리덕스 툴킷에는 내장되어 있는 기능이기도 하니 불변성을 유지하다보니 코드가 어지러워진다고 생각하면 도입을 적극 고려해야 한다고 생각합니다.

---

11. 리액트의 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요.
    • 답변)
      • 의도: 리액트에 폼을 어떻게 다루었는지 확인하는 질문
      • 모범 답안: 네, 저는 리액트에서 폼을 다룰 때 제어 컴포넌트와 비제어 컴포넌트에 대해 익혔습니다. 리액트에서 폼을 다루는 방법에는 크게 두 가지가 있습니다. 바로 제어 컴포넌트와 비제어 컴포넌트 방식입니다.
        간단히 설명하자면 제어 컴포넌트는 폼의 데이터를 매번 상태에 저장해 관리하는 방식입니다. 말 그대로 onChange 이벤트를 통해 모든 입력 값을 제어하고 있는 것입니다. 그에 비해 비제어 컴포넌트는 폼의 데이터를 상태에 저장하지 않고, onSubmit 이벤트 같은 폼의 제출 때만 입력 값을 확인합니다. 제어 컴포넌트의 특징은 모든 데이터를 입력마다 제어할 수 있다는 것이고, 그 대신에 코드가 좀 길어질 수 있다는 점입니다.
        반대로 비제어 컴포넌트의 특징은 제출 시에만 입력 값의 검증 등을 실행할 수 있는 대신 코드가 단순해진다는 점이 있습니다.

🤹 스탠다드반 - 제어 컴포넌트, 비제어 컴포넌트

---

12. flux 아키텍처를 설명해주세요.
    • 답변)
      • 의도: 리덕스에서 쓰였던 flux 아키텍처의 작동 방식을 알고 있는지 확인하는 질문
      • 팁: 마치 리덕스를 쓸 때처럼 순서대로 얘기하면 좋습니다.
      • 모범 답안: 네 flux 아키텍처는 단방향 데이터 흐름을 기반으로하는 아키텍처입니다. 이러한 flux 아키텍처는 불변성 개념을 탑재하여 디버깅에 용이하다는 장점이 있습니다.
        flux 아키텍처의 흐름을 순서대로 말씀드리겠습니다. 우선 유저는 View에서 Action을 Dispatch합니다. 그리고 Dispatch된 Action은 곧 Store로 전달됩니다. Store는 Reducer를 사용하여 Action을 판별하고 상태를 업데이트합니다. 그리고 상태가 업데이트 되면 Observing하고 있던 모든 View에게 내용을 알립니다. 마지막으로 View는 업데이트된 내용을 기반으로 리렌더링합니다. 확실히 과정이 좀 복잡하긴 해도 리덕스, Zustand 등 인기가 많은 전역 상태 관리 라이브러리에서 채택하고 있는 아키텍처인만큼 유용한 건 확실하다고 생각합니다.

---

13. 리액트의 Strict 모드는 왜 필요할까요?
    • 답변)
      • 의도: 개발 환경에 따른 모드에 대해 알고 있는지 확인하는 질문
      • 모범 답안: 마치 ESLint가 필요한 이유와 같습니다. 우리는 사람이고 누구든지 완벽할 수는 없습니다. 그래서 linter가 안티 패턴을 잡아주는 것이구요. 비슷하게 Strict 모드도 개발 과정에서 발생할 수 있는 잠재적인 문제를 해결하는 데에 도움을 주는 도구입니다. 예를 든다면 잘못된 훅 사용이나 props 전달 등에 대해 경고를 줘서 해결할 수 있도록 돕습니다.
        그중 대표적으로는 useEffect의 마운트가 2번 실행되는 효과가 있습니다. 마운트-언마운트-마운트의 과정을 거쳐서 개발자가 직접 수동으로 언마운트 해주지 않고도 언마운트를 테스트할 수 있도록 도와줍니다. 가끔 빠른 개발에 방해된다고 Strict 모드를 끄고 개발하시는 분도 계시지만... 저는 얻는 장점이 더 많다고 생각하여 항상 켜고 사용하고 있습니다.

---

14. SPA에 대해 설명해주세요.
    • 답변)
      • 의도: 최근 프론트엔드 패러다임인 Single Page Application에 대해 알고 있는지 확인하는 질문
      • 팁: 장단점을 명확하게 제시하면 좋습니다.
      • 모범 답안: 네, SPA는 Single Page Application의 약자로서 리액트나 뷰의 기반이 되는 기술입니다. 이 SPA를 사용한다면 여러 장단점이 있는데요. 우선 장점부터 말씀드리겠습니다. 기존에 MPA를 사용하면 페이지를 이동할 때마다 새로 고침이 계속 일어났는데, SPA를 사용하면 이런 일이 없습니다. 라우터로 페이지를 이동하기는 하지만 사실 내부적으로는 MPA의 개념처럼 페이지를 이동하는 게 아니기 때문입니다. 그저 URL을 바꿔주고, 그 URL에 따라 화면의 컴포넌트를 바꿔치기 해주는 것으로 새로 고침 없이 새로운 화면을 볼 수 있게 해주는 것이 큰 장점입니다.
        이외에 클라이언트 사이드 렌더링을 사용하여 서버의 부담을 줄이고 빠른 화면 전환 등 로딩 속도를 개선할 수 있습니다. 다만 대표적인 단점으로는 SEO에 취약하다는 점과 초기 로딩이 느리다는 점이 있습니다. 그래서 요즘은 SPA 기반 앱에서 SSR과 CSR을 모두 혼합하여 장점만 가져와 사용할 수 있는 Next.js 프레임워크가 인기있는 편입니다.