Button 태그의 disabled 속성

• disabled가 false일 때 : 활성화🌝

• disabled가 true일 때 : 비활성화🌚

• button에 disabled 속성을 명시하지 않을 경우: false 값을 가짐. (활성화🌝**)**

  <button>버튼입니다</button>
  

• button에 disabled 속성을 명시한 경우: true 값을 가짐. (비활성화🌚)

  <button disabled>버튼입니다</button>
  

• Button 컴포넌트가 활성화🌝 되는 경우

  1. Button 컴포넌트에 disabled 값을 전달해주지 않는 경우.

     disabled 값을 전달해주지 않으면 disabled 속성 자체가 무시되어 버림. 개발자 도구를 열어서 버튼 요소를 클릭해보면 disabled가 명시되지 않은 것을 볼 수 있음. 명시되지 않았다? 활성화

     

     Button 컴포넌트에 name속성만 전달하고, disabled는 전달하지 않았음.

     

     개발자도구로 버튼 요소를 클릭해보면 disabled가 명시되지 않은 것을 볼 수 있음.

     

  2. Button 컴포넌트의 disabled에 false값을 전달해주는 경우

     

     

     disabled가 명시되지 않음.

     

• Button 컴포넌트가 비활성화🌚 되는 경우

  1. Button 컴포넌트의 disabled에 true 값을 전달해주는 경우

     

     

     disabled 속성이 나타난 것을 볼 수 있음

     

     • (참고) Button 컴포넌트 코드