JS 리액트 useEffect

useEffect

1. 빈 배열이 없으면 useEffect 안에 있는 로직은 매번 리랜더링
   2. 빈 배열이 있으면 useEffect 안에 있는 로직은 한 번만 실행
   3. 배열에 값이 있다면 배열 값이 바뀔 때 리랜더링.

빈 배열은 []이걸 뜻한다. 예시 코드를 보면

let AppCallCount = 0;

const App = () => {
  AppCallCount++;
    console.log(`App1 : ${AppCallCount} 번 실행`);

    const inputNameRef = useRef(null);
    const inputAgeRef = useRef(null);
    const [num, setNum] = useState(0);

    // setTimeout(() => inputNameRef.current.focus(), 1000);

    useEffect(() => {
        inputNameRef.current.focus();
    },[]);

    return (
        <>
            <input ref={inputNameRef} type="text" placeholder="이름"/>
            <hr/>
            <input ref={inputAgeRef} type="number" placeholder="나이"/>
            <hr/>
            <button onClick={() => {
                    setNum(num + 1);
                    inputAgeRef.current.focus();
                }}>증가 : {num}</button>
        </>
    );

};

ReactDOM.render(<App />, document.getElementById("root"));

여기서 focus();로 직관적으로 확인할 수 있다.

    useEffect(() => {
        inputNameRef.current.focus();
    },[]);

우선 이부분. 그리고

            <button onClick={() => {
                    setNum(num + 1);
                    inputAgeRef.current.focus();
                }}>증가 : {num}</button>

여기에 focus();가 존재한다.

그럼 증가버튼을 누르면 나이로 포커스 될 것이고 맨 처음 접속완료됐을 때는 이름으로 포커스 될 것이다.

왜? useEffect의 두번째 규칙, 2. 빈 배열이 있으면 useEffect 안에 있는 로직은 한 번만 실행 때문.

직접어떻게 되는지 보면 이해가 쉬울 것이다.

그럼 만약에 빈 배열 []이 없다면 어떻게 될까?

첫번째 규칙, 1. 빈 배열이 없으면 useEffect 안에 있는 로직은 매번 리랜더링, 에 의해서 증가버튼을 누르면 나이로 포커스했다가 곧바로 이름으로 다시 포커스 될 것이다. 직접 두개를 비교하면서 해보면 된다.

이제 이 둘을 이해했다면 세번째 규칙으로 넘어가면 된다.

    useEffect(() => {
        console.log('effect 1 : 최초에 한번만 실행');
    },[]); // props : 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용하는 속성

    useEffect(() => {
        console.log('effect 2 : 부모의 appNum가 바뀔때마다 실행');
    },[appNum]);

    useEffect(() => {
        console.log('effect 3 : 나(Sub) num가 바뀔때마다 실행');
    },[num]);

    useEffect(() => {
        console.log('effect 4 : appNum 혹은 num가 바뀔때마다 실행');
    },[appNum,num]);

    useEffect(() => {
        console.log('effect 5 : 매번 실행');
    });

이번엔 콘솔로그가 어떻게 찍히는가 확인하면 된다.

언제 실행되는가? 면 세변째 규칙, 3. 배열에 값이 있다면 배열 값이 바뀔 때 리랜더링. 에 의해서 어떤 값이 바뀌느냐에 따라 콘솔에 찍히는게 다를 것이다.

그래서 useEffet를 사용하면 조금 더 세밀하게 무언가를 실행하는 로직을 짤 수 있다는 것.

의존성 배열을 활용해서 실행 민감도를 조절할 수 있다가 핵심이 되겠다.