Quiz - key props, CSR/SSR, CSS in JS
1. key props를 사용하는 이유에 대해 설명해주세요.
- 배열에서 요소를 다른 형제 요소들과 구분짓기 위해 key props를 사용합니다.
1.1 key props의 규칙에 대해 설명해주세요.
- key는 형제 요소들 사이에서 고유해야 합니다.
- 다른 배열의 요소에 같은 key를 사용해도 됩니다.
- key는 바뀌지 않아야 합니다.
- 렌더링하는 동안 key를 생성해서는 안됩니다.
1.2 key props의 값으로 index를 사용하면 안되는 이유에 대해 설명해주세요.
- 요소의 key props 값으로 index를 사용하면, 요소가 삽입, 삭제되거나, 배열이 재정렬될 때 요소의 순서가 비뀌기 때문에 혼란스러운 버그를 발생시킬 수 있습니다.
1.3 key props의 값으로 Math.random() 메서드를 사용하면 안되는 이유에 대해 설명해주세요.
- 요소의 key props의 값으로 Math.random() 메서드를 사용하면, 렌더링 사이에 key 값이 절대로 일치하지 않게 됩니다. 이는 리렌더링할 때마다 모든 컴포넌트와 DOM이 재생성되게 만들어서 느려집니다. 또한 배열의 요소에 담긴 입력값이 사라집니다.
2. CSR과 SSR에 대해 설명해주세요.
- CSR은 Client Side Rendering을 말하고, SSR은 Server Side Rendering을 말합니다.
- CSR은 Client Side Rendering으로 클라이언트에서 페이지를 렌더링하는 방식을 말합니다. 첫 시작에만 서버에서 전체 페이지를 로딩하여 보여주고, 그 이후부터는 사용자의 요청이 들어올 때 필요한 데이터를 서버에 요청하여 클라이언트에서 페이지를 렌더링해줍니다.
- SSR은 Server Side Rendering으로 서버에서 페이지를 렌더링하는 방식을 말합니다. 사용자가 웹 페이지에 접근할 때, 서버에 페이지에 대한 요청을 하면, 서버에서 페이지를 렌더링해서 클라이언트에게 보내줍니다. 웹 서버에 페이지를 요청할 때마다 클라이언트에서 새로고침이 발생합니다.
2.1 CSR과 SSR은 각각 어떤 상황에서 사용하면 좋을까요?
- CSR은 페이지에서 사용자와의 상호작용이 많거나 에니메이션이나 트렌지션 등 인터렉티브한 요소가 많은 상황에서 사용하면 좋습니다.
- SSR은 페이지에서 사용자와의 상호작용이 덜하고 SEO가 중요한 상황에서 사용하면 좋습니다.
2.2 CSR과 SSR의 장단점에 대해 설명해주세요.
- CSR은 사용자의 행동에 따라 서버로부터 필요한 데이터만 요청하기 때문에 서버의 트래픽이 감소하고 사용자와 빠른 상호작용을 할 수 있다는 장점이 있습니다. 그러나 CSR은 초기 구동 속도가 비교적 느리고, SEO가 어렵다는 단점이 있습니다.
- SSR은 SEO가 가능하고, 초기 로딩 속도가 빠르다는 장점이 있습니다. 하지만 SSR은 서버에 페이지를 요청할 때마다 새로고침이 발생하고, 서버와의 잦은 응답으로 인해 서버에 부담을 줄 수 있있다는 단점이 있습니다.
3. CSS in JS의 장점과 단점에 대해 설맹해주세요.
- CSS in JS의 장점에 대해 설명하면, 컴퍼넌트와 CSS가 동일한 파일에 존재하므로 수정하고 삭제하기 편합니다. 그리고 컴포넌트의 상태를 공유할 수 있습니다.
- CSS in JS의 단점에 대해 설명하면, 별도의 라이브러리를 설치해야 하므로 번들의 크기가 커집니다. 페이지 렌더링 시 JavaScript 파일을 CSS 파일로 변환해야하기 때문에 렌더링 속도가 비교적 느립니다. 특히 인터렉션 페이지의 경우 순수한 CSS에 비해 성능이 느립니다.
참고
