React

SNS Project

프로젝트를 하던 중 황당한 문제를 맞이했다.

API연동하기 위해 useState 값을 지정하던 중

const MainPage = props => {
  const [selected, setSelected] = useState('')
  
  const handleSelect = e => {
    setSelected(e.target.value)
    console.log(selected) // 여기 콘솔을 찍어버리면 안되지
  }
  console.log(selected) // 이곳이 맞아!
  
  return (
  	<CommonDropdown
            onChange={handleSelect}
            name="search"
            options={[
              { text: '사용자', value: '사용자' },
              { text: '게시글', value: '게시글' },
            ]}
            value={selected}
          />
  )
}

dropdown버튼을 클릭해서 해당 값을 콘솔로 찍어보는 과정에서
handleSelect 이벤트 함수 안에서 실행을 했다.
콘솔창에는 값을 바꿀 때마다 계속 반댓값이 나왔고
값이 반대로 나오는 현상이 황당했다...

바뀐 state값을 출력해야 하는데 값이 바뀌기 전에 콘솔을 찍어버리니까 나타나는
당연한 결과였던 것이다...

바뀐 상태값을 출력할 때에는 함수 밖에서 실행하도록 정신을 똑바로 차리자!!