[Worksheet 220512] React Style, useRef, Form

React 맛보기

Style 입히기

• className
  문자열

• style
  객체, 카멜 케이스.
  className보다 우위에 있어서 먼저 적용된다. 덮어씌워짐.

useRef

DOM 조작하기
DOM과 Element의 차이?

input 태그가 새로고침 되자마자 바로 focus 되게 하기

• getElementById

      const rootElement = document.getElementById("root");

      const App = () => {
        React.useEffect(() => {
          document.getElementById("input").focus();
        }, []);

        return (
          <>
            <input id="input" />
          </>
        );
      };

      ReactDOM.render(<App />, rootElement);

• useRef 사용해서 만들기

      const App = () => {
        const inputRef = React.useRef();
        React.useEffect(() => {
          // Ref 사용시 current 사용해야한다.
          inputRef.current.focus();
        }, []);

        return (
          <>
            <input ref={inputRef} />
          </>
        );
      };

React는 getElementBy 같은 것을 사용하지 않고 useRef 라는 별도의 방법을 제공하고 있다.

Form 다루기

기본 Form

label, input, submit

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

console.dir(event.target); 로 요소 내부에 어떻게 생겼는지 확인하기.

<script type="text/babel">
      const rootElement = document.getElementById("root");

      const App = () => {
        const handleSubmit = (event) => {
          // 기본 동작의 방지를 위함
          event.preventDefault();
          console.dir(event.target);
          alert(
            `Firstname: ${event.target.elements.fname.value}, Lastname: ${event.target.elements.lname.value}`
          );
        };
        return (
          <form onSubmit={handleSubmit}>
            <label htmlFor="fname">First name:</label>
            <input type="text" id="fname" defaultValue="John" />
            <br />
            <br />
            <label htmlFor="lname">Last name:</label>
            <input type="text" id="lname" defaultValue="djjd" />
            <br />
            <br />
            <input type="submit" value="Submit" />
          </form>
        );
      };

      ReactDOM.render(<App />, rootElement);
    </script>

잘 만들어진 Native HTML 등을 이용해 React에 활용해보기.

Uncontrolled, Controlled

Validation 유효성 검사
전화번호 유형이 유효한지를 체크해본다.

    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const App = () => {
        const [msg, setMsg] = React.useState("");
        const [phoneNumber, setPhoneNumber] = React.useState("");

        const handleSubmit = (event) => {
          event.preventDefault();
          const phoneNumber = event.target.elements.phone.value;

          alert(phoneNumber);
        };

        const handleChange = (event) => {
          if (event.target.value.startsWith(0)) {
            setMsg("phone number is valid");
            // 유효해야지만 전화번호 값 지정
            setPhoneNumber(event.target.value);
          } else if (event.target.value.length === 0) {
            // 아무것도 입력 안하면 메시지도 사라짐
            setPhoneNumber("");
            setMsg("");
          } else {
            setMsg("phone number is not valid");
          }
        };

        return (
          <form onSubmit={handleSubmit}>
            <label htmlFor="phone">Phone Number : </label>
            <br />
            <input
              type=""
              id="phone"
              name="phone"
              onChange={handleChange}
              // controlled 유효하지 않으면 입력조차 되지 않는다.
              value={phoneNumber}
            />
            <br />
            <p>{msg}</p>
            <button
              type="submit"
              disabled={
                // 전화번호가 0보다 작거나, msg가 valid 하지 않으면 버튼을 disabled 시킨다.
                !phoneNumber.length > 0 || msg !== "phone number is valid"
              }
            >
              Submit
            </button>
          </form>
        );
      };

      ReactDOM.render(<App />, rootElement);
    </script>

• controlled
  input의 value를 직접 관리한다.

Catch Error

try {
   ...
} catch (error) {
   ...
  }
  

• ErrorBoundary
  에러가 나면 핸들링할 영역

• Fallback
  Error가 났을 때 보여줄 컴포넌트