웹사이트는 두가지 방식으로 작동한다. 하나는 서버이고 하나는 클라이언트이다.
서버 : 웹사이트의 데이터를 저장하고, 웹사이트의 페이지를 제공해주는 역할
클라이언트 : 웹사이트를 보기 위해 사용하는 브라우저(크롬, 사파리 등)로 클라이언트는 서버에서 받은 데이터를 화면에 보여주는 역할
Hydration이란
리액트같은 프레임워크를 사용할 때, 서버에서 먼저 웹페이지를 만들고, 그 페이지를 클라이언트에 보낸다. 그러면 클라이언트는 그 페이지를 받아서 화면에 보여주고, 리액트가 그 페이지에 기능을 추가하여 클릭이나 스크롤 같은 인터랙션을 할 수 있게 해준다. 이 과정을 hydration이라고 한다.
Hydration Error
하이드레이션 오류는 서버에서 보낸 웹페이지와 클라이언트에서 그 페이지를 처리할 때 서로 다르면 발생한다. 다시 말해 서버가 보내준 페이지랑 클라이언트가 해석하는 방식이 다를 때 생기는 문제이다.
'React & TypeScript' 카테고리의 다른 글
[TIL] zustand로 로그인 상태 유지 및 로그아웃 구현 (+supabase, typescript) + 수정 (4) | 2024.10.26 |
---|---|
[TIL] tailwindcss 설치하기 (1) | 2024.10.21 |
[TIL] React에서 key가 필요한 이유가 뭘까? (1) | 2024.07.24 |
[TIL] supabase 연동 시 'url'과 'anone key'를 .env파일로 보안하는 방법 (0) | 2024.06.28 |
[TIL] TanStack Query란 (0) | 2024.06.21 |