[React] useState로 input의 disabled 속성 제어하기

disabled 속성이란?

 

input 태그를 비활성화할 때 사용한다.

비활성화된 input은 클릭이나 입력을 할 수 없다.

리액트에서는 이 disabled 속성에 state를 연결해 상황에 따라 입력창을 열고 닫을 수 있다.    

 

 

 

왜 state로 제어하나요?

단순히 HTML로 disabled를 박아두면 고정되지만,

리액트의 state를 사용하면 사용자의 동작(버튼 클릭 등)에 따라 실시간으로 UI를 바꿀 수 있기 때문이다.  

 

• 상태 전환(Flip): true일 때는 A 입력창을 막고, false일 때는 B 입력창을 막는 식의 스위칭이 가능함!
• 데이터 흐름: 내가 지금 입력 중인 칸이 어디인지에 따라 반대편 칸의 계산 결과가 실시간으로 반영된다.

 

구현 코드 

 

상태에 따른 비활성화 제어 flipped라는 boolean state를 만들어서 스위치 역할을 하게 한다.
상태에 따라 한쪽을 막아주어 사용자가 어디에 입력해야 할지 명확하게 해준다.

const [flipped, setFlipped] = React.useState(false);

// flipped가 false면 Minutes는 활성화(!false), Hours는 비활성화(false)
<input id="minutes" disabled={flipped} />
<input id="hours" disabled={!flipped} />

// 현재 상태를 반전시켜 입력 모드 전환 함수
const onFlip = () => {
    setFlipped((current)=> !current);
}
            
 // 버튼        
 <button onClick={onFlip}>Flip</button>

 

 

 

    💡 요약

• disabled={boolean}: 리액트에서는 따옴표가 아닌 중괄호{} 안에 상태 값을 넣어 동적으로 조절한다.
• flipped 스위치: setFlipped((current) => !current)를 통해 현재 상태를 반전시켜 입력 모드를 전환한다.
• 사용자 경험(UX): disabled를 적절히 사용하면 사용자가 잘못된 칸에 입력하는 것을 방지할 수 있다.