👋 인사

안녕하세요~ 고영이에요.
또 오랜만에 포스트를 쓰네요. 자주 써야하는데 블로그에 통 관심을 못가졌네요.
바쁘기도하고 그럴싸하게 쓸것들을 찾느라 시간이 훌쩍 지났어요. 오늘은 짧게 글을 작성해볼게요~

오늘 소개할 것?

RSC와 RHF, Zod를 소개할까해요.

• RSC는 리액트의 새로운 프레임워크인 리액트 서버 컴포넌트를 말해요.
  • RSC 링크: https://nextjs.org/docs/app/building-your-application/rendering/server-components
  • RSC data fetch 링크: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating
• RHF는 입력에 사용되는 form, input, select 등을 접근성을 고려하여 상태를 관리할 수 있게 해주는 라이브러리에요.
  • RHF 링크: https://react-hook-form.com/docs/useform
• Zod는 데이터 검증 라이브러리에요.
  • Zod 링크: https://zod.dev/?id=basic-usage

RSC(React Server Component)

현재 RSC는 Next.js프레임워크에서 시범적으로 사용이 가능해요. 아직 안정성은 조금 떨어지는 편이에요.
RSC의 장점은 자바스크립트 번들에 포함되지않고, 서버에서 데이터를 미리 불러와서 화면을 렌더링해주는 등의 장점이 있어요.
RSC의 단점으로는 기존의 리액트와 상당히 다른 패턴으로 개발을 해야해요.

기존의 리액트 컴포넌트는 공통적으로 사용되는 요소를 묶어서 이를 추상화하는데 목적을 두었지만, RSC는 데이터를 조회하고 화면을 렌더링하는가와 사용자 동작을 통해 페이지에 변화를 일으키는가를 구분해서 서버/클라이언트 컴포넌트로 나눠요.

서버컴포넌트는 기존의 컴포넌트와 다르게 다양한 제약 사항들이 있어요. 클라이언트컴포넌트는 기존 컴포넌트와 매우 비슷하게 사용할 수 있지만, props에 직렬화된 요소(함수 사용 불가)만 넘겨줄 수있어요.

이렇듯 기존의 개발 방식과 상당히 다르기 때문에, 러닝커브가 꽤 높은 편이에요. 하지만 그만큼 장점도 있기 때문에 배워두면 좋지 않을까 생각해요.

RHF(React Hook Form)

RHF는 RSC처럼 프레임워크는 아니고, 단순한 상태관리 라이브러리에요. 리액트와 결합했을때 다양한 장점들이 있어요.
보통 input을 만들때 useState로 state를 하나 만들고 onChange와 setState를 결합하는 방식으로 개발을 많이해요. input이 여러개면 useState도 그만큼 많아지고 코드는 지저분해지는게 당연한 일이겠죠. 정말 번거로운 일이 아닐 수 없어요.
input과 state를 결합하는게 바로 RHF에요. useForm()을 이용해서 form관리 함수와 상태를 만들고 이를 input과 form에 연결해주면 따로 useState없이 input과 form을 관리할 수 있답니다.

Zod

Zod는 상태 검증 라이브러리에요. 상태의 값이 비어있는지, 문자열, 이메일, url, 최소길이, 최대길이, 숫자, 대소비교, 등등 다양한 검증을 아주 편리하게 도와줘요.
그래서 위에 소개한 useForm의 resolver에 연결해주면 form 데이터 검증을 도와준답니다.

🙇‍♂️ 마무리

오늘은 짧게 요즘 자주 사용하는 라이브러리들의 소개 글을 작성해봤어요. 개발에 도움이 되셨다면 좋겠네요.
이제 자러갈게요 바이바이~