useState, useEffect 동작 퀴즈 1

Q) 다음 콘솔에 출력되는 값은?

import { useEffect } from "react";
import { useState } from "react";
export default function App() {
    const [state, setState] = useState(0);

    console.log("state : " + state);

    useEffect(() => {
        setState(1);
    }, [state]);

    return <div className="App">App<div>;
}

문제 설명

• useState와 useEffect의 동작 순서, 동작 방식을 알고 있는지?
• 리액트 라이프사이클

---

문제

import { useEffect } from "react";
import { useState } from "react";
export default function App() {
    const [state, setState] = useState(0);

    console.log("state : " + state);

    useEffect(() => {
        setState(1);
    }, [state]);

    return <div className="App">App<div>;
}

해답

state : 0
state : 1
state : 1

해설

• useState가 비동기적으로 일어남을 아는가
• 실행 순서
  • 첫번째 렌더링
    1. 최초 렌더링 시에 함수가 실행된다.
    2. useState(0) 실행되고 실행 결과로 state에는 0이 반환된다.
       • 초기값이 세팅됨
    3. state : 0 출력
    4. useEffect로 함수가 전달된다.
       • 함수의 실행이 아닌 함수 선언의 전달
       • () => { setState(1); } 부분을 말하는 것
       • useEffect는 렌더링 이후에 실행됨
    5. 렌더링 끝나고 useEffect에 전달한 함수가 실행된다.
       • 의존성 배열 보고 실행 판단
       • 전 값은 undefined고 후 값은 0
       • 두 값이 달라서 상태가 변경됐으니 실행
    6. setState(1) 실행됨
  • 두번쨰 렌더링
    1. 상태값 변경으로 리렌더링 발생
    2. useState(0) 실행되고 실행 결과로 state에는 1이 반환된다.
       • 이 1은 바뀔 값
       • 내부 상태값은 아직 0
         • 아닐수도 있다!
    3. state : 1 출력
    4. useEffect로 함수가 전달된다.
       • () => { setState(1); } 전달
    5. 렌더링 끝나고 useEffect에 전달한 함수가 실행된다.
       • 의존성 배열 보고 실행 판단
       • 전 값은 0, 후 값은 1
    6. setState(1) 실행
    7. 아직 실제 state는 1이 아닌 상태로 리렌더링이 발생
  • 세번째 렌더링
    1. useState(0) 실행되고 실행 결과로 state에는 1이 반환된다.
    2. state : 1 출력
    3. useEffect로 함수가 전달된다.
    4. 렌더링 끝나고 useEffect에 전달한 함수 실행 안됨
       • 의존성 배열 보고 실행 판단
       • 1이고 1이기 때문에 안바꼈네? 실행안함
       • 상태가 1인데 1로 바꿨기 때문에 변화가 없다고 판단. 리렌더링 발생하지 않음.첨언
• 퀴즈를 위한 코드인거지 useEffect 의존성 배열에 넣은 값을 useEffect 안에서 다시 수정하는 코드는 상당히 문제가 될만한 코드다.
• 예제에서는 1로 변경하지만 실제로는 1이 아닌 계속 변화하는 값이 설정되기 때문

질문

• #질문 원시값은 리액트가 체크해주는거 알겠는데 객체나 배열도 그렇게 해주나?
  • 궁금하다.