React useState 셀렉트 박스 선택값 설정 관련

Question

select 박스를 활용하여 useState에 상태 값을 설정하려고 하는데출발 국가를 선택하여 departCountry 상태 값을 확인했습니다.출발국가를 선택하면 해당 국가의 공항 목록이 나오고 값 중 하나를 선택한 후에 state 값을 확인해보니departIata라는 값이 설정되었지만 이전에 선택한 departCountry 값이 초기화가 되었습니다.그리고 셀렉트 박스의 목록 또한 사라졌습니다.해당 문제는 state 설정 함수에 각각 useCallback 함수를 사용한 후에 발생하였습니다.값이 리셋되는 원인을 잘 모르겠습니다.import { useCallback, useEffect, useMemo, useState } from "react" import SelectBox from "../../utils/selectBox" import FlightData from "./FlightData" import FlightDataSegments from "./FlightDataSegments" import {selectFlightOptionsType} from "./type" import DatePicker from "react-datepicker" import "react-datepicker/dist/react-datepicker.css"; import { ko } from "date-fns/locale" import styled from "styled-components" const FlightDiv = styled.div` display : flex; flex-diection : row; justify-content : center; align-items : center; ` export default function Flight(){ const[searchFlightOption, setSearchFlightOption] = useState({ departCountry : "", departIataCode : "", arriveCountry : "", arriveIataCode : "", checkedFlightDate: null , personNumber : "" }) const changeDepartCountry = useCallback((e : React.ChangeEvent) => { setSearchFlightOption({...searchFlightOption, departCountry : e.target.value}) },[]) const changeDepartIataCode = useCallback((e : React.ChangeEvent) => { setSearchFlightOption({...searchFlightOption, departIataCode: e.target.value}) },[]) const changeArriveCountry = useCallback((e : React.ChangeEvent) => { setSearchFlightOption({...searchFlightOption, arriveCountry : e.target.value}) },[]) const changeArriveIataCode = useCallback((e : React.ChangeEvent) => { setSearchFlightOption({...searchFlightOption, arriveIataCode: e.target.value}) },[]) const changeFlightDate = useCallback((date : Date | null) => { setSearchFlightOption({...searchFlightOption, checkedFlightDate : date}) },[]) const changePersonNumber =useCallback((e : React.ChangeEvent) =>{ setSearchFlightOption({...searchFlightOption, personNumber : e.target.value}) },[]) console.log(searchFlightOption) console.log(dateToString(searchFlightOption.checkedFlightDate)) return( <>

국가/공항 선택

예약 날짜 선택

changeFlightDate(date)}/>

탑승 인원

{flightInfo} ) } import styled from "styled-components"; import { airportLists, countryLists } from "../airportList/AirportList"; const Label = styled.label` margin : 15px; ` const Select = styled.select` width : 250px; height : 30px; ` const SelectBoxDiv = styled.div` margin-bottom : 10px; margin-right : 20px; ` const flightSelectBox = (props : any) => { let selectType; props.depart ? selectType = '출발' : selectType = '도착' console.log(countryLists) return ( <> {selectType}국가 {selectType}공항 ); }; export default flightSelectBox;

songline · Accepted Answer

