CHECK POINT

1)useEffect 안 코드는 렌더링 다 되고 나서 실행된다.

2){} 빈 객체, [] 빈 배열은 truthy값이다

3) true, false는 console.log([])로 확인하는 게 아니라 console.log(![])로 확인

4) && 연산자는 첫 falsy값 또는 둘다 truthy값이면 마지막 truthy값을 반환

아래와 같은 mock data mock.json이 public폴더아래에 있다

{
  "users": [
    {
      "id": 1,
      "name": "Leanne Graham",
      "username": "Bret",
      "email": "Sincere@april.biz",
      "address": {
        "street": "Kulas Light",
        "suite": "Apt. 556",
        "city": "Gwenborough",
        "zipcode": "92998-3874",
        "geo": {
          "lat": "-37.3159",
          "lng": "81.1496"
        }
      },
      "phone": "1-770-736-8031 x56442",
      "website": "hildegard.org",
      "company": {
        "name": "Romaguera-Crona",
        "catchPhrase": "Multi-layered client-server neural-net",
        "bs": "harness real-time e-markets"
      }
    },
    {
      "id": 2,
      "name": "Ervin Howell",
      "username": "Antonette",
      "email": "Shanna@melissa.tv",
      "address": {
        "street": "Victor Plains",
        "suite": "Suite 879",
        "city": "Wisokyburgh",
        "zipcode": "90566-7771",
        "geo": {
          "lat": "-43.9509",
          "lng": "-34.4618"
        }
      },
      "phone": "010-692-6593 x09125",
      "website": "anastasia.net",
      "company": {
        "name": "Deckow-Crist",
        "catchPhrase": "Proactive didactic contingency",
        "bs": "synergize scalable supply-chains"
      }
    },
    {
      "id": 3,
      "name": "Clementina DuBuque",
      "username": "Moriah.Stanton",
      "email": "Rey.Padberg@karina.biz",
      "address": {
        "street": "Kattie Turnpike",
        "suite": "Suite 198",
        "city": "Lebsackbury",
        "zipcode": "31428-2261",
        "geo": {
          "lat": "-38.2386",
          "lng": "57.2232"
        }
      },
      "phone": "024-648-3804",
      "website": "ambrose.net",
      "company": {
        "name": "Hoeger LLC",
        "catchPhrase": "Centralized empowering task-force",
        "bs": "target end-to-end models"
      }
    }
  ]
}

App.js

import { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [data, setData] = useState({});

  useEffect(() => {
    fetch("/mock.json")
      .then((res) => res.json())
      .then((res) => setData(res));
  }, []);

  return (
    <div className="App">
      <h1>Hello useEffect!</h1>
      <h2>조건부 렌더링 연습 문제</h2>
      <ul>
        {data.users.map((user) => {
           return <li key={user.id}>{user.username}</li>;
          })}
      </ul>
    </div>
  );
}

CASE 1)

App.js를 실행시키면 이런 에러가 뜬다.

useEffect는 렌더링이 된고 나서 실행되는데
App.js 렌더링 과정을 살펴보면 useEffect가 실행도 안 됐는데 return문에서 undefined인 data.users에 map을 사용해서 에러가 뜨는 거다.

CASE 2)

그래서 코드를 아래와 같이 바꾸면

{data &&
   data.users.map((user) => {
   return <li key={user.id}>{user.username}</li>;
   })}

여전히 오류뜬다. 왜냐면 data는 지금

const [data, setData] = useState({});

{}빈 객체라 true값이라 또 뒤에 게 실행됨

CASE 3)

코드를 아래처럼 바꾸면 오류없이 실행됨

{data.asdf &&
   data.users.map((user) => {
   return <li key={user.id}>{user.username}</li>;
   })}

빈객체 data 안에 data.asdf가 없으니 data.asdf는 false라 data.asdf가 반환되는 중이다. 하지만 우리는 뒤에 걸 원하니

CASE 4)

코드를 아래처럼 바꾸면

{data.users &&
          data.users.map((user) => {
            return <li key={user.id}>{user.username}</li>;
          })}

• 첫 렌더링 때 빈 객체 data 의 data.users는 false
• 이후 useEffect가 실행되고 data는 {users: [{...},{...},{...},{...}]}로 update됨
• state가 update돼 렌더링
• data = {users: [{...},{...},{...},{...}]} 인 상태로 위코드 재실행
• && 연산자 양옆이 모두 참이니 뒤에게 반환