<button>
, <input>
, <select>
, <a>
에는 foucus라는 기능이 존재한다. 일단적으로 focus
란 해당 요요소에 데이터를 입력할 준비가 되었다를 의미한다. blur
는 포커스를 잃은 순간을 이야기하는데 요소가 포커스를 잃게되면서 데이터를 체크해 요청을 보내는 활동을 하기 때문에 중요하다.focus : 요소가 포커스 받을때
blur : 요소가 포커스를 잃었을 때
tabindex
속성을 활용한다.tabindex
가 있는 속성은 아무런 상관없이 포커스가 가능하다. 숫자를 통해 요소별 포커스의 순서를 나타내줄수 있다. (작은 수 -> 큰 수 : 기본순서)<ul>
<li tabindex="1">일</li>
<li tabindex="0">영</li>
<li tabindex="2">이</li>
<li tabindex="-1">음수 일</li>
</ul>
<FontAwesomeIcon tabIndex={0} icon={faSignOutAlt}
onFocus={this.clickLogout}
onBlur={this.closeLogoutDropDown} />
{this.openLogout && this.renderLogoutDropDown()}
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>
}