[React] UseState 와 await/async

---

작업을 하다 보니 다음과 같은 상황이 발생했다. usestate를 사용해서 state를 선언한 후 setState로 값을 변경하고 그 변경한 값을 바로 이용해서 다른 값을 바꿔 줘야 하는 상황이 생겼다. 이 부분에 있어서 React가 익숙하신 분들은 바로 어떤 상황인지 감이 잡히고 어떻게 대처하면 되는지도 바로 떠오르시겠지만 나는 React가 익숙하지 않았기 때문에 여러 자료들을 찾아보게 되었다.

---

먼저, 작업하던 상황은 다음과 같았다. (실제 작업한 코드와 비슷하게 작성한 코드이다.)

 

const doing = async (params) => {
	const [finalDate, setFinalDate] = useState([]);	//array 값의 state
	const [startDate, setStartDate] = useState();	//startDate 값
	const [endDate, setEndDate] = useState();	//endDate 값

	const operation = async (params) => {
		const date = [];	//array로 state를 넘겨 주기 위해 새로 선언
		date[0] = startDate;	//0번째 인덱스는 시작날짜
		date[1] = endDate;	//1번째 인덱스는 종료날짜
        
		setfinalDate(date);
		params.date = finalDate;
   
		...
	}
    
    ...
    
}

 

작성하던 코드를 조금 더 설명하자면,

1) 다른 컴포넌트에서 startDate와 endDate의 값을 setState를 이용해서 값을 변경하고

2) 이 값들을 operation에서 date라는 array로 묶어서 finalDate의 값을 변경하고

3) params의 date 값을 바꿔주는 것이 목표이다.

 

위와 같이 

단순히 params의 date 값을 바꾸려는 것이면 params.date = date 를 해 주면 되는 간단한 문제이다.

하지만, 나는 useState를 너무 사용하다 보니 여기에 집중해버려서 계속 useState를 사용하기 위해 여러 자료를 찾아보았다.

 

 

 

eunajjing.github.io/2019/06/04/antd/#getFieldDecorator-quot-id-quot-option-lt-component-gt

medium.com/@shlee1353/%EB%A6%AC%EC%95%A1%ED%8A%B8-hooks-usestate-4%EA%B0%80%EC%A7%80-%EC%83%81%EC%9A%A9%EB%B0%A9%EB%B2%95-dfe8b2096750

dodokim.medium.com/setstate-%EB%8A%94-await%EC%99%80-%EC%82%AC%EC%9A%A9%EC%9D%B4-%EA%B0%80%EB%8A%A5%ED%95%A0%EA%B9%8C-7b02581f6df4