useState
-
[React Hook] 상태 훅(State Hook)을 내부함수로 정의할 경우 유의사항Javascript & TypeScript 2021. 2. 12. 19:53
이 소스 자체가 올바르다고 보긴 어렵겠지만 나중에 또 뻘짓할수도 있는점을 대비해 정리한 글 useEffect(() => { console.log(`playIndexes : ${playIndexes}`); }, [playIndexes]); useEffect(() => { if(isSuffle) { setPlayIndexes(p => { const rndTargets = [...p.slice(0, currentPlayIdx), ...p.slice(currentPlayIdx + 1, p.length)].sort(p => Math.random() - Math.random()); const result = [...rndTargets.slice(0, currentPlayIdx), p[currentPlayIdx], ..
-
[React Hook] 상태 훅(State Hook)을 EventListener에 사용시 유의사항Javascript & TypeScript 2021. 2. 11. 16:06
개인프로젝트에서 HTMLAudioElement 를 선언하여 해당 객체에 이벤트 리스너를 심어 음악재생을 관리하는 기능을 구현하던 중 겪은 현상을 정리하고자 이 글을 작성하였다. 초기 소스는 아래와 같이 작성했다. function MusicPlayer() { const [totalTime, setTotalTime] = useState(1); // 초기값을 0으로 주면 바로 다음 음악재생 const [currentTime, setCurrentTime] = useState(0); const [audio] = useState(new Audio()); function init() { console.log(`init ${MusicPlayer.name}`); audio.addEventListener('timeupda..
-
[React Hook] 컴포넌트 내 Effect Hook(useEffect) 사용 개념정리Javascript & TypeScript 2021. 2. 11. 14:12
함수형 컴포넌트는 내부에 선언된 상태 훅(State Hook)의 변화나 렌더링 상황에 따라 함수형 컴포넌트 자체가 재 호출된다. 그래서 함수형 컴포넌트내에 단순히 변수를 선언하거나, 함수를 호출하면 의도한 결과가 제대로 수행되지 않을 수 있다. 아래 소스는 개인개발 프로젝트를 하면서 겪은 뻘짓 코드이다. audio 객체 및 init 함수의 동작이 원하는대로 수행되지 않아 고생했다. function MusicPlayer() { const audio = new Audio(); // 이렇게 선언할 경우 MusicPlayer 내 다른 state hook이 변경될때마다 매번 객체가 새로 생성됨. const [totalTime, setTotalTime] = useState(1); const [currentTime,..