여러 개 데이터 뽑아서 문서에 넣기

import React, { useEffect, useState } from 'react'

function Test(){
  const [users, setUsers] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(()=>{
    fetch("http://localhost:4000/users")
    .then((res)=>{
      return res.json();
    })
    .then((data)=>{
      setUsers(data);
      setLoading(false);
    })
    .catch(err=>{
      setLoading(false);
      console.log(err);
    })
  },[])

  console.log(users);

  return(
    <>
      <ul>
        {loading?null:(
          users.map((el)=>{
            return <li>{el.name}</li>
          })
        )}
      </ul>
    </>
  )
}
export default Test;

나는 좀 불편했다.

 

조금 논리적인 느낌이 아니랄까..

 

trigger 식으로 문서에 넣는다.

 

  const [users, setUsers] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(()=>{
    fetch("http://localhost:4000/users")
    .then((res)=>{
      return res.json();
    })
    .then((data)=>{
      setUsers(data);
      setLoading(false);
    })
    .catch(err=>{
      setLoading(false);
      console.log(err);
    })
  },[])

이렇게 loading처럼 뭔가 trigger가 있어야 한다.

useEffect()에 의존배열을 빈배열로 넣으면 처음 한번만 실행되므로, 

보통 저기 안에 뭔가 변수라던지 state라던지 써 넣으면 배열안에 넣어서 반환시키라고 경고 뜨는데 setState 하면 괜찮나 보다.

 

그리고, data를 제대로 넣는 순간에 저 loading이라는 trigger를 on 시켜 버린다.(loading을 false, 즉 끝났다고 하는거다.)

 

이게 state는 주기적으로 반복적으로 검사하는게 아니라, 바뀌었을 때만 관련 된 것들을 다시 호출하여 꽤 효율적이다.

 

여튼 그렇게 트리거를 바꾼다.

 

  <ul>
    {loading?null:(
      users.map((el)=>{
        return <li>{el.name}</li>
      })
    )}
  </ul>

그럼 여기서, 저거 리액트 삼항연산자? 인데

{조건? (태그) : (태그) }

이 형식 같은데, 

null이 들어갈 수 있는 것 같다.

 

만약 이거 없이 users에 접근하려고 하면 undefind기 때문에 오류가 뜬다.

아니면 다른 방법도 있다.

 

const [users, setUsers] = useState([]);

<ul>
{
  users.map((el)=>{
    return <li key={el.id}>{el.name}</li>
  })
}
</ul>​

이렇게 아예 시작부터 빈배열로 넣어버리면 된다.

 

그럼 undefinded는 아니기에, map은 작동한다. 다만 안에 들어있는게 없으므로 실행만 안될 뿐. 나는 이게 깔끔하다.

 

import React, { useEffect, useState } from 'react'

function Test(){
  const [users, setUsers] = useState([]);

  useEffect(()=>{
    fetch("http://localhost:4000/users")
    .then((res)=>{
      return res.json();
    })
    .then((data)=>{
      setUsers(data);
      // setLoading(false);
    })
    .catch(err=>{
      // setLoading(false);
      console.log(err);
    })
  },[])

  console.log(users);

  return(
    <>
      <ul>
        {
          users.map((el)=>{
            return <li key={el.id}>{el.name}</li>
          })
        }
      </ul>
    </>
  )
}
export default Test;

나는 이런 식이 깔끔하다.

 

 

물런 먼저것도 저렇게 하면 로딩창을 이쁘게 꾸밀 수 있는 장점도 있다.

 

여튼

const [users, setUsers] = useState([]);

빈 배열인 state를 하나 만든다, 그리고,

 

  useEffect(()=>{
    fetch("http://localhost:4000/users")
    .then((res)=>{
      return res.json();
    })
    .then((data)=>{
      setUsers(data);
      // setLoading(false);
    })
    .catch(err=>{
      // setLoading(false);
      console.log(err);
    })
  },[])

useEffect 저거 의존성 배열을 빈것으로 넣으면 처음에 한번만 실행되는데,

비동기로 받아오게 한다.

그때 state를 set해준다.

 

그러면 users가 바뀌면서 관련된 것들을 호출하게 되고,

  <ul>
    {
      users.map((el)=>{
        return <li key={el.id}>{el.name}</li>
      })
    }
  </ul>

이렇게 연관된 map도 다시 호출하게 된다.

 

빈배열 state만들어놨다가

비동기를 useEffect((),[]) 빈 의존성 배열로 처음만 실행되게끔 해서 저 빈배열인 state 안에 넣고,

 

그러면 관련된게 호출되는데,

  <ul>
    {
      users.map((el)=>{
        return <li key={el.id}>{el.name}</li>
      })
    }
  </ul>

이게 빈배열이 아니었으면 처음에 에러가 나기때문에 (왜냐하면 처음 호출도 값이 바뀌는 거니까.) users에는 useState로 빈 배열 넣어주고, 

저 useEffect((), []) 때 바뀌므로 저 users 관련된 것이 다시 호출되어 그 데이터들을 적어놓은 li 형식에 맞게 잘 뿌려준다.