스낵걸즈 코딩 공부 · 03
클리어한 게임만 보려는데, 왜 목록은 그대로지?
같은 게임 목록의 전후 화면으로 컴포넌트·렌더링·하이드레이션을 구분해봐요.
체크했는데, 왜 둘 다 남아 있지?
안녕하세요, 레드예요. 이번에는 게임 기록 사이트 ‘플레이 노트’의 목록 화면을 살펴봤어요. ‘별빛 모험’은 클리어, ‘달빛 레이싱’은 진행 중으로 표시해둔 연습용 화면이에요.
키라리가 ‘클리어한 게임만 보기’를 눌렀어요. 체크 표시는 생겼는데, 진행 중인 게임도 그대로 남아 있었어요.
클리어한 것만 보려고 눌렀는데, 왜 둘 다 나와?
네아와 코드를 확인해보니, 이 예제에는 선택에 맞춰 목록을 바꾸는 처리가 아직 없었어요. 체크 표시를 바꾸는 것과 게임 목록을 걸러내는 것은 따로 만들어야 했던 거예요.
같은 화면에서, 바뀐 부분 찾아보기
첫 컷과 마지막 컷의 목록을 비교해보세요. 마지막에는 ‘진행 중’인 달빛 레이싱이 사라졌어요. 가운데 컷의 테두리는 화면을 어떤 부품으로 나눌지 표시한 것이에요.
화면을 만드는 말부터 차근차근
컴포넌트는 화면을 이루는 부품
게임 이름과 그림, 클리어 여부를 묶은 ‘게임 항목’을 생각해봐요. 이렇게 화면의 한 부분을 나누어 만든 것을 컴포넌트라고 해요. 같은 구조를 쓰면서 게임 이름과 클리어 여부만 바꿔 두 항목을 표시할 수 있죠.
렌더링은 데이터와 코드로 화면을 만드는 과정
‘별빛 모험, 클리어’라는 데이터와 게임 항목 코드를 이용해 화면을 만드는 일을 렌더링이라고 해요. 이때 처음 보이는 화면을 서버에서 미리 준비해 보내는 방식도 있어요.
하이드레이션은 준비된 화면에 상호작용을 연결하는 과정
서버에서 준비한 HTML을 브라우저가 먼저 보여주고, 뒤이어 JavaScript가 실행되면서 버튼의 클릭 등에 반응할 수 있게 되는 경우가 있어요. 이렇게 서버에서 만든 화면에 React의 상호작용을 연결하는 과정을 하이드레이션이라고 불러요.
겉모양이 먼저 보여도, 누를 준비까지 끝났다는 뜻은 아니구나.
반응이 없다고 전부 하이드레이션 문제는 아니에요
위 만화는 목록을 바꾸는 코드가 빠진 경우예요. 하이드레이션이 그 코드를 대신 만들어주지는 않아요. 다른 화면에서 반응이 없다면 코드 오류 등 여러 원인을 살펴봐야 해요. 하이드레이션은 모든 웹페이지에 반드시 있는 단계도 아니에요. 이번에는 Next.js의 서버·클라이언트 컴포넌트를 공부하면서 만난 경우를 보는 거예요.
서버 컴포넌트와 클라이언트 컴포넌트
게임 정보를 읽어 보여주는 부분은 서버 쪽에서 준비할 수 있어요. 반면 이 예시처럼 버튼을 눌러 게임 목록을 걸러내고 그 선택을 기억하려면 브라우저에서 실행할 기능이 필요해요. 이런 상호작용을 맡는 부분을 클라이언트 컴포넌트로 만들 수 있어요.
클라이언트는 서비스를 요청해 사용하는 쪽을 말해요. 여기서는 우리 브라우저예요. 클라이언트 컴포넌트도 첫 화면의 HTML은 서버에서 준비될 수 있어요. 이름에 ‘클라이언트’가 있다고 처음부터 모든 일을 브라우저에서만 하는 것은 아니에요.
‘use client’는 어디에 쓰는 표시인가요?
Next.js에서는 파일 맨 위에 'use client'를 적어 클라이언트 컴포넌트의 경계를 표시해요. 그 파일에서 불러오는 코드도 관계가 있어요. import는 다른 파일의 코드를 불러오는 문법이에요.
그래서 버튼이 없는 부품도 클라이언트 쪽에 포함될 수 있어요. 겉모습만 보고 구분하지 말고 파일의 표시와 코드를 불러오는 관계를 확인해야 해요. 지금은 이 문장을 직접 외워 쓰기보다 ‘코드 안에서 경계를 정한다’는 뜻만 기억해도 괜찮아요.
보이는 것과 작동하는 것은 달라요
아래 영상에서는 메뉴와 기간 필터를 예로 들어요. 화면이 보이는 것과 누르는 동작에 반응하는 것을 나눠서 봐요.
버튼을 눌렀다면, 목록도 확인해요
체크 표시가 생겼다고 원하는 동작이 끝난 것은 아니었어요. ‘클리어한 게임만 보기’를 선택했다면 진행 중인 게임이 목록에서 빠지는지도 봐야 해요.
버튼 모양만 보는 게 아니라, 눌렀을 때 목록이 어떻게 바뀌는지도 봐야겠어요.
아이코에게 부탁할 말도 바꿨어요. “클리어한 게임만 보기를 체크하면 진행 중인 게임은 목록에서 빼줘.” 어떤 버튼을 누르면 무엇이 바뀌어야 하는지 말하니 원하는 동작이 분명해졌어요.
작은 연습 · 3문제
필터의 동작을 직접 설명해봐요
만화의 전후 화면을 비교하고, 원하는 동작을 아이코에게 어떻게 설명할지 생각해보세요. 예시 답은 생각한 뒤 펼쳐보세요.
1. 두 화면의 차이 찾기
만화 첫 컷과 마지막 컷을 비교해보세요. 어떤 게임이 사라졌고, 왜 사라져야 했을까요?
예시 답 펼치기
진행 중인 달빛 레이싱이 사라졌어요. ‘클리어한 게임만 보기’를 선택했으니 클리어한 별빛 모험만 남아야 해요.
2. 이 글에서 직접 눌러보기
아래 ‘예시 답 펼치기’를 누르고, 누르기 전과 후의 차이를 말해보세요.
예시 답 펼치기
숨겨져 있던 답이 나타나요. 이 펼치기는 브라우저가 제공하는 HTML 기능이에요. 모든 반응에 React나 하이드레이션이 필요한 것은 아니에요.
3. 아이코에게 증상 설명하기
필터가 작동하지 않는다면 ‘고쳐줘’ 대신 무엇을 눌렀고, 무엇을 기대했으며, 실제로 어땠는지 써보세요.
예시 답 펼치기
예: “클리어한 게임만 보기를 체크했어. 클리어한 게임만 남을 줄 알았는데 진행 중인 게임도 보여.” 원인은 코드를 확인하기 전에는 단정하지 않아요.
댓글
0로그인 없이 남길 수 있어요. 작성한 브라우저에서 수정·삭제할 수 있어요.
전체 댓글 0
한국어 · English · 日本語아직 댓글이 없어요. 첫 이야기를 남겨 주세요.