react 앱에서 태그 엘리먼트에 속성과 속성의 값을 다이나믹하게 선언하는 방법에 대하여 알아봅니다. (여기서 다이나믹하게 변경한다는 뜻은 상태값에 따라 속성과 그 값이 즉시 추가, 변경되는 것을 의미합니다.)! react 태그 요소에 속성 다이나믹하게 추가하기예를들어 <fieldset> 태그가 존재합니다. 이 태그에 disabled 어트리뷰트를 상태값에 따라 다르게 추가 및 변경하려면 어떻게 하는지 알아보도록 하죠. 이 방법은 jsx를 사용하는 경우에 특히 유용합니다. 방법은 아래와 같으며 react 16 버전 이상에서 동작합니다.const { ...
다수의 입력폼 양식을 만들고 몇 개의 요소들은 필수 나머지들은 옵션인 경우 submit 버튼은 활성 또는 비활성화일 필요가 있습니다. 이를 구현하기 위한 방법으로 ngRequired 디렉티브를 사용할 수 있습니다.! ngRequired 그리고 ngDisabled먼저 ng-required 디렉티브는 해당 엘리먼트에 선언 될 경우 입력값 등의 현재 상태를 가져와 학인할 수 있습니다. 이를 활용하여 필수 입력폼에 값이 있는지 등을 확인하는 것이 가능합니다.다음으로 ngDisabled 디렉티브는 해당값이 false인 경우 비활성화하여 disabled 속성을 같는 것과 같이 ...
textarea를 사용하여 내용을 보여주고 수정할 수는 없도록 하기위해 disabled 속성을 적용하게되면 익스플로러, ie에서 텍스트색상이 적용되지 않습니다. 태그에 브라우저가 가지는 기본 스타일 값이 우선되기 때문인데 단순 css만으로 해결되지 않으므로 다른 방법이 필요합니다.이를 해결하기 위해 가장 간편한 방법은 바로 disabled 속성을 다른 속성으로 변경하는 것입니다.물론 사용자가 작성이 불가능한 다른 속성을 이용해야겠죠. 사용자가 입력가능하게 하면 안되니까요. 그래서 사용할 속성이 readOnly 입니다.readOnly 속성은 사용자 입력이 불가능하면서 ...