Controlled Props Pattern 리액트에서 컴포넌트를 작성할 때 useState만을 사용하여 상태관리를 하게 되면 컴포넌트 외부에서는 상태에 전혀 관여할 수 없기 때문에 비제어(Uncontrolled) 컴포넌트라고 부릅니다. 그리고 반대로 props를 통해 상태값과 상태값을 다루는 콜백함수들을 전달받아 컴포넌트 외부에서 상태를 제어할 수 있도록 하는 것을 Controlled Props Pattern이라고 하며 이런 컴포넌트를 제어(Controlled) 컴포넌트라고 부릅니다. 비제어 컴포넌트는 오직 사전에 정의된 대로만 동작하고 외부 사용자가 임의로 상태를 제어할 수 없습니다. 반면 제어 컴포넌트는 외부에 컴포넌트 제어권을 넘겨주는 게 가능하므로(IOC, Inversion Of Control)..

React나 html코드를 작성하다보면 사용자 인터랙션을 처리하기 위해 여러가지 event들을 핸들링하고 관련된 요소들을 참조해야하는 경우가 많이 있습니다. 이 때 event 오브젝트에는 target, currentTarget, relatedTarget 변수를 통해서 관련 요소들의 레퍼런스들을 전달해주는데요, 이 각각의 레퍼런스 변수들은 어떤 차이가 있을까요? target 또는 currentTarget target과 currentTarget은 이벤트가 발생한 지점의 요소들을 가리킵니다. event가 발생한 지점에서 중첩구조(nested)로 되어있는 html요소들중 가장 안쪽에 있는 요소가 target이 되며, currentTarget은 event handler가 등록되어있는 요소를 나타냅니다. 중첩구조란..

요소의 크기 웹 프론트 개발을 하다보면 각 요소들이 고정 크기를 가져서 width나 height를 지정핼줄때도 있지만, 간변적인 크기의 성질을 가져서 width와 height를 지정하지 않을때도 있습니다. 그런 경우 요소들은 box-model에 의해서 컨텐츠의 크기, padding, margin등에 의해서 크기와 영역이 결정됩니다. 마찬가지로 border의 크기도 box-model 영역 계산에 포함이 되기때문에, border가 있고 없느냐에 따라 요소의 크기가 달라지게 되고 이로인해 예상치못한 디자인 사이드 이펙트가 발생할 수 있습니다. 이런 사이드 이펙트를 방지하기 위해서 요소에게 항상 동일한 border-width를 가지도록 할수 있지만, 그렇게되면 매번 디자인 작업을 할때마다 border를 신경써야..

React에서 폼(Form)화면 작성시 로그인 화면에서 아이디 또는 비밀번호는 필수로 입력하게하거나, 회원가입 화면에서 비밀번호 입력시 특수문자나 소문자, 대문자 또는 숫자 등을 섞어서 입력하도록 유효성 검사를 진행할때가 있습니다. React를 사용한다면 상태(state)를 통해서도 충분히 입력값의 유효성검사를 진행할 수 있지만, HTML의 에서도 유효성 검사와 관련하여 다양한 기능을 제공하고 있으니 한번 살펴보도록 하겠습니다. 현재 유효성 검사 상태를 나타내는 ValidityState 요소는 현재 유효성 상태를 나타내는 validity(ValidityState)값을 가지고 있으며, 요소의 여러가지 attribute 설정과 입력값에 의해 validity의 상태가 결정됩니다. // App.tsx impor..

HTML에서 요소는 required나 pattern, minLength, maxLength와 같은 속성들을 통하여 현재 입력된 값에대한 유효성 검사를 할수 있습니다. 일반적으로는 해당 요소가 포함된 form에서 submit요청이 발생하면 먼저 포함된 입력 요소들의 유효성 검사를 진행하고, 유효성 검사를 통과하지 못하면 submit을 더이상 진행하지 않고 onInvalid를 호출하게됩니다. 또한 checkValidity나 reportValidity 함수를 호출하여 즉시 유효성 검사를 진행할수도 있습니다. export default function App() { const [_invalid, _setInvalid] = useState(false); function _onBlur(event: FocusEven..