패스트캠퍼스 챌린지 4일차 - 리액트 element 다루기

 

Element에 style 입히기

 

     - 이미 html 태그로 정의되어있는 element는 class 를 인식하지만,

       커스텀 element는 class를 인식하지 못하기 때문에 className으로 사용한다.

     - style 적용은 className을 사용하여 css를 작성하는 것과 인라인으로 주입하는 방법이 있다.

     - 인라인으로 주입할 때는 객체형식으로 작성해야하며, 속성명은 카멜케이스로 작성해야한다.

     - 커스텀 컴포넌트 형식으로 작성하여 적용할때는 태그 내에 모든 것들이 props로 전달되기 때문에,

       전체를 사용할때는 파라미터 객체로 받고, 부분 사용시에는 비구조할당으로 받는다. { className } 등

 

---

 

Ref로 DOM 다루기

 

강의에서 useRef에 대한 설명이 너무 간단해서 공식문서를 참고했다.

DOM을 직접적으로 다뤄야할 때 Ref를 사용하고, 그 외 간접적 접근이 필요할땐 props를 이용하여 해결해야한다.

 

createRef와 useRef의 차이점

 

createRef로 생성된 ref 객체는 DOM element와 클래스 컴포넌트의 인스턴스를 current 프로퍼티 값으로 받기 때문에,

인스턴스가 생성되지 않는 함수형 컴포넌트에서는 createRef를 사용할 수 없다.

따라서 함수형 컴포넌트에서는 리액트 훅에서 ref와 동일한 기능을 제공하는 useRef를 사용한다.

---

Form 다루기

 

event.preventDefault();

 

form태그 속성 중 action을 기재하면 submit 시에 해당 url로 form-data가 전송되는데,

action이 주어지지 않더라도 button의 submit은 기본동작이 되기 때문에 깜빡임 현상이 일어난다.

이를 방지하기 위해 onSubmit으로 submit 핸들러 함수를 지정해서 기본이벤트를 제거해주는 event.preventDefault(); 를 사용해준다.

 

이외 리액트에서는 close태그가 없을 경우 error 가 발생되고, label 태그의 for도 htmlFor로 변경해주어야 정상 작동된다.

 

유효성 검사 validation check

 

validation은 submit에서도 onChange에서도 가능하지만 조금더 나은 사용자 경험을 위해 onChange에서 하는 것이 좋다.

onChange시 validation check를 진행하려면 input의 value를 직접 관리(controlled)해야 한다.

 

직접 관리시에는 onChange 속성을 부가해야하며, value 속성을 사용

관리하지 않을시에는 defaultValue 속성 또는 value관련 속성을 부가하지 않는다. (자동으로 change event가 적용됨)

---

See the Pen error Boundary by BEGINNERWW (@beginnerww) on CodePen.

 

Error 다루기

 

렌더링 중에 하위 컴포넌트의 에러발생으로 페인팅 자체가 안되는 현상을 막기위해 ErrorBoundary가 적용되었다. 

(자바스크립트의 catch 구문과 유사한 기능)

React 생명주기 메소드  static getDerivedStateFromError() 와 componentDidCatch() 둘 중 하나 이상을 정의하면 해당 클래스 컴포넌트는 ErrorBoundary 컴포넌트가 된다.

 

적용되지 않는 에러

 

  - 이벤트 핸들러 (더 알아보기)
  - 비동기적 코드 (예: setTimeout 혹은 requestAnimationFrame 콜백)
  - 서버 사이드 렌더링
  - 자식에서가 아닌 에러 경계 자체에서 발생하는 에러

 

 

 

---

 

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

---

같이 읽으면 좋은 글  👇👇👇 

공식문서 ref와 DOM

공식문서 Hooks api - useRef

공식문서 ErrorBoundary