kakao 헤더영억을 next js , typeScript를 사용해서 프로그램을 짜고있었다.
layer를 만들어 파일을 나누고 , 함수를 props로 전달하는 과정에서 작은 이슈가 생겼다.
const [language,setLanguage] = useState("kakao")
로 스테이트를 만들었다.
const KaKaoLanguageGhange = ()=>{
setLanguage((cur)=>(cur === "kakao" ? "kakao_english" : "kakao"
))
}
로 함수를 짜고 language를 참조하게 만들었다.
Link href =`
${language}` << 로말이다.
위 함수와 state를 KakaoHomePage라는 컴포넌트로 상태 끌어올리기를했고, props로 전달해주는중 영어페이지로 이동하지만 영어에서 다시 한국어 버전으로 돌아오는데 어려움을 겪었다.
그래서 테스트를 진행하던중 util component안에서 저 함수를 써보니 정상적으로 동작했다 .
하지만 두번씩 클릭해야 스테이트가 바뀌는것을 알았고 그 이유는 아직도 찾아가는 중이다.
의심되는 부분은 이런것이다 . console.log() << 스테이트를 확인했을때
이전 스테이트가 먼저 찍힌다 . useState는 비동기로 동작하기때문에 당연하게
console.log()가 먼저 찍히는 이슈이기도 했다.
(정확하게는 setState가 비동기로 동작)
이 이슈를 해결하기 위해선 찾아낸 방법이 두가지였다.
1.제일위에 작성한 코드처럼 setState안에 함수를 넣어서 동작시키는 것
ex)) setLanguage((cur)=>(cur === "kakao" ? "kakao_english" : "kakao" ))
2.다른 하나는 useEffect를 사용해 의존성 배열에 state의 값이 바뀔때마다 리랜더링 시키는것 .
하지만 두번째 방법은 내가 생각하는것보다 비효율적으로 동작할 것 같기에 사용하지 않았다.
그래서 1번의 방법으로 동기적으로 처리했음에도 불구하고 두번씩 클릭해야하는것은 link href와 state의 데이터 연결 시점이 뭔가 잘못되지 않았을까 하는 생각이다 . 조금 더 찾아보고 자료를 모아서 이 이슈를 해결해야겠다.
