[21.11.01] 에러핸들링 (김지윤) - Company 마이페이지의 체크박스 데이터

## 문제 상황 및 에러 로그

- 이벤트 함수 내에서 setState를 사용했으나, 다음 줄에서 여전히 state가 변경되지 않음

- 이벤트 함수 내에서 또 다른 이벤트 함수를 사용했으나, 마찬가지로 변경전인 state를 사용하여 연산함

### 에러 코드

- return 문은 생략

- 수요일~일요일 정보를 담는 state와 함수는 생략

- 클릭이벤트를 통해 monHandler와 tueHandler가 먼저 실행됨
```js
export default function CompanyMyPage () {

// 체크박스에서 선택된 요일을 배열로 담기 위한 state
const [day, setDay] = useState([])

// 선택된 각 요일을 나타내는 state
const [mon, setMon] = useState([])
const [tue, setTue] = useState([])

// 각 요일의 체크 여부
const [monChecked, setMonChecked] = useState(false)
const [tueChecked, setTueChecked] = useState(false)

// 체크된 요일을 day state에 모아주는 핸들러
const dayHandler = () => {
setDay([...mon, ...tue, ...wed, ...thu, ...fri, ...sat, ...sun])
}

// 클릭을 통해 월요일 정보를 mon state 에 추가하거나 빼는 핸들러
const monHandler = () => {
setMonChecked(!monChecked)
if(monChecked) { // 위 setMonChecked가 있지만 monChecked는 아직 변경되지 않음
setMon(["월"])
} else {
setMon([])
}
dayHandler() // 위에 setMon이 있지만 아직 mon state가 변경되지 않음
}

// 클릭을 통해 화요일 정보를 tue state 에 추가하거나 빼는 핸들러
const tueHandler = () => {
setTueChecked(!tueChecked)
if(tueChecked) { // 위 settueChecked가 있지만 tueChecked는 아직 변경되지 않음
setTue(["화"])
} else {
setTue([])
}
dayHandler() // 위에 setTue이 있지만 아직 tue state가 변경되지 않음
}

return (

)
}
```

## 원인 및 해결방안

- 원인

- 실행 순서를 확인하니, monHandler 함수 내의 연산이 다 끝난 이후에 setMon을 통해 mon state가 변경됨

- monHandler 내의 이벤트 함수인 dayHandler 또한 mon state가 변경되기 전에 실행됨

- 이벤트함수 내의 setState는 해당 함수가 실행된 이후에 적용되어, 함수 내부의 연산은 setState의 영향을 받지 않음

- 해결방안

- state 변경 전이므로, if 조건문 내부의 state에 '!'를 붙여 의도된 조건문이 발동되게 하기

- 첫번째 이벤트 함수가 끝난 후에 두번째 이벤트 함수가 실행되도록, useEffect로 두 번재 이벤트 함수 실행하기

- 이 useEffect의 발동 조건은 첫번째 이벤트 함수를 통해 변경되는 state가 되어야 함

```js
export default function CompanyMyPage () {

// 체크박스에서 선택된 요일을 배열로 담기 위한 state
const [day, setDay] = useState([])

// 선택된 요일을 나타내는 state
const [mon, setMon] = useState([])
const [tue, setTue] = useState([])

// 각 요일의 체크 여부
const [monChecked, setMonChecked] = useState(false)
const [tueChecked, setTueChecked] = useState(false)

// 체크된 요일을 day state에 모아주는 핸들러
const dayHandler = () => {
setDay([...mon, ...tue, ...wed, ...thu, ...fri, ...sat, ...sun])
}

// 클릭을 통해 월요일 정보를 mon state 에 추가하거나 빼는 핸들러
const monHandler = () => {
if(!monChecked) { // setMonChecked를 통해 변경되기 전인 초기 state를 조건으로 사용
setMon(["월"])
} else {
setMon([])
}
setMonChecked(!monChecked)
}

// 클릭을 통해 화요일 정보를 tue state 에 추가하거나 빼는 핸들러
const tueHandler = () => {
if(!tueChecked) { // setTueChecked를 통해 변경되기 전인 초기 state를 조건으로 사용
setTue(["화"])
} else {
setTue([])
}
setTueChecked(!tueChecked)
}

// 요일 state가 변경 이후에 dayHandler를 실행
useEffect(() => {
dayHandler()
}, [mon, tue, wed, thu, fri, sat, sun]) // 변경된 요일 state를 실행 조건으로 설정

return (

)
}
```