비동기 처리 할려는데 도와주세요

React
1

영어 단어 외울 때 쓸려고 간단한 프로젝트를 진행중입니다.
알고리즘은

  1. 영어 단어를 input으로 하나하나 받아서 배열을 만든다.
  2. 다 받았다면 start를 눌러서 시작.
  3. 시작하면 영어 단어가 배열에 하나하나 나옴.
  4. 단어 나오면 3초간 떠 있다가 3초 지나면 5초간 아무 것도 안뜸.
  5. 5초가 지나면 다음 단어가 나옴.

이렇게 됩니다.
아래에 코드 참조해주세요.
지금 문제가 단어를 받고 start를 누르는 것 까지는 구현했는데 그 다음에 하나하나 찍을 때 딜레이를 어떻게 줘야 할 지 막막합니다.
코드는 create react-app 하고 약간만 다른거 약간만 수정한 app.js입니다. 코드 복붙해서 app.js에 복붙하면 실행 될거에요.

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [input, setInput] = useState('');
  const [wordList, setWordList] = useState([]);
  const [clicked, setClicked] = useState(false);
  const [result, setResult] = useState('');
  const start = () => {};
  if (!clicked) {
    return (
      <div>
        <form
          onSubmit={(e) => {
            e.preventDefault();
            setWordList((i) => i.concat(input));
            setInput('');
          }}
        >
          <input
            placeholder="put words here."
            value={input}
            onChange={(e) => {
              setInput(e.target.value);
            }}
          />
          <button type="submit">add</button>
        </form>
        <button
          onClick={() => {
            setClicked(true);
            start();
          }}
        >
          start
        </button>
        <div
          style={{
            display: 'flex',
          }}
        >
          {wordList.map((v, i) => {
            return (
              <h3 key={i + 1} style={{ marginRight: '10px' }}>
                {v}
              </h3>
            );
          })}
        </div>
      </div>
    );
  }
  return <h1>{result}</h1>;
};

export default App;
2

비동기처리를 어떻게 해야할 지 어렵네요.
처음에
const start = () => {

wordList.map(i=>{

  setTimeout(()=>{

    setResult(i);

  },2000);

})

};
이렇게 해봣는데 배열의 마지막 값만 나오더라고요.

3

setTimeout 은 시간 지연을 일으키는 비동기 코드입니다.
일정 주기별로 반복적인 함수실행을 하려고 할 땐 setInterval 이 있어요.
반복 실행을 종료할땐 clearInterval이 있습니다.

const [tick, setTick] = useState(0);

const my_interval = setInterval(() => {
  console.log(tick + '초 지남');
  
  if (tick > 98) {
    // 99초로 상태가 변경된 이후 그 다음 반복때 반복종료. (100초)
    clearInterval(my_interval)
  }

  setTick(tick + 1);
}, 1000) // 1초에 한번씩
4

올려주신 코드 써봤는데 왠지 모르겠는데 state로 tick 선언해서 하면 tick 값이 계속 0으로 나옵니다.
그리고 목적이 배열에 값 하나하나 setInterval 함수 돌때마다 바로 바껴야 되는데 setInterval로 해도 값이 setInterval 끝난 다음에 배열의 맨 마지막 값으로만 나옵니다.

5

제 코드를 컴포넌트에 그대로 쓰시면 안되고 interval 쓰는 부분을 useEffect 로 감싸주시거나, 사용자이벤트의 핸들러 함수로 만드셔야 합니다.

6

참고해서 만들었습니다. 감사합니다. 그런데 useEffect가 하는 역할이 뭔가요?

7

https://rinae.dev/posts/a-complete-guide-to-useeffect-ko 를 참고하세요