React Quiz - Component, setState

1. 본인이 생각하는 좋은 컴포넌트란 어떤 것인가요? 최근에 작성한 컴포넌트 중에서 좋은 컴포넌트라고 생각될 만한게 있나요? 어떤 이유로 그렇게 생각하시나요?

• 제가 생각하는 좋은 컴포넌트는 하나의 책임을 가지고 있으면서 재사용하기 쉽도록 비지니스 관련 로직을 props로 받는 컴포넌트입니다.

  • 그 이유는 하나의 책임을 가지고 있기 때문에 유지 보수하기 쉽고, 비지니스 관련 로직을 외부에서 받기 때문에 재사용하기 쉬워서입니다.

• 최근 작성한 좋은 컴포넌트로는 로그아웃 및 회원 탈퇴 버튼 UI인 DimmedButton, ProfileImage가 있습니다.

  • DimmedButton을 재사용하기 쉽게 하기 위해서 버튼의 이름과 핸들러 함수를 props로 받아서 사용했습니다.
  • ProfileImage를 여러 곳에서 사용하기 편리하게 하기 위해서 자체적으로 준 margin 값을 삭제하고, ProfileImage를 감싸는 wrapper 컴포넌트에서 margin 및 padding 값을 주었습니다.

2. React를 쓰면서 어떤 부분이 제일 좋다고 느끼셨나요? 다른 프레임워크와 비교해서 React가 가지는 장점에 대해서 한번 설명해주세요.

• React는 화면을 컴포넌트 단위로 나눠서 구성하므로 기능별로 컴포넌트를 나눠서 관리하기 쉽고 재사용성이 높다는 점이 좋았습니다.

  • 또한 컴포넌트 내부에서 상태 관련 hook을 사용하여 상태를 정의하면 상태가 변했을 때 React에서 알아서 컴포넌트를 리렌더링 해줘서 편리했습니다.

• React와 Vanila JavaScript와 비교했을 때, React는 DOM에 변경 내용을 적용할 때 Virtual DOM을 사용하여 DOM 연산을 최소화한다는 장점이 있습니다.

  • 또한 React는 비슷한 문법인 React Native를 사용하여 앱 개발도 할 수 있다는 장점이 있습니다.

• React와 Vue와 비교했을 때, React는 Vue보다 자유도가 높기 때문에 개발자가 원하는 방식으로 코드를 짤 수 있습니다.

  • 예를 들어서 react에서는 용도에 따라 Redux, Zustand, Jotai 등 다양한 상태 관련 라이브러리를 사용해서 개발할 수 있지만, vue에서는 프레임워크기 때문에 상태 관련 라이브러리로 VueX를 사용하도록 정해져 있습니다.

3. setState는 동기일까요? 비동기일까요? setState가 적용되는 동작방식에 대해서 아는대로 한번 설명해주세요.

• setState는 비동기 방식으로 실행됩니다.
• React에서 setState는 batch 방식으로 동작합니다.
  • React는 setState가 처리되기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다립니다.
  • setState에 함수가 들어갈 경우 큐에 들어가서 다음 렌더링이 실행될 때까지 대기합니다.
  • 이벤트 핸들러의 모든 코드가 실행된 후 큐에 들어간 함수가 순차적으로 실행됩니다.
  • 함수는 실행된 시점의 상태를 참조합니다.