React Quiz - useState, useLayoutEffect, SPA, SEO
1. useState의 set 함수는 동기적으로 동작하나요? 비동기적으로 동작하나요?
- useState의 set 함수는 비동기적으로 동작합니다.
- React는 상태를 일괄적으로(batch) 업데이트합니다.
- 모든 이벤트 핸들러가 실행된 이후, 상태가 업데이트됩니다.
1.1 set 함수가 비동기로 동작할 때의 이점이 무엇입니까?
- set 함수가 비동기로 동작하면 모든 이벤트 핸들러의 함수가 실행된 후 상태가 업데이트되기 때문에, 한 이벤트에서 여러번 리렌더링되는 것을 방지할 수 있습니다.
1.2 렌더링 중에서 같은 상태를 여러번 바꾸기 위해서는 어떻게 해야하나요?
- set 함수에 값 대신 함수를 전달해줍니다.
- React는 이벤트 핸들러의 다른 코드들이 모두 실행된 후 처리하기 위해, 전달받은 함수를 큐에 넣습니다.
- React는 큐에 있는 함수들을 차례대로 실행합니다.
- 이전 업데이트 함수의 반환값을 다음 업데이트 함수에 전달합니다.
- 마지막으로 업데이트된 상태를 useState에서 반환합니다.
2. useLayoutEffect에 대해서 설명해주세요.
- useLayoutEffect는 브라우저가 화면을 리페인트하기 전에 effect를 실행하는 훅입니다.
2.1 useLayoutEffect는 어떻게 동작하나요?
- 컴포넌트가 DOM에 추가되기 전에, setup 함수를 실행합니다.
- setup 함수는 cleanup 함수를 선택적으로 반환할 수 있습니다.
- dependencies가 바뀌는 리렌더링 이후, 처음엔 이전 값과 함께 setup 함수의 cleanup 함수를 실행합니다. 그리고 새로운 값과 함께 setup 함수를 실행합니다.
- 컴포넌트가 DOM에서 제거되기 전에, 마지막으로 cleanup 함수를 실행합니다.
2.2 useLayoutEffect는 언제 주로 사용하나요?
- 컴포넌트가 렌더링하기 위해 layout 정보가 필요할 때 주로 사용합니다.
- 예를 들어, tooltip을 어떤 요소 위에 떠 있게 할 때, tooltip을 정확한 위치에 렌더링하기 위해 tooltip의 높이를 알아야 합니다.
3. React의 성능 개선 방법에 대해서 설명해주세요.
- useMemo나 useCallback을 사용 하여 연산 횟수를 줄일 수 있습니다.
- useMemo나 useCallback은 연산 값이나 연산 함수를 메모이제이션합니다.
- dependencies 배열의 값이 변하지 않을 경우, 저장해둔 값이나 함수를 그대로 사용할 수 있습니다.
- memo를 사용하여 컴포넌트를 메모이제이션하여 컴포넌트의 props나 state가 변하지 않았을 때 컴포넌트가 리렌더링되지 않도록 할 수 있습니다.
- lazy를 사용해 dynamic import를 하여, 해당 컴포넌트가 처음 렌더링될때까지 로딩을 지연시킬 수 있습니다.
4. 컴포넌트에서 이벤트를 실행시키기 위해서 어떻게 핸들링해야 하나요?
- 이벤트 핸들러에 콜백 함수 이름을 전달하거나, 콜백 함수를 호출하는 익명함수 또는 화살표 함수를 전달합니다.
4.1 그렇게 하는 이유에 대해서 설명해주세요.
- 이벤트 핸들러에서 직접적으로 콜백 함수를 호출하면, 이벤트 발생 유뮤와 상관없이 컴포넌트가 리렌더링될 때마다 콜백 함수가 호출됩니다.
5. SPA가 무엇인가요?
- SPA는 Single Page Application의 약어로 단일 페이지로 구성된 웹의 패러다임을 말합니다.
- 새로운 페이지를 요청했을 때, 필요한 데이터만 JSON 형태로 받아서 페이지를 갱신합니다.
- 사용자에게 제공되는 페이지는 한 종류이지만, 라우팅을 통해 브라우저의 주소에 따라 다른 화면을 보여줄 수 있습니다.
5.1 SPA의 장,단점에 대해 설명해주세요.
- 장점
- 필요한 데이터만 전달받아서 페이지를 갱신하므로, 전체적인 트래픽을 감소시킬 수 있습니다.
- 새로고침이 발생하지 않아서 사용자 경험이 향상됩니다.
- 단점
- 처음에 웹 애플리케이션이 필요한 모든 정적인 리소스를 한번에 받아야 해서 초기 구성 속도가 상대적으로 느립니다.
- 앱의 규모가 커질수록, JavaScript 파일 크기가 커집니다
- SPA는 SEO 이슈가 있습니다.
- SPA는 일반적으로 클라이언트 사이드 렌더링(CSR) 방식으로 동작합니다.
- CSR은 서버로부터 데이터를 응답받아 뷰를 동적으로 생성하는데, 브라우저 주소창의 URL은 변경되지 않아서 사용자 방문 history를 관리할 수 없으므로 SEO 이슈가 발생합니다.
5.2 SPA의 단점을 보완할 수 있는 방법에 대해 설명해주세요.
- 초기 로딩 속도 느림
- 코드 스플리팅을 사용하여 라우터별로 파일을 나누어서 트래픽과 로딩 속도를 개선할 수 있습니다.
- dynamic import를 사용하여 초기에 필요하지 않은 이미지에 대한 로딩을 지연할 수 있습니다.
- SEO 이슈
- history Web API를 사용하여 각 페이지 별로 개별 URL이 존재하도록 설정하는 것이 검색 엔진에게 다른 페이지임을 알려주어 색인될 수 있게 하는 좋은 방법입니다.
- 서버사이드 렌더링(SSR) 방식으로 사이트를 구축하여 검색 엔진이 서버에서 렌더링된 페이지를 확인할 수 있게 합니다.
6. SEO에 대해 설명해주세요.
- SEO는 Search Engine Optimization의 약어로 웹 사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정을 말합니다.
6.1 TTV, TTI에 대해 설명해주세요.
- TTV는 사용자가 웹 브라우저에서 내용을 볼 수 있는 시점, TTI는 페이지가 사용자와 상호 작용할 수 있는 시점을 말합니다.
6.2 CSR과 SSR일 때, TTV와 TTI에 어떻게 다른지 설명해주세요.
- CSR은 TTV와 TTI가 같은 반면에, SSR은 TTV와 TTI 간의 시간차가 존재합니다.
참고
