리액트 패턴 - Disabled prop Pattern

📖들어가며..

오늘은 오랜만에 리액트에서 자주 사용하는 패턴에 대해서 공부해보려고 한다.

짧은 내용들을 끊어서 포스팅하고 있는 만큼 빨리 학습해야겠다고 생각이 든다.

 

👨‍💻 Disabled prop Pattern

Disabled prop Pattern이란 무엇일까?

disabled prop 패턴은 버튼, 링크, 양식 필드와 같은 대화형 요소를 사용할 수 없거나 적용할 수 없을 때 비활성화하는 방법을 제공하여 접근 가능한 사용자 인터페이스를 만들 수 있도록 하는 React에서 사용되는 디자인 패턴입니다.
이 패턴은 컴포넌트의 대화형 요소에 disabled 프로퍼티를 추가하는 것으로, true로 설정하면 요소를 비활성화하고 사용자 입력을 받지 못하도록 합니다.
이는 불완전한 양식이나 불충분한 사용자 권한 등 특정 조건으로 인해 대화형 요소를 적용할 수 없는 경우에 특히 유용합니다.

 

예를 들어 어떤 컴포넌트는 특정 상황일 때만 렌더링 되어야할 때가 있다.그럼 아래처럼 조건부 렌더링을 할 것이다.

위처럼 간단하다면 그냥 저렇게 작성해도 되지만 

만약 조건부 렌더링에서 출력해야할 요소가 방대하다면 어떻게 될까?

JSX가 복잡해질 것이다.

 

또한 조건부 렌더링의 조건이 복잡해진다면 JSX부분이 복잡해질 것이다.

 

이를 해결할 때 Disabled prop Pattern을 사용한다.

이 방식을 통해 위에서 말했던 많은 조건문으로 컴포넌트가 복잡해지는 문제를 해결할 수 있다.

 

또한 추상화를 통해 코드를 효율적으로 관리할 수 있을 것이고,

쉽게 변수를 수정하거나 조건문을 추가할 수 있을 것입니다.

 

📘마무리하며..

해당 패턴에 대한 자료를 찾으려고 했을 때 관련된 자료들이 많이 없었다.

그래서 해당 패턴을 실제로 사용한 예제를 찾기가 어려웠다.

만약 해당 패턴을 사용한다고 했을 때 어떤 경우가 있을지 생각해봤는데

1. disabled조건이 복잡할 때

2. 조건으로 렌더링 되는 JSX요소가 복잡할 때 

일 것 같았다.

 

물론 개인적인 생각이다.

해당 출처에서 도움을 받았다.