[TIL] 220512 리액트 맛보기-(style, Ref, form, error)

koseony·2022년 5월 12일
ReactTIL

TIL(Today I Learn)

목록 보기
14/19
post-thumbnail

1. element에 style 적용하기

<!DOCTYPE html>
<html lang="ko">
  <body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <div id="root"></div>
    <style>
      .button {
        background-color: #4caf50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }

      .button2 {
        background-color: #008cba;
      } /* Blue */
      .button3 {
        background-color: #f44336;
      } /* Red */
      .button4 {
        background-color: #e7e7e7;
        color: black;
      } /* Gray */
      .button5 {
        background-color: #555555;
      } /* Black */
    </style>
    <script type="text/babel">
      function Button({ className ="", color, style, ...rest }) {
        return (
          <button
            className={`button ${className}`}
            style={{ backgroundColor: color, borderRadius: 8, ...style}}
            {...rest}
          />
        )
      }

      const rootElement = document.getElementById("root");
      //const element = <h1 className="title">Hello</h1>;
      const element = (
        <>
          <Button style={{ borderRadius: "50%" }}>Green</Button>
          <Button color="blue" style={{ borderRadius: 8 }}>Blue</Button>
          <Button color="red">Red</Button>
          <Button color="gray">Gray</Button>
          <Button color="black">Black</Button>
        </>
      );

      ReactDOM.render(element, rootElement);
    </script>
  </body>
</html>

2. Ref로 Dom 다루기

  • Ref를 refference의 줄임말

  • input 태그 만들기

<!DOCTYPE html>
<html lang="ko">
  <body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <div id="root"></div>

    <script type="text/babel">
      const rootElement = document.getElementById("root");
      const App = () => {
        return (
          <>
            <input />
          </>
        );
      };

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

  • focus 적용하기
<script type="text/babel">
      const rootElement = document.getElementById("root");
      const App = () => {
        React.useEffect(() => {
          document.getElementById("input").focus();
        }, []);

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

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

아래와 같은 코드를 입력하면 포커스가 바로 생긴다.

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

  • 다른 방법
<!DOCTYPE html>
<html lang="ko">
  <body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <div id="root"></div>

    <script type="text/babel">
      const rootElement = document.getElementById("root");
      const App = () => {
        const inputRef = React.useRef();
        React.useEffect(() => {
          inputRef.current.focus();
          // document.getElementById("input").focus();
        }, []);

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

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

  • 특정시간이 지나면 박스 색 바꾸기(ref사용)
<!DOCTYPE html>
<html lang="ko">
  <body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <div id="root"></div>

    <script type="text/babel">
      const rootElement = document.getElementById("root");
      const App = () => {
        const inputRef = React.useRef();
        const divRef = React.useRef();
        React.useEffect(() => {
          inputRef.current.focus();
          // document.getElementById("input").focus();

          setTimeout(() => {
            divRef.current.style.backgroundColor = "pink";
          }, 1000);
        }, []);

        return (
          <>
            <input ref={inputRef} />
            <div
              ref={divRef}
              style={{ height: 100, width: 300, backgroundColor: "brown" }}
            />
          </>
        );
      };

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

그렇다면 react는 왜 .useRef()를 제공했을까?
-> 리액트가 스스로 관장하고 있는 그 틀 안에서 무엇인가를 도당하고 관장하기를 위해서 제공

Ref로 Dom 다루기

3. form 다루기

<!DOCTYPE html>
<html lang="ko">
  <body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <div id="root"></div>

    <script type="text/babel">
      const rootElement = document.getElementById("root");
      const App = () => {
        const handleSubmit = (e) => {
          e.preventDefault();

          console.dir(e.target);
          alert(
            `FitstName: ${e.target.elements.fname.value}, LastName: ${e.target.elements.lname.value}`
          );
        };
        return (
          <>
            <form onSubmit={handleSubmit}>
              <label htmlFor="fname">First name:</label>
              <br />
              <input type="text" id="fname" name="fname" defaultValue="John" />
              <br />
              <label htmlFor="lname">Last name:</label>
              <br />
              <input type="text" id="lname" name="lname" defaultValue="Doe" />
              <br />
              <br />
              <input type="submit" value="Submit" />
            </form>
          </>
        );
      };

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

console.dir을 이용해서 값을 찾는다.

  • form2
<!DOCTYPE html>
<html lang="ko">
  <body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <div id="root"></div>

    <script type="text/babel">
      const rootElement = document.getElementById("root");
      const App = () => {
        const handleSubmit = (e) => {
          e.preventDefault();

          console.dir(e.target);
          alert(
            `FitstName: ${e.target.elements.fname.value}, Choosed Car: ${e.target.elements.cars.value}`
          );
        };
        return (
          <>
            <form onSubmit={handleSubmit}>
              <label htmlFor="fname">First name:</label>
              <br />
              <input type="text" id="fname" name="fname" defaultValue="John" />
              <br />
              <label htmlFor="cars">Choose a car:</label>
              <select id="cars" name="cars">
                <option defaultValue="volvo">Volvo</option>
                <option defaultValue="saab">Saab</option>
                <option defaultValue="fiat">Fiat</option>
                <option defaultValue="audi">Audi</option>
              </select>
              <input type="submit" value="Submit" />
            </form>
          </>
        );
      };

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

uncontrolled vs conterolled

<!DOCTYPE html>
<html lang="ko">
  <body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <div id="root"></div>

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

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

        const handleSubmit = (e) => {
          e.preventDefault();
          alert(phoneNumber);
        };

        const handleChange = (e) => {
          if (e.target.value.startsWith(0)) {
            setMessage("Phone Number is valid");
            setPhoneNumber(e.target.value);
          } else if (e.target.value.length === 0) {
            setPhoneNumber("");
            setMessage("");
          } else {
            setMessage("Phone Number should start with 0");
          }
        };

        return (
          <>
            <form onSubmit={handleSubmit}>
              <label htmlFor="phone">Phone Number:</label>
              <br />
              <input
                type="text"
                id="phone"
                name="phone"
                onChange={handleChange}
                value={phoneNumber} //controlled
              />
              <p>{message}</p>
              <br />
              <br />
              <button
                type="submit"
                disabled={
                  phoneNumber.length === 0 ||
                  message !== "Phone Number is valid"
                }
              >
                Submit
              </button>
              <p>{phoneNumber}</p>
            </form>
          </>
        );
      };

      ReactDOM.render(<App />, rootElement);
    </script>
  </body>
</html>
  • 처음

  • 0이 아닌 다른걸로 시작할 때

  • 0 으로 시작할 때

  • 다 지웠을때 버튼 disable

4. chatch error 다루기

<!DOCTYPE html>
<html lang="ko">
  <body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <div id="root"></div>

    <script type="text/babel">
      const rootElement = document.getElementById("root");
      const Child = () => {
        throw new Error("Something Wrong...");
        return <p>Child...</p>;
      };

      const App = () => {
        return (
          <>
            <p>App</p>
            <Child />
          </>
        );
      };

      ReactDOM.render(<App />, rootElement);
    </script>
  </body>
</html>
  • throw로 에러를 발생시킨다.

ErrorBoundary

<!DOCTYPE html>
<html lang="ko">
  <body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <div id="root"></div>

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

      class ErrorBoundary extends React.Component {
        state = { error: null };
        static getDerivedStateFromError(error) {
          return { error };
        }

        render() {
          const { error } = this.state;
          if (error) {
            return <this.props.fallback error={error} />;
          }

          return this.props.children;
        }
      }

      const Child = () => {
        throw new Error("Something Wrong...");
        return <p>Child...</p>;
      };

      const Fallback = ({ error }) => {
        return <p>{error.message}</p>;
      };

      const App = () => {
        return (
          <>
            <p>App</p>
            <ErrorBoundary fallback={Fallback}>
              <Child />
            </ErrorBoundary>
          </>
        );
      };

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

Error 다루기

profile
koseony
프론트엔드 개발자
이전 포스트

[TIL] 220504 react맛보기 - element, jsx

다음 포스트

[TIL] 220512 - 리액트 맛보기(key, lifting, 데이터 Fetch)

0개의 댓글