Skip to content
GwiyeomGo Tech Blog
About GwiyeomGo

REACT npm module _ 상태에 따라 활성 및 비활성 되는 버튼

REACT, 20222 min read

배경

특정 상태에서 버튼을 활성화 및 비활성화해야 하는 경우가 있습니다. 예를 들어 버튼은 취소할 수 없는 상태일 때 비활성화되어야 합니다. 실제로 코드를 작성하는 동안 중첩된 if 문을 사용하게 되었습니다. 코드의 길이가 길어져 코드를 이해하기 어려워졌습니다. 이를 수정하기 위해 반복되는 코드를 컴포넌트로 만들었습니다.

작업내용

기부 상태 버튼 컴포넌트를 만들었고 해당 버튼을 사용해서 코드를 정리하려고 합니다.

오픈소스로 만들어 보자

1.npx create-react-app activate-button-by-status 로 react 프로젝트 생성 2. 컴포넌트 작업 3. package.json 구성하고 3. npm publish --access=public

오픈소스등록

npm 에 등록한 내 react 모듈

npm i @gwiyeomgo/activate-button-by-status@latest 를 통해서 상태에 따라서 활성 비활성화 되도록 수정할 수 있다

button

이 후 계획

내가 업무를 하면서 이 버튼을 생각하게 된 계기는 상태 뿐만 아니라 권한까지도 같이 고려해야 했던 상황 때문이다 업무 코드에서는 상태,권한까지 적용한 코드를 만들었는데 오픈 소스는 간단한게 좋다고 생각했다 우선 상태만 고려한것을 만들었으니 해당 모듈에 버전을 추가하거나 아니면 새 모듈을 만들어 권한까지 고려한 버튼을 만들계획이다. => 20220822 버전을 0.1.0 으로 변경하고 update 완료

© 2024 by GwiyeomGo Tech Blog. All rights reserved.