회원가입/로그인 등 부분을 맡아 진행하다 보니 가장 골치 아픈게 값 수정이었다.
정확히는 input의 값 수정이라고 해야겠다.
수정을 위해서는 기존 값이 입력되어 있어야 한다는 전재가 필요하다.
이를 위해서는 input창에 기존 값을 value로 주어야 한다는 이야기인데,
이제 그 기존 값을 새로운 값으로 고쳐줄 때 골치가 아파진다.
input창에 value를 주면 유저가 직접 입력이 불가능해진다. 그래서 리액트에서는 value를 useState 값으로 관리하는 방법으로 이를 해결한다.
이런 함수를 만들어서 input onChange 속성에 넣어주는게 이번 프로젝트에서 내가 사용한 방법이다. 다른 사람들도 그렇고... 문제는 넘겨 받은 값에 가공이 필요할 때 발생했다.
내 문제는 여기서 '경력' 탭 이었는데, 기존에는 신입/경력 두가지 선택지만 있었다. 그런데 아무리 생각해도 '경력'이면 몇년인지 기간이 있어야 할 것 같아서 이를 수정하기로 했고, 서버에 그냥 '경력 X년' 형식의 string 값으로 넘겨주기로 했다.
string을 수정하는건 쉬웠다. 그냥 .replace(정규식, '')을 통해 숫자를 제외한 모든 값을 공백으로 만들어주면 되니까... 이를 통해 원하는 값인 숫자만 뽑아올 수 있었다. 문제는 이 다음에 발생한다. 단순히 추출한 값을 다른 형식의 onChange를 만들어서 변형하려 하면 기존에 있는 '경력', '년' 들이 붙어서 나오고 난리가 난다.
결국 이를 잘라준 숫자 값만 뽑아서 input의 value에 넣어주고, 이 value 값을 state값 수정을 통해 숫자만 받아서 다시 그 숫자를 원래 형식 string 값으로 만들어서 다음으로 넘겨줘야 하는 상태가 된 것이다.
이게 생각보다 굉장히 어려웠다.
결국 이런식으로 새로운 state인 combine을 만들어서 이 state에 기존 값의 숫자만 부여하고, input에 이 combine을 수정하는 함수를 따로 부여했다. 이후 input을 통해 값이 바뀐 combine을
이렇게 넘겨주기 전에 넣어주고 앞 뒤로 필요한 string만 붙여주면 끝.
다시 한번 느꼈지만 리액트에서 useState를 다룰 때 dependency를 잘 지정하는 것은 아주 중요하다. 분명 이것보다 나은 방법이 많을 것인데, 공부 해보도록 하자.
useState나 useEffect를 다룰 때는 항상 dependency 조심! 아니면 바보와 같다!!
위와 같이 하니 career의 값이 고정되어 '신입'과 같은 다른 선택 항목을 넘겨줄 수가 없게 됐다. 넘기면 경력+신입+년+... 해괴해진 값으로 넘어간다.
이후 개선한 방법 :
숫자만 바꿔주면 되는거니까 정규식을 활용하기로 했다. 이렇게 정규식으로 숫자만 찾아서 입력한 값인 combine으로 바꿔주고 career에 넘겨주면 경력으로 숫자를 입력하면 경력과 숫자가 넘어가고, 신입을 선택하면 숫자가 없음으로 그냥 신입만 넘어가게 된다!
