반응형

동적 2

제어 컴포넌트와 비제어 컴포넌트의 차이점

💡 제어 컴포넌트 제어 컴포넌트에 대한 공식문서의 설명은 아래와 같습니다. 제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. (중략) 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다. https://ko.reactjs.org/docs/forms.html#controlled-components 사용자 입력을 기반으로 자신의 state를 관리하고 업데이트한다라고 정의되어 있는데,,🤔 솔직히 어떤 말인지 잘 와닿지 않습니다. 한번 코드로 살펴보겠습니다...

IT/React 2022.07.12

tabindex 사용하여 focus처리

웹 접근성에서 키보드의 포커스 이동은 굉장히 중요한 요소입니다. 그리고 웹 접근성이 아니더라도 마크업이 순차적으로 잘 적용되어 있으면 콘텐츠의 논리적인 흐름에 따라서 focus가 당연히 올바르게 이동하겠지만 프로젝트상의 우리가 제어할 수 없는 환경적 이슈라던지 상황에 따른 여러 이유로 인해 포커스의 흐름이 우리가 원치 않는 방향으로 이동하는 경우가 발생합니다. 그럴 때는 어쩔 수 없이 강제적으로 포커스의 이동을 처리해 줘야 하는데 조금 더 이해하기 쉽게 예를 들어 볼게요. 특정 버튼을 클릭할 때 해당 Event로 레이어 팝업이 화면에 보이게 된다고 가정해 봅시다. 여기서 레이어 팝업에 조건을 둘게요. 이 레이어 팝업이 처음부터 화면에 마크업으로 되어 있지 않고 버튼을 클릭하면 그때 스크립트에서 동적으로 ..

IT/JavsScript 2021.03.11
반응형
//