fresh 블로그를 만들려고 하다가 문제에 봉착했다.
바로 setState가 onInput or onChage 이벤트에서 실시간으로 동기화가 안되는 문제이다
/** @jsx h */
import { h } from 'preact';
import { useState } from 'preact/hooks';
import { IS_BROWSER } from '$fresh/runtime.ts';
interface InputProps {}
const Input = ({}: InputProps) => {
const [state, setState] = useState('');
const update = (e: any) => {
console.log(e.target.value);
setState('test');
console.log('2');
};
const click = (e: any) => {
console.log(e.target.value);
setState(e.target.value);
};
return (
<div>
<input
onInput={update}
// onClick={click}
value={state}
placeholder="test"
disabled={!IS_BROWSER}
></input>
<div>{state}</div>
</div>
);
};
export default Input;
위 비디오를 보면 알수있다.
처음 타이핑을 할때에는 setState가 실행이 된다.
문제는 그 이후에 setState함수가 실행이 안된다
콘솔로그가 찍히는걸로 봐서는 이벤트가 잡히고,함수가 실행은 되고 있는듯 하지만
이후 setState가 실행이 안되는걸 알수있다.
해서 fresh 공식홈페이지에서 보여주는 onClick 이벤트에 대해서 실험을 해보았다.
위 코드에서 // onClick={click}
해당 코드 주석을 풀었다.
위와 같은 현상이 발생 했다.
뭐가 문제일까 뇌피셜로 고민해본 결과.
click이벤트가 발생하고나서 타이핑을 하면 onInput이벤트내에서 setState가 실행이 되는것 같다
왜 하필 onClick만 가능한거지??
일단 issue를 달았다
https://github.com/denoland/fresh/issues/479
답변이 달렸다
와 이럴수가 preact문제였다 ㅜㅜ
https://github.com/preactjs/preact/issues/3175
공부를 제대로 해야겠다, fresh문제가 아니라 preact문제였다니.
문제를 알기위해서 더 많은 요소를 고려해야겠다, 그리고 또 느꼇지만 공식문서 부터 읽자..
신기술은 토이프로젝트로만 하자
아니 공부를 제대로 하자