useEffect, fetch()로 API 호출

1. useEffect

react hook이며 어떤 상태값이 바뀌었을 때 동작하는 함수를 작성할 수 있음.

예시 1

import { useEffect, useState } from 'react';

export default function App(){
    const [count, setCount] = useState(0);
  	const [count2, setCount2] = useState(0);

    function onclick(){
        setCount(count + 1);
    }
  
  	function onclick2(){
        setCount2(count2 + 1);
    }

    useEffect(()=>{
        console.log('count change');
    }); //배열 아예 없음

    return (
        <>
            <button type='button' onClick={onclick}>{count}</button>
			<button type='button' onClick={onclick2}>{count2}</button>
        </>
    )
}

예시 2

의존성 배열
해당 예시에서 의존성 배열은 count임.
count가 변경됐을 때만 실행됨.

import { useEffect, useState } from 'react';

export default function App(){
    const [count, setCount] = useState(0);
  	const [count2, setCount2] = useState(0);

    function onclick(){
        setCount(count + 1);
    }
  
  	function onclick2(){
        setCount2(count2 + 1);
    }

    useEffect(()=>{
        console.log('count change');
    }, [count]); //의존성 배열 有

    return (
        <>
            <button type='button' onClick={onclick}>{count}</button>
			<button type='button' onClick={onclick2}>{count2}</button>
        </>
    )
}

예시 3

의존성 배열이 빈값인 경우 맨 처음 렌더링 됐을 때만 실행됨.

import { useEffect, useState } from 'react';

export default function App(){
    const [count, setCount] = useState(0);
  	const [count2, setCount2] = useState(0);

    function onclick(){
        setCount(count + 1);
    }
  
  	function onclick2(){
        setCount2(count2 + 1);
    }

    useEffect(()=>{
        console.log('count change');
    }, []); //의존성 배열 빈값

    return (
        <>
            <button type='button' onClick={onclick}>{count}</button>
			<button type='button' onClick={onclick2}>{count2}</button>
        </>
    )
}

1. 더미데이터들 json-server로 변경

API에서 list를 갖고 와서 바꿔주는 방법 사용(데이터가 바뀌면 자동으로 렌더링 됨)

import { Link } from 'react-router-dom';
import { useEffect, useState } from 'react';

export default function DataList(){
    const [days, setDays] = useState([]); //생성

    useEffect(()=>{ //생성
        fetch('http://localhost:3001/days')
        .then(res => {
            return res.json()
        })
        .then(data => {
            setDays(data);
        })
    }, []);

    return (
        <>
            <ul className='list_day'>
                {days.map((item)=>( //dummy -> days 변경
                    <li key={item.id}>
                        <Link to={'/day/' + item.day}>Day {item.day}</Link>
                    </li>
                ))}
            </ul>
        </>
    )
}

days 호출 완료!

/day/N 일 경우 불러오기

http://localhost:3001/words?day=1일 경우 day가 1인 애만 불러옴.
params를 이용해 day가 1인 애만 useEffect 해 옴(day가 새로고침 될 때)

const day = useParams().day;
const [words, setWords] = useState([]);

useEffect(()=>{ //생성
   fetch(`http://localhost:3001/words?day=${day}`) //중요
     .then(res => {
     return res.json()
   })
     .then(data => {
     setWords(data);
   })
 }, [day]);

return (
  <>
 	 <h2>day {day}</h2>
 	 <table>
      <tbody>
      {words.map((item)=>(
        <Word key={item.id} item={item} />
        ))}
      </tbody>
    </table>
  </>
)