TIL | React 클래스형과 함수형(Hooks)

2. word chain

📌 기억하고 있어야 할 점!

• 클래스 메서드는 무조건 arrow function(화살표 함수)로 만들어야 한다.
  내가 직접 만든 메서드는 화살표 함수를 사용하고, render처럼 처음부터 있었던 함수는 화살표 함수가 아니어도 된다.

• state가 바뀔 때마다 render() 함수가 재실행된다.
  재실행될 때마다 함수들이 다시 만들어지는 것이 아니라 참조되는 것
  메서드들을 render() 밖으로 빼줌으로써 좀 더 효율적일 수 있다.

• value와 onChange는 세트!
  value prop(속성)을 사용한다면 onChange 핸들러를 같이 사용해야 한다.
  (만약 onChange가 없으면 defaultValue 사용)

<input ref={this.onRefInput} value={this.state.value} onChange={this.onChangeInput} />
// or
<input ref={this.onRefInput} defaultValue={this.state.value} />

• 로딩과 핫 리로딩(기존 데이터 유지여부의 차이)
  • 로딩 : 새로고침되어 기존 데이터가 다 날라가고 새로 화면을 띄움
  • 핫 리로딩 : 기존 데이터 유지하면서 화면을 바꿔줌

---

• Class형을 리액트 Hooks로 바꾸기! (전체적인 코드가 줄어든다)
  • class 예약어를 const 예약어로 바꾸고 화살표 함수 형태로 만든다.
  • state는 useState를 이용하고, state 하나씩 따로 떼서 바꾼다.
  • 클래스 메서드들은 변수로 선언해줘야 한다.
  • render() 함수 필요 없다. 바로 return 한다.
  • state 사용하지 않으므로 this.state 삭제하고 바로 내가 설정한 state값만 작성한다.
  • Hooks를 쓰게 되면 (props 작성할 때) this 작성하지 않는다.
  • setState 쓰지 않고 state 변경 함수명 작성한다.
  • 변경되는 state가 여러개일 경우, 따로따로 하나씩 state 변경 함수명을 작성한다.
  • Hooks에서는 ref에 current를 항상 붙여줘야 한다.(ex. inputRef.current.focus(); )

• Console에서 볼 수 있는 단어의 의미 (Error debugging할 때 도움됨)
  • [HMR] : 핫 모듈 리로드. 어떤 컴포넌트가 바뀌어서 수정되는지를 알려줌
  • [WDS] : 웹팩 데브 서버. HMR 변경사항 받아서 WDS가 실제로 서버를 재시작하여 업데이트해줌

✨ 추가로 궁금한 점

1. ref prop(useRef Hook)을 사용하는 이유는?
2. target과 currentTarget의 차이

⁕ 출처: Youtube_Zerocho React 기본 강좌