3줄 요약새로 선택할 때마다 기존 선택이 취소되는 것 같은 현상은 useCallback으로 재탕하는 함수가 렉시컬 스코프에 따라 첫 렌더링 시 상태 값을 계속 참조하기 때문setSearchFlightOption(prev => ({...prev, departCountry : e.target.value})) 이렇게 쓰면 해결됨갑자기 출발 공항 목록이 사라지는 것은 위 문제 때문에 선택한 국가 명칭이 ""로 초기화되고 때문에 filter((airport) => (airport.country === props.country)) 에서 목록이 싸그리 걸러지기 때문이라 추측.일단 첫번째 새로운 것을 선택할 때마다 기존에 선택한 것들이 사라지는 원인은 렉시컬 스코프 때문입니다. 렉시컬 스코프를 간단히 설명하면 함수 등에서 어떤 변수를 참조할 때 현재 함수가 실행된 위치가 아닌, 함수가 정의된 위치를 기반으로 변수를 찾는 방식입니다.function factory() { const a = `factory's a`; return function test() { console.log(a); } } const myTest = factory(); const a = `other's A`; myTest();이 예시를 보면 factory라는 함수 내에서 정의된 함수 test를 반환해 myTest에 받고 똑같은 이름을 가진 변수 a를 선언한 후 호출했는데, myTest는 분명 바로 위에 const a = `other's A`;라고 정의된 변수 a가 있음에도 출력은 factory's a가 됩니다. 이런 현상이 발생하는 이유는 test 함수 내에서 선언된 바 없는 변수 a를 찾기 위해 거슬러 올라갈 때 함수가 호출된 위치가 아니라 선언된 위치(즉 factory 함수 내부)에서 찾기 때문입니다.다음으로 React에서 렌더링 될 때의 동작을 보면 렌더링 될 때마다 컴포넌트 함수를 다시 호출합니다. 다시 말해 컴포넌트가 렌더링 되면 state 등의 변수의 값이 바뀌는 것이 아니라, 그냥 싹다 새로 만들고 이전 값을 참고해서 새로 대입하는 것이죠. 당연히 그 안에서 선언한 지역변수들도 이전과는 전혀 별개의 새로운 지역변수들입니다.여기서 useCallback이 하는 일은 함수 컴포넌트 안에서 정의한 함수가 매 렌더링마다 불필요하게 다시 정의되는 과정을 피하기 위해 첫번째 인자로 함수를 받아 어딘가에 따로 저장해두고, 나중에 다시 갱신하라는 말이 없으면 그 저장해준 함수를 다시 꺼내서 재탕할 수 있게 해주는 것입니다.헌데 이를 거꾸로 보면 useCallback의 첫번째 인자로 전달된 함수의 입장에선 재 렌더링 되며 새로 만들어진 변수들은 내가 아는 변수들이 아니라는 뜻이 되죠? 그런 와중에 자기 내부에서 정의된 지역변수가 아닌 변수를 참조해야 할 일이 생기면, 새로 만들어진 변수들이 아니라 자기가 아는 것, 즉 자신이 선언되었던 위치의 변수를 참조하게 되는 것입니다. const changeDepartCountry = useCallback((e : React.ChangeEvent) => { setSearchFlightOption({...searchFlightOption, departCountry : e.target.value}) },[])이 부분을 보시면 콜백 함수 내부에서 선언되지 않은 변수 setSearchFlightOption과 searchFlightOption이 사용되고 있는 것을 볼 수 있습니다. 자기 안에서는 해당 변수를 찾을 수 없으니 자신이 정의된 곳에서 보다 상위로 올라가며 const[searchFlightOption, setSearchFlightOption] = useState({ ... }) 여기서 정의된 값을 사용하게 되죠.헌데 페이지가 다시 렌더링 되면 useState 구문도 다시 실행될 것이고 관련된 두 변수도 새로운 구역에서 새로 선언될겁니다. 하지만 useCallback은 첫번째 렌더링 때 정의된 함수를 다시 내놓을 것이고, 그 함수는 새로 정의된 state 변수들은 모르죠.결과적으로setSearchFlightOption({...searchFlightOption, departCountry : e.target.value})이 코드의 searchFlightOption이라는 변수는 평생 최초의 상태만을 기억하게 되고, 그렇다보니 위 코드는 모든 상태를 최초로 리셋한 다음 departCountry만 인자로 넣어준 값으로 변경하는 동작을 하게 되는 것입니다.이를 고치는 방법은 useCallback을 사용하지 않거나 state에 대한 의존성을 추가하거나, 혹은 setState를 아래와 같이 사용하는 방법이 있습니다.setSearchFlightOption(prev => ({...prev, departCountry : e.target.value}))저러면 리엑트 내부에서 알아서 prev에 이전 값을 넣어주기 때문에 useCallback을 사용하더라도 정상적인 동작을 보여줄 수 있습니다.추가로 출발 공항 리스트가 사라지는 문제는 위 요인으로 인해 기존의 선택이 처음으로 돌아가버려 props.country가 ""이 되어버렸고 그로 인해 filter((airport) => (airport.country === props.country)) 이 부분에서 모든 목록이 걸러져 버린 것이 아닐까 싶네요.

React useState 셀렉트 박스 선택값 설정 관련

1개의 답변

#usestate 목록