Ref5

• 

  [Svelte]DOM 요소 참조 방법 DOM 요소 참조 방법 이전 포스팅에서 bind 지시자를 사용하여 Form 요소의 value를 매핑하고 그룹화하는 방법을 소개하였습니다. [Svelte]bind 지시자 사용 방법 및 Form 요소 바인딩 bind 지시자 Svelte에서는 다양한 지시자를 제공합니다. 그중 bind 지시자는 html의 기본 태그 또는 컴포넌트의 변수에 값을 바인딩하기 위해 사용됩니다. 값을 바인딩하기 위해서는 bind 지시문을 사 developer-talk.tistory.com bind 지시자는 Form 요소의 value를 매핑하고 그룹화하는 방법 이외에도 DOM 요소를 참조하기 위해 사용할 수 있습니다. HTML 요소 또는 컴포넌트에 bind:this={변수명}를 작성하면 script 영역에서 해당 변수를 통해 HTML .. Svelte 2022. 8. 2.

• 

  [React]div 외부 클릭을 감지 Hook으로 구현 이번 포스팅에서는 Hook에서 div 외부 클릭을 감지하는 방법을 소개합니다. 이전에 컴포넌트 외부 클릭을 감지하는 방법에 대해 해당 포스팅에서 소개하였지만, 클래스 컴포넌트 위주의 설명이었고 커스텀 훅을 사용하지 않았기 때문에 이번에는 커스텀 훅 기반으로 구현합니다. 목차 드롭다운 생성 div 외부 클릭 감지 커스텀 훅으로 구현 드롭다운 생성 드롭다운에 매핑되는 객체의 배열을 작성합니다. const objList = [ { code: "", name: "", key: "key_empty" }, { code: "A", name: "A", key: "key_A" }, { code: "B", name: "B", key: "key_B" }, { code: "C", name: "C", key: "key_C" }.. React/React 문법 2021. 11. 2.

• 

  [React]컴포넌트에서 Esc 키 감지 React에서 Esc 키를 감지하는 방법입니다. React에서 지원하는 ref와 EventListener을 사용하여 Esc 키를 감지합니다. 예전에 포스팅한 컴포넌트 외부 클릭과 동일한 방법이므로 이번 포스팅에서는 Class기반의 컴포넌트의 코드만 작성하였으며, 자세한 설명도 생략하였습니다. 입력 컨트롤에 Esc 키를 누를 경우 Esc Press 라는 문구가 console에 출력되는 코드를 작성했습니다. Class기반의 컴포넌트로 구현 constructor 생성자에서 React.createRef()를 사용하여 escRef라는 ref를 생성하며, 이벤트 핸들러 함수를 바인딩합니다. constructor(props) { super(props); this.escRef = React.createRef(); th.. React/React 문법 2021. 8. 4.

• 

  [React]input Element 포커싱 처리 StackOverFlow를 눈팅하던 도중 2015년에 작성된 흥미로운 글을 발견했습니다. 렌더링 후 input Element를 포커싱 처리를 어떻게 하는지 질문하는 글이었습니다. https://stackoverflow.com/questions/28889826/how-to-set-focus-on-an-input-field-after-rendering How to set focus on an input field after rendering? What's the react way of setting focus on a particular text field after the component is rendered? Documentation seems to suggest using refs, e.g: Set .. React/React 문법 2021. 8. 3.

• 

  [React]컴포넌트 외부 클릭을 감지 StackOverFlow를 눈팅하던 도중 2017년에 작성된 흥미로운 글을 발견했습니다. 컴포넌트 외부 클릭을 어떻게 감지하는지 질문하는 글이었습니다. https://stackoverflow.com/questions/32553158/detect-click-outside-react-component Detect click outside React component I'm looking for a way to detect if a click event happened outside of a component, as described in this article. jQuery closest() is used to see if the target from a click event has the dom eleme.. React/React 문법 2021. 7. 28.