Quiz - CSR/SSR, 제어/비제어 컴포넌트, 명령형/선언형 프로그래밍

1. CSR과 SSR의 차이점은 무엇인가요?

• CSR는 Client Side Rendering의 줄임말로 클라이언트에서 페이지를 렌더링하는 것을 말합니다. 서버에 페이지에 필요한 데이터만 요청하므로 새로고침이 발생하지 않고, 요청받은 데이터를 바탕으로 클라이언트에서 페이지를 렌더링합니다.
• SSR은 Server Side Rendering의 줄임말로 서버에서 페이지를 렌더링하는 방식을 말합니다. 서버에 페이지를 요청하여 새로고침이 발생하고, 서버에서 페이지를 렌더링한 후 클라이언트에게 보내줍니다.

1.1 CSR과 SSR의 장담점에 대해 설명해주세요.

• CSR의 장점은 사용자의 행동에 따라 서버로부터 필요한 데이터만 요청하기 때문에 서버의 트래픽이 감소하고 사용자와 빠른 상호작용을 할 수 있다는 것입니다.
• CSR의 단점은 초기 구동 속도가 비교적 느리고, SEO가 어렵다는 것입니다.
• SSR의 장점은 SEO가 가능하고 초기 구동 속도가 빠르다는 것입니다.
• SSR의 단점은 서버에 페이지를 요청할 때마다 새로고침이 발생하고 서버와의 잦은 응답으로 인해 서버에 부담을 줄 수 있다는 것입니다.

2. 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요.

• 부모와 자식 컴포넌트 기준으로 설명하면 부모 컴포넌트로부터 props를 전달받아 제어되는 컴포넌트를 제어 컴포넌트라고 하고, 부모 컴포넌트에게 props를 전달받지 않고 자식 컴포넌트 내부에서 상태를 선언해서 사용하는 컴포넌트를 비제어 컴포넌트라고 합니다.
• 또한 넓은 범위에서는 props나 state를 통해서 React에서 제어 받는 컴포넌트를 제어 컴포넌트라고 하고, React에서 제어 받지 않고 Ref를 사용하여 간접적으로 값에 접근해서 사용하는 컴포넌트를 비제어 컴포넌트라고 합니다.

3. 명령형 프로그래밍과 선언형 프로그래밍의 차이에 대해 설명해주세요.

• 명령형 프로그래밍은 프로그램이 어떻게 실행되는지에 중점을 둔 패러다임이고, 선언형 프로그래밍은 프로그램이 무엇을 하길 원하는지에 중점을 둔 패러다임입니다.
• 명령형 프로그래밍은 코드의 실행에 대해 단계별 과정을 묘사하기 때문에 코드가 많고 복잡해보여서 가독성이 떨어집니다.
• 반면에 선언형 프로그래밍은 단계별 과정 묘사 없이 원하는 결과를 묘사하므로 코드가 적고 덜 복잡해보여서 가독성이 좋습니다.

3.1 React와 Vanilla JavaScript의 차이에 대해 설명해주세요.

• Vanilla JavaScript는 명령형 방식으로 코드를 짜는 반면에, React는 선언형 방식으로 컴포넌트를 개발합니다.
• 따라서 React 개발자는 컴포넌트를 렌더링할 때마다 DOM을 어떻게 조작할지에 대해 신경 쓸 필요 없이, 특정 상태에 대한 최종 UI 결과물을 선언해서 React Element의 형태로 React에 전달하고, 이를 DOM에 반영하는 것은 React의 책임으로 넘기게 됩니다.