우테코 동료 크루 솔로스타의 미션 코드와 리뷰 내용을 보며 학습중, 한 hook 코드에서 다소 생소한 단어들을 발견했어요.
생소한 단어들에 대한 의문을 해결하고 기억하기 위한 포스팅이 되겠습니다~!
하나의 스토리처럼 기억하기 위해 hook 추상화 과정도 넣게 되었습니다.작성하던 중, context가 자주 바뀌어 글 이해를 방해한다고 생각해 따로 분리하게 되었습니다.(hook 추상화 글 바로가기)
솔로스타에게 허락을 받았음을 미리 알립니다😀
출발~
1. hydrate / dehydrate
export const usePersistedState = <S = undefined>(key: string, initialState: S) => {
const dehydratedState = useMemo(() => localStorage.getItem(key), [key]); // <-- 여기
const hydratedState = hydratedState === null ? initialState : JSON.parse(dehydratedState); // <-- 여기
const [internalState, internalSetState] = useState<S>(hydratedState);
useEffect(() => {
localStorage.setItem(key, JSON.stringify(internalState));
}, [key, internalState]);
return [internalState, internalSetState] as const;
};
위 hook 코드를 보면 hydrate, dehydrate 등의 생소한 단어들이 보입니다...
우선 사전적 의미를 찾아봤어요.
'어떤 것'을 '물'이라고 은유적으로 표현한 느낌인데... 어느정도 추측만 가능할 뿐, 정확히는 모르겠네요...
GPT에게 물어보니 보다 명쾌한 대답을 받을 수 있었어요!
정리하면 다음과 같습니다.
- hydrate: 간단한 형태로 변환된 데이터를 원래의 복잡한 구조나 객체로 변환하는 과정을 일컫는 말(수분 보충)
- dehydrate: 복잡한 데이터 구조나 객체를 더 간단한 형태로 변환하는 과정을 일컫는 말(수분 제거)
그럼 이제 코드를 다시 봅시다.
const dehydratedState = useMemo(() => localStorage.getItem(key), [key]); // <--- 여기
const hydratedState = hydratedState === null ? initialState : JSON.parse(dehydratedState); // <--- 여기로컬스토리지에서 불러온, 이미 간단한 형태로 변환되어있는 값을 'dehydrated'State
변환된 데이터를 JSON.parse 메서드를 통해 원래의 구조로 재변환한 값을 'hydrated'State
라고 네이밍한 것을 알 수 있네요!
2. Serialization(직렬화) / Deserialization(역직렬화)
은유적인 표현을 알고나니, 정식 명칭이 궁금했습니다.
다시 GPT에게 물어봅시다.
serialization(직렬화) / deserialization(역직렬화) 이라는 명칭을 알려주었습니다.
조금 더 자세하게 물어봅시다.
hydrate / dehydrate와 비슷하지만 데이터 저장, 전송, 공유의 늬양스가 추가되었습니다.
정리하면 다음과 같습니다.
- serialization: 저장, 전송, 공유에 유리하도록 데이터를 특정 형식에 맞춰 변환하는 과정
- deserialization: 위 이유로 변환된 데이터를 다시 사용하기 위해 원래의 구조로 되돌리는 과정
예시를 들면 다음과 같습니다.
로컬스토리지에 값을 저장하기 위해서는 JSON 문자열 형식을 전달해야 합니다(특정 형식)
이를 위해 우리는 JSON.stringify() 를 사용하죠(변환)
이를 serialization(직렬화)한다고 할 수 있습니다.
또한 dehydrate(수분 제거) 라고 은유적으로 표현할 수 있죠.
로컬스토리지에서 가져온 값을 사용하기 위해서는 JSON 문자열 형식을 기존 형태로 변환해야합니다.
이를 위해 우리는 JSON.parse() 를 사용하죠.(재변환)
이를 deserialization(역직렬화)한다고 표현할 수 있습니다.
또한 hydrate(수분 보충) 라고 은유적으로 표현할 수 있죠.
dehydrate == serialization(직렬화)
hydrate == deserialization(역직렬화)
💫'de'의 쓰임이 같지 않다는 것에 유의합시다.💫
보통 사용되는 기술, 데이터 형식 및 처리 방법에 따라 용어들이 조금씩 차이가 있다고 합니다.
Marshalling / Unmarshalling - 프로토콜 버퍼(Protocol Buffers), RPC(Remote Procedure Call) 등
Encoding / Decoding - base64 인코딩 등
3. parsing - 번외편
parsing은 데이터를 읽고 그 안에 포함된 정보를 추출하거나 원하는 형식으로 변경하는 작업입니다.
또한 문법을 확인하고 검증하는 작업도 parsing이라고 표현합니다
deserialization과 비슷한 맥락이지만, parsing이 이를 포함하는 더 큰 개념이라고 할 수 있겠습니다😉
4. hook 코드 다시보기
export const usePersistedState = <S = undefined>(key: string, initialState: S) => {
const dehydratedState = useMemo(() => localStorage.getItem(key), [key]);
const hydratedState = hydratedState === null ? initialState : JSON.parse(dehydratedState);
const [internalState, internalSetState] = useState<S>(hydratedState);
useEffect(() => {
localStorage.setItem(key, JSON.stringify(internalState));
}, [key, internalState]);
return [internalState, internalSetState] as const;
};단어가 내포한 뜻을 알고나니, 각 코드 라인을 이해하기 쉬워지지 않았나요?
다른 개발자와의 원활한 소통을 위해서라도 CS지식은 필수라고 생각드네요...😅😅😅
천천히 학습하겠다고 다짐하며 글을 마무리 하겠습니다~!
