[React] onFocus, onBlur

필요했던 기능

벨로그 클론코딩 주차에서 회원가입 부분에 사용자가 input 태그에 커서를 올렸다는 것이 감지가 되면 아래와 같이 색상이 초록색으로 변경되도록 구현하고 싶어서 해당 구현 방법을 알아보았다.

1. onFocus

• 엘리먼트가 포커스될 때 호출된다.
• 예를 들어 input 창에서 커서를 두었을 때 호출된다.

<input onFocus={() => console.log('input focus')}

2. onBlur

• 엘리먼트에서 포거스가 사라졌을 때 호출된다.
• input 창에 커서를 두었다가 다시 input 창의 밖을 클릭하게 되면 호출된다.

<input onBlur={() => console.log('outside focus')}

3. 적용 방법

1) custom hook 불러오기

• 기존에 useChange라는 이름으로 만들었던 custom hook을 불러온다.

  // src/hooks/useChange.js
  
  import { useState } from "react";
  
  const useChange = () => {
    const [isChange, setChange] = useState(false);
    const handler = () => {
      setIsModal(!isChange);
    };
    return [isChange, handler];
  };
  
  export default useChange;

2) 적용

• custom hook 불러오기
• onFocus를 누르면 onChangeIsFocusNickName handler가 실행되고 false → true로 값을 변경시켜준다.
• onBlur가 호출되면 onChangeIsFocusNickName handler가 실행되고 true로 변경되었던 값을 다시 false로 변경시킨다.
• isFocusEmail이면 색상을 변경시켜주고 아닐 경우 기존 색상으로 나타나도록 설정해준다.

// src/components/register/Register.jsx
import useChange from "../../hooks/useChange";

// 커서 이벤트
const [isFocusEmail, onChangeIsFocusEmail] = useChange();

return (
	<Contents>
    {isFocusEmail ? (
      <Label fontColor="#20C997">이메일</Label>
    ) : (
      <Label>이메일</Label>
    )}
    <InputWrapper>
      <Input
        name="email"
        defaultValue={state}
        disabled
        onFocus={() => onChangeIsFocusEmail()}
        onBlur={() => onChangeIsFocusEmail()}
      />
    </InputWrapper>
  </Contents>
)

참고 자료

• https://velog.io/@niboo/React-onFocus-와-onBlur이벤트를-사용하여-인풋창-색상-변경하기
• https://ko.reactjs.org/docs/events.html#focus-events