useEffect
useEffect는componentDidMount(),componentDidUpdate(),componentWillUnmount()의 역할을 한다.
useEffect( function , [])
- 첫번째 인자 =
componentDidMount()와 비슷한 기능. function을 실행시킨다. - 두번째 인자 =
deps (dependency)[]안에 값을 입력하면 그 값이 변할때만 첫번째 인자의 함수를 실행시킨다.
빈 배열[]을 두 번째 인수로 넘기면 재실행되어야 할 필요가 없음을 뜻 하게 됨.
componentWillUnmount() = return () => {...} 방식으로 unmount 할 수 있다. 괄호 안에 들어갈 함수가 unmount 시켜줌.
useEffect에서 eturn한 함수를cleanup function(클린업 함수)라고 부른다.
useRef
useRef는 컴포넌트의 요소를 선택할 수 있게해줌. 모든 컴포넌트들은refprop을 가지고 있다.
useRef는{current:HTMLHeadingElement}의 형식으로 값을 반환함. 차이점은 useRef는 매번 렌더링을 할 때 동일한 ref 객체를 제공함.
const title = useRef();
setTimeout(()=>title.current.focus())
return (
<div className="App">
<button ref={title}>Hello</button>
</div>
);위와 같은 상황에선 title.current.focus()가 undefined로 나오기에 에러가 발생함.
👉 이유는 mount가 너무 빨리 되면서 .current가 존재하지 않아서 그렇다.
해결방안은 setTimeout(()=>title.current?.focus())와같이 Optional chaining ?을 사용하면 해결.
또는 useEffect(()=>{setTimeout...})처럼 useEffect를 이용해 mount가 끝난 후 focus해주면 해결.
옵셔널 체이닝
?.이란???
?.은?.'앞’의 평가 대상이undefined나null이면 평가를 멈추고undefined를 반환함.
let user = null;의 경우
alert( user && user.address && user.address.street );
=alert( user?.address.street );둘다 동일하지만 간단하게 코드작성 가능.
만약user가 선언되지 않았다면 undefined가 아닌 에러가 발생하게 된다.
