12. useEffect(), fetch()로 API 호출

1. dummy를 지우고 days라는 state를 만든다 (useState()이용)

2. const [days, setDays]=useState([]) : 빈 배열로 처음값 state를 만든다

3. useEffect() Hook 이용 : 어떤 상태값이 바뀌었을 때 동작하는 함수를 작성할 수 있다.

(첫번째 매개변수로 함수, 함수가 호출되는 타이밍은 랜더링 결과가 실제 돔에 반영된 직후, 컴포넌트가 사라지기 직전에도)

4. 클릭이벤트를 만들어서 클릭할 때마다 state를 변경시켜줄 것이다.

버튼 누를 때마다 숫자 변하도록

 

이렇게 하면 원하지 않는 상황에서 useEffect() 함수가 동작할 수 있다.

그래서 useEffect(()=>{},두번째매개변수); 두 번째 매개변수에 의존성 배열을 넣어준다 (의존성 변수가 변경되었을 때만 실행되도록 해준다.)

-> count값이 변경되었을 때만 useEffect()함수가 실행된다. 

 

랜더링이 완료되고 최초의 한 번만 useEffect() 동작하도록 하기 위해서 두번째 매개변수 의존성 배열에 빈배열 하나만 넣으면된다.

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

export default function DayList(){
    const [days, setDays]=useState([]);
    const [count,setCount]=useState(0);

    function onClick(){
        setCount(count+1);
    }
    function onClick2(){
        setDays([
            ...days,
            {
                id:Math.random(),
                day:1
            }
        ]);
    }
    useEffect(()=>{
        console.log('change');
    },[count]);

    return(  
        <>
            <ul className="list_day">
                {days.map(day=>(
                    <li key={day.id}>
                        <Link to={`/day/${day.day}`}>Day {day.day}</Link>
                        
                    </li>
                ))}
                
            </ul>
            <button onClick={onClick2}>DayChange</button>
            <button onClick={onClick}>{count}</button>
        </>
        );
}

 

 

5.API 호출 (API 비동기 통신을 위한 fetch() 이용)

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

export default function DayList(){
    const [days, setDays]=useState([]);
    
    useEffect(()=>{
        //fetch() 이용하면 Promise 반환 된다.
        fetch("http://localhost:3001/days")
        .then(res => {
            return res.json();
        })
        .then(data => {
            setDays(data);
        });
    },[]);

    return (<ul className="list_day">
                {days.map(day=>(
                    <li key={day.id}>
                        <Link to={`/day/${day.day}`}>Day {day.day}</Link>
                        
                    </li>
                ))}
                
            </ul>
    );
}

 

6. dummy로 사용하던 데이터들 다 교체

import { useEffect, useState } from 'react';
import { useParams } from 'react-router';
import Word from './Word';


export default function Day(){
    const a=useParams();
    console.log(a);

    const day=a.day;
    //dummy.word 대신 fetch를 이용하여 데이터를 불러올 것이다. 
    const [words,setWords]=useState([]);
    
    // useEffect()로 한 번만 실행해주도록 하여 서버에 있는 json 데이터 받아오기
    useEffect(()=>{
        //fetch() 이용하면 Promise 반환 된다.
        fetch(`http://localhost:3001/words?day=${day}`)
        .then(res => {
            return res.json();
        })
        .then(data => {
            setWords(data);
        });
    },[]);
    return (
    <>
    <h2>Day {day}</h2>
        <table>
            <tbody>
                {words.map(word=>(
                    <Word word={word} key={word.id}/>
                ))}
            </tbody>

        </table>
    </>
    );
}