안녕하세요 UXPin 파트너 단군소프트입니다.

오늘은 지난 시간에 이어 React에서 사용할 수 있는 수만 개의 디자인 패턴 중 꼭 알아야 할 몇 가지 패턴에 대해 소개하겠습니다.
혹시 아직 이전 포스팅을 보지 못하신 분은 아래의 링크에서 확인해 주세요.

준비되셨으면 지금 바로 “꼭 알아야 할 React 디자인 패턴”에 대한 소개를 시작하겠습니다! GO GO~

◆ 스테이트리스 컴포넌트(Stateless Components)

스테이트리스 컴포넌트(Stateless Components)에 관해 이야기하기에 앞서 State에 대해 알아보겠습니다. State란 컴포넌트 내에서 정의 및 변경이 가능한 컴포넌트의 상태 값을 뜻하는 객체입니다. 쉽게 말하면 State를 사용하면 로그인했을 때 “안녕하세요”와 같이 고정된 문구가 아니라 “안녕하세요, 단군소프트님”과 같이 사용자에 따라 다른 문구를 화면에 표시할 수 있습니다.

State가 무엇인지 알았으면 이제 스테이트리스(Stateless)에 대해 알아보겠습니다. 이미 눈치채셨겠지만, 스테이트리스 컴포넌트란 이름 그래도 State가 존재하지 않은 컴포넌트를 의미합니다.

Stateless 컴포넌트는 클래스가 필요하지 않기 때문에 간결하게 작성할 수 있으며 이해하기 쉽고 예측이 용이합니다. 또한 Life Cycle이 없기 때문에 불필요한 메모리 할당과 채킹이 불필요해 개발 성능을 향상시킬 수 있습니다.

◆조건부 렌더링(Conditional Rendering)

조건부 렌더링이란 말 그대로 특정 조건이 충족되면 해당 결과가 나오게 작업을 위해 사용하는 방법입니다. 예를 들어, 사용자가 로그인을 하면 “Welcome back!”이라는 문구가 나오게 하고, 로그인이 안 된 사용자에게는 “Please sign up”이라는 문구가 나오게 설정할 수 있습니다.

조건부 렌더링은 자바스크립트에서 동작하는 것과 동일하게 동작하며 필요에 따라 별도의 컴포넌트를 만든 다음 응용 프로그램에 필요한 컴포넌트만 렌더링 할 수 있기 때문에 매우 유용하게 사용되고 있습니다.

​◆ Render Props

Render Props는 React 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용하는 간단한 테크닉을 뜻합니다. 즉, 서로 다른 컴포넌트에서 동일한 state를 공유할 수 있기 때문에 그 뛰어난 편리성을 증명하고 있습니다.

또한 각 컴포넌트 내부의 렌더링 로직을 구현하는 대신 function prop을 사용하여 렌더링 할 항목을 결정할 수도 있습니다. Render Props 패턴에 대해 더 자세한 내용을 알고 싶은 분은 이 문서에서 확인해주세요.

[Render props를 사용하는 인기 라이브러리]
- React Router
- Downshift
- Formik

​◆ 제어 컴포넌트(Controlled Components)

제어 컴포넌트(Controlled Components)는 사용자의 입력을 기반으로 자신의 state를 onChange()를 이용해 데이터로 관리하고 업데이트하는 컴포넌트입니다. 쉽게 말해 데이터와 UI를 완전히 동기화된 상태로 사용자 입력에 즉시 반응할 수 있는 컴포넌트를 뜻합니다.

보통 제어 컴포넌트(Controlled Components)를 사용하면, input의 값은 항상 React state에 의해 결정됩니다. 코드를 조금 더 작성해야 한다는 의미이지만, 다른 UI 엘리먼트에 input의 값을 전달하거나 다른 이벤트 핸들러에서 값을 재설정할 수 있습니다. 기본적으로 React 양식은 제어 및 비 제어 컴포넌트를 모두 지원하지만, 제어 컴포넌트를 사용하는 것을 적극 추천합니다.

◆React Hook

Hook은 React에 비교적 최근에 추가된 기능입니다. Hook을 이용하면 개발자들은 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.

사용 가능한 Hook의 전체 목록을 보려면 Hooks API 참조 문서에서 확인해 보십시오. React에서 미리 빌드 된 hook 외에도 여러분 만의 hook를 만들 수도 있습니다. 이를 통해 컴포넌트의 로직을 추출하고 재사용 가능한 함수를 만들 수 있습니다. 그러나 인수가 객체, 배열 또는 함수인 경우 hook 작업이 약간 까다로워질 수 있다는 점 주의해주세요. 실제로 하다 보면 다소 혼란스러울 수 있습니다. 😊

아래에 Hook을 사용한 애플리케이션 리팩토링 과정을 담은 영상을 준비했으니 궁금하신 분들은 시청해주세요!

여기까지 꼭 알아야 할 React 디자인 패턴에 대한 소개였습니다. 유익하셨나요?

이번에 소개해 드린 React는 UXPin에서 함께 사용할 수 있는 최고의 라이브러리입니다.
지금 바로 UXPin과 React를 이용해 DesignOps의 문제를 해결해 보세요!
긴 글 읽어주셔서 감사합니다.

이 글은 React의 The Best React Design Patterns You Should Know About를 번역한 글입니다.