fresh 탐방기

·2022년 7월 8일
0

트러블슈팅 기록

목록 보기
2/3

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문제였다니.
문제를 알기위해서 더 많은 요소를 고려해야겠다, 그리고 또 느꼇지만 공식문서 부터 읽자..

오늘의 교훈

신기술은 토이프로젝트로만 하자
아니 공부를 제대로 하자

0개의 댓글