React Quiz - React Rendering Opimization, CSS in JS, React 18, CSR, Next.js, React Form, Redux

1. 리액트 관련 패키지 중에 제일 좋다고 생각한 것은 무엇인가요?

• react-router-dom 패키지입니다.
  • router를 객체 형태로 손쉽게 구현할 수 있고, NavLink를 통해 Link가 활성화 상태의 스타일을 줄 수 있으며, useNavigate를 통해 다른 페이지로 이동할 수 있고, useLocation, useSearchParam를 사용하여 현재 URL에 대한 정보를 얻을 수 있습니다.

2. 리액트의 렌더링 성능 향상을 위해 어떻게 해야 하나요?

• 비싼 연산의 경우 useMemo를 사용하여 메모이제이션하고, 자식 컴포넌트에 함수 정의를 props로 전달할 때는 useCallback을 사용하여 메모이제이션합니다.
• 또한 데이터를 갖고 있는 컴포넌트와 데이터가 필요한 컴포넌트가 멀리 있을 때는 context API를 사용합니다.
  • contenxt API를 사용할 때, 자주 변하는 상태와 자주 변하지 않는 상태를 나눠서 저장합니다.
  • 데이터를 갖고 있는 컴포넌트와 데이터가 필요한 컴포넌트 사이 depth가 3 이상일 때는 전역 상태 관리 라이브러리 (jotai, zustand)를 사용합니다.

3. CSS in JS를 사용해 본 적이 있나요? 있다면 소감을 말해주세요.

• Styled-components를 사용해봤습니다.
  • Styled-components의 장점은 다음과 같습니다.
    • 컴포넌트 파일 내에 CSS를 정의할 수 있기 때문에, 컴포넌트의 상태와 변수를 공유할 수 있어서 편리했습니다.
    • global theme을 적용하여 ThemeProvider 하위의 컴포넌트들이 공통적인 CSS 스타일을 사용할 수 있습니다.
  • Styled-components의 단점은 다음과 같습니다.
    • 컴포넌트에 CSS를 적용하기 위해 styled를 사용한 래퍼 컴포넌트를 감싸주어야 합니다. 래퍼 컴포넌트로 인해 한 Depth가 더 생기므로 가독성이 떨어지고, 래퍼 컴포넌트의 이름을 지어주는 것이 번거로웠습니다.
    • JS 코드를 읽어서 CSS로 변환하는 것이기 때문에 순수한 CSS보다는 렌더링 속도가 비교적 느립니다.

4. React 18 버전 업데이트 내용에 대해 말씀해주세요.

• React 18 버젼부터 상태 업데이트에 대한 자동 배칭을 지원합니다.
  • React 18 버전 이전에는 이벤트 핸들러 내부에서 발생하는 상태 업데이트만 배치 처리를 지원한 반면에, React 18 버전부터는 상태 업데이트를 하나로 통합하여 배치처리한 후에 리렌더링합니다.
• 또한, React 18 버젼부터 동시성 기능을 지원합니다.
  • useTransition 훅을 사용하여 상태 업데이트에 대한 우선순위를 설정할 수 있습니다.
• React 18 버젼부터 Server Component가 도입되었습니다.
  • Server Component는 브라우저가 받아오는 용량을 줄이기 위해 서버에서 실행되는 컴포넌트입니다.
• React 18 버젼에는 새로운 훅으로 useId, useSyncExternalStore, useDeferredValue 등이 등장했습니다.
  • useId 훅은 난수 ID를 생성합니다.
  • useSyncExternalStore 훅은 동시성 기능을 사용할 때 전역 상태 관리 라이브러리의 상태가 업데이트 되지 않을 경우 강제로 업데이트를 발생시킵니다.
  • useDeferredValue 훅은 일부 UI의 리렌더링을 지연할 수 있습니다.

5. Client Side Routing에 대해 설명해주세요.

• Client Side Routing은 페이지의 JavaScript에 의해서 처리됩니다. 사용자가 링크를 클릭할 때마다 URL 표시줄이 변경되고 페이지에 다른 뷰가 렌더링됩니다. 이러한 SPA는 전체 페이지를 새로 고치지 않기 때문에 사용자에게 부드러운 UI/UX를 제공합니다.

5.1 client side routing의 장단점에 대해 설명해주세요.

• client side routing의 장점
  • 렌더링되는 데이터의 양이 비교적 적기 때문에 구성요소간 라우팅 속도가 빠릅니다.
  • 애니메이션과 transition은 서로 다른 컴포넌트 간 전환에서 쉽게 구현할 수 있습니다.
• client side routing의 단점
  • 초기 로딩시 모든 route, 컴포넌트, HTML을 한번에 로딩해야하므로 초기 로딩시간이 깁니다.
  • SEO 사용이 어려울 수 있습니다.

6. Next.js 를 사용해보셨나요?

• 안 사용해봤습니다. Next.js는 풀스택 웹 애플리케이션을 만들어주는 React Framework입니다. Next.js에서 CSR, SSG, SSR을 할 수 있습니다. getServerSideProp를 사용하여 SSR을 할 수 있고, getStaticProps를 사용하여 SSG를 할 수 있습니다.

7. React에서 Form 이벤트는 어떻게 제어하셨나요?

• input, select, text area는 제어 컴포넌트로 value props 값을 통해서 제어합니다.
• 유효성 검사가 필요하지 않은 폼의 경우, value로 제어하는 대신 ref를 통해서 값을 간접적으로 접근하여 최종 입력값을 얻습니다.
• form에 onChange나 onSubmit 이벤트에 이벤트 핸들러를 등록하여 이벤트를 처리합니다.

7.1 React Hook Form 를 사용해보셨나요?

• 안 사용해봤습니다.

8. React에서 컴포넌트 A가 사용하는 CSS파일과 컴포넌트 B가 사용하는 CSS파일의 선택자가 겹치는 이유가 뭘까?

• React에서 컴포넌트에 적용된 CSS 스타일은 일반적으로 CSS 모듈과 유사한 접근 방식을 사용하여 컴포넌트 자체로 범위가 지정됩니다. 그러므로 한 컴포넌트에서 정의된 스타일이 의도치 않게 다른 컴포넌트에 영향을 주지 않습니다.

9. Redux에 대해 설명해주세요.

• Redux는 JavaScript 애플리케이션을 위한 예측 가능한 상태 컨테이너입니다. 앱의 상태와 로직을 중앙화하여 실행 취소, 다시 실행, 영속적인 상태 등의 강력한 기능을 사용할 수 있습니다. Redux DevTools를 사용하여 앱의 상태가 언제, 어디서, 왜, 어떻게 바뀌었는지 쉽게 추적할 수 있습니다.

9.1 Redux를 사용하는 이유에 대해 설명해주세요.

• 사용해보지는 않았지만, 계속해서 바뀌는 상당한 양의 데이터가 있고, 상태를 업데이트하는 로직이 복잡할 때, 상태가 업데이트되는 시점을 관찰할 필요가 있을 때 사용할 것 같습니다.

9.2 Redux의 장단점에 대해 설명해주세요.

• 장점
  • 데이터가 단방향으로 흐르므로 버그를 예측하기 쉽습니다.
  • 상태를 한 곳에서 관리해서 전역 상태를 관리할 때 굉장히 효과적입니다.
• 단점
  • 보일러플레이트가 많습니다.
  • 코드 작성이 초기에 복잡합니다.

9.3 Flux 패턴에 대해 설명해주세요.

• flux 패턴은 사용자의 입력을 기반으로 action을 만들고 action을 dispatcher에 전달하여 store의 데이터를 변경한 뒤 view에 반영하는 단방향의 데이터 흐름을 가진 소프트웨어 아키텍쳐입니다.

9.4 Context API와 Redux를 비교해주세요.

• Context API와 Redux 둘 다 전역 상태 관리를 위한 도구이지만, redux는 앱의 상태와 로직을 중앙화하여 실행 취소, 다시 실행, 영속적인 상태 등의 강력한 기능을 사용할 수 있습니다. 또한 Redux DevTools를 사용하여 앱의 상태가 언제, 어디서, 왜, 어떻게 바뀌었는지 쉽게 추적할 수 있습니다.
• 이러한 이유로 단순한 전역 상태를 관리할 때는 Context API로도 충분하지만, 복잡하고 빈번히 바뀌는 전역 상태를 관리할 때는 Redux가 더 좋습니다.

9.5 Redux의 3대 원칙에 대해 설명해주세요.

1. 하나의 애플리케이션 안에 하나의 스토어만 사용하자.
2. 상태를 변화시키는 방법은 오직 액션을 일으키는 것이다.
3. 변화를 일으키는 reducer 함수는 순수함수이어야 한다.