state 수정 함수를 활용

[조승현]

안녕하세요 선생님
state 변경 함수 관련하여 궁금한게 있어 질문 드립니다.

state 수정 함수를 활용하여 변경을 진행하고 난 뒤 state 변경 함수 아래에서 해당 state를 콘솔 찍으면 수정하기 이전의
값이 찍힙니다.(제가 수정한 값보다 1이 낮은 값이 찍힙니다.)

ex) 아래 코드 중 제가 임의로 id state를 만들어서 h4 타이틀을 클릭하면 setId(i)로 map의 파라미터 인자를 활용하여 id 값을
변경해주었는데, app 컴포넌트 밖의 다른 컴포넌트에서는 해당 id 값이 즉각적으로 잘 찍히는거 같은데 map 함수 안에서 콘솔을
찍거나 if 조건문을 활용하면 id 값이 항상 이전 값으로 찍히고 있어 원인이 궁금하여 질문 드립니다.

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function Modal(props){

  let title = null;
  for(let i=0;i<props.title.length;i++){
    if(i==props.id){
      title = props.title[i];
    }
  }

  return(
    <div className="modal">
        <h4>{title}</h4>
        <p>날짜</p>
        <p>상세내용</p>
        <button>글수정</button>
    </div>
  )
}

function App() {

  let post = '강남 우동 맛집';
  let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  let [따봉, 따봉변경] = useState([]);
  const [modal, setModal] = useState(false);
  const [id, setId] = useState(0);
  const [num, setNum] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그임</h4>
      </div>
      <button onClick={ function(){
        const copy = [...title];
        copy.sort();
        setTitle(copy);
      } }>가나다순정렬</button>
      {
        title.map(function(a,i){
          return(
            <div key={i} className="list">
              <h4 onClick={(e)=>{
                setId(i);
                console.log(id)
                if(e.target){
                  setId(i);
                  setModal(true);
                  if(id == i){
                    setModal(false)
                  }
                }
              }}>{ a } <span onClick={
                (e)=>{
                  let copy = [...따봉];
                    if(따봉[i] == null){
                      copy[i] = 1;
                      따봉변경(copy);
                      console.log(따봉);
                    } else{
                      copy[i] = 따봉[i] + 1;
                      따봉변경(copy);
                      console.log(따봉);
                    }
                }
              }>👍 {따봉[i]}</span></h4>
              <p>2월 18일 발행</p>
            </div>
          )
        })
      }
      {modal === true ? <Modal title={title} id={id}/> : null}
    </div>
  );
}

export default App;

[codingapple]

state변경함수는 다른코드보다 늦게처리되어서 그거 밑의코드가 먼저 실행됩니다

[글쓴이]

글