리액트 맛보기 4

---

목차

1️⃣ 리액트 Element에 스타일 입히기

2️⃣ Ref로 DOM 다루기

3️⃣ Form 다루기

4️⃣ Error 다루기

리액트 Element에 스타일 입히기

---

예제) 버튼에 style 적용하기

이런식으로 입력받는 값을 <button> 태그와 백틱으로 묶어서 return함!

📌 {...rest}

잔여 연산자
➡️ 입력받는 값들을 모두 태그 안에 설정해줌

Ref로 돔 다루기

---

useRef

특정 DOM을 선택할때 사용됨 (근데 Dom 뿐만 아니라 변수들도 선택가능)
(javascript에서의 getElementById, querySelector와 같은 DOM Selector임)

예제) useRef를 이용해서 박스 색깔 바꾸기

function App() {

  const inputRef = React.useRef();

  React.useEffect(()=>{
    setTimeout(()=>{
      inputRef.current.style.backgroundColor = "green";
    },1000);
  })

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

useRef()로 생성되어 만들어진 값은, .current로 접근할 수 있다.

왜 useRef를 사용할까?

React가 스스로 관장 하고있는 logic이 있는데, (재조정이라던지 virtual DOM이라던지...)
우리가 document.getElementId 등등 으로 그 값을 직접적으로 지정하면, 비효율이 생김.

Form 다루기

---

w3school 문서

예제) validation 체크하기

최종 정리

Error 다루기

---

try catch로 이루어짐

ErrorBoundary

error가 났을때 그 값을 fallback 으로 넘겨줄 수 있다.
(Fallback : Error가 났을때 보여줄 컴포넌트)

클래스 컴포넌트로 구현함

🍯 Honey Tips

console.dir() 을 찍어보면, 입력받는 구조가 나옴!

🧑🏻‍💻 오늘의 회고

요새 학원 커리큘럼상 React 강의를 듣다가 강의 자체가 바뀌기도하고,
또 실강과 온라인 강사님이 다르다보니깐 다소 정신없었던 것 같다.
React 하나를 집중해서 파고 또 파야 하는데 '어떤 삽으로 팔까' 라는 고민으로 시간을 날린 느낌이였다.

그래도 이제 어느정도 커리큘럼이 확정 되었으니, 온라인 강의를 중심으로 먼저 훑어봐야겠다.
그리고 React를 공부하면서 궁금했던 부분들이 해소되니까 동기부여가 더 잘 되는 느낌이였다.
지금까지는 튜토리얼이였으니, 이제부터 진짜 React 하나만 죽어라 파보자!! 👷🏻‍♂️ ⛏ 💎