240615 리액트 스터디 : hooks

 

✓ useState 리턴값이 배열인 이유

- useState 리턴값인 배열은 0번째 인덱스에는 state, 1번째 인덱스에는 setter 함수로 구성

-> 배열이라 자유롭게 네이밍  ex. const [name, setName] = useState("hi");

- 객체의 경우 배열과 달리 인덱스가 아니라, 객체의 key를 가져와야 구조분해할당이 되기 때문

✓ useEffect

- 의존성 배열로 빈 배열 [] 을 주면 클린업 함수가 unmount 될 때 실행되는 효과

- 원래 클린업 함수(return)는 의존성 배열의 값이 변화(리렌더링)하거나, 언마운트 되었을 때 실행 

 

✓ useRef 를 null 로 초기화 하는 이유

- const ref = useRef(initialValue)

- 리액트 권장사항
- ref는 useRef가 실행되고, DOM이 렌더링될 때 까지 셋팅되지 않음 
- useRef는 변경할 수 있는(mutable) ref 객체를 반환하는데, ref.current는 파라미터 initialValue로 초기화 됨.

-> initialValue를 설정하지 않으면 ref.current = undefined 

error. TypeError: Cannot read properties of undefined (reading 'style') // 렌더링 전 접근 시도

-> initialValue null로 초기화 해서 값이 할당되기 전에 접근했을 때 발생하는 오류 방지 

- 컴포넌트가 렌더링 되기 전에 ref가 선언되므로, 차후 발생하는 렌더링 에러 방지

- null로 셋팅하여 나중에 값이 할당될 예정임을 나타냄