focuse & blur

• 기본으로 제공하는 <button>, <input>, <select>, <a> 에는 foucus라는 기능이 존재한다. 일단적으로 focus 란 해당 요요소에 데이터를 입력할 준비가 되었다를 의미한다.
• blur는 포커스를 잃은 순간을 이야기하는데 요소가 포커스를 잃게되면서 데이터를 체크해 요청을 보내는 활동을 하기 때문에 중요하다.

  focus : 요소가 포커스 받을때
  blur : 요소가 포커스를 잃었을 때

tabindex

• 위 처럼 focus는 모든 요소가 가지고 있는 특징이 아니다. 그래서 아이콘이나 여타 다른 요소에 focus와 blur를 주기위해서는 tabindex속성을 활용한다.
• tabindex가 있는 속성은 아무런 상관없이 포커스가 가능하다. 숫자를 통해 요소별 포커스의 순서를 나타내줄수 있다. (작은 수 -> 큰 수 : 기본순서)

<ul>
  <li tabindex="1">일</li>
  <li tabindex="0">영</li>
  <li tabindex="2">이</li>
  <li tabindex="-1">음수 일</li>
</ul>

실제적용 코드

• 로그아웃 버튼을 누르면 진짜 로그아웃을 할 것인지 확인하는 dropdown이 발생하는데 안에 포함된 "아니요" 말고도 이외의 영역을 눌러도 dropdown이 닫히는 기능을 구현하는데 사용했다.

<FontAwesomeIcon tabIndex={0} icon={faSignOutAlt} 
                 onFocus={this.clickLogout} 
                 onBlur={this.closeLogoutDropDown} />

{this.openLogout && this.renderLogoutDropDown()}

• 아이콘을 클릭하면 focus가 잡히면서 this.clickLogout 함수가 실행이 되고, focus를 잃는순간 blur가 실행되면서 this.closeLogoutDropDown 함수가 실행이 된다.

private renderLogoutDropDown = () => {
        return <article className={"logout-dropdown"} onMouseDown={e=>e.preventDefault()}>
            <p>로그아웃을 하시겠습니까?</p>
            <button onMouseDown={e => e.preventDefault()}
                    onClick={this.confirmLogout}>네
            </button>
            <button onMouseDown={e => e.preventDefault()}
                    onClick={this.closeLogoutDropDown}>아니요
            </button>
        </article>
    }

• 여기서 preventDefault()를 사용해서 원하는 영역의 focus이벤트를 끊어줄 수 있다. 이후 Click이벤트에 해당하는 함수를 실행하며 dropdown 로직을 실행하다.
• 여기서 중요한 점은 아이콘을 누른뒤 dropdown 외의 지역을 누르면 blur가 잘 작동되는걸 볼 수 있다. 아이콘 입장에서 preventDefaul가 적용된 영역을 누르면 foucs를 빼앗기지 않았다. 그래서 focus는 여전히 아이콘에 머물러 있다. 하지만 그 외의 영역을 누르면 focus를 잃어버리기 때문에 그제서야 blur 함수가 작동한다.

+참고
https://ko.javascript.info/focus-blur