FE/React (5) 썸네일형 리스트형 useState 가 아무튼 안될 때 import { useState, useRef, useEffect } from "react"; function Main() { const [testState, setTestState] = useState(0); const testRef = useRef(null); function clickHandler(event) { event.preventDefault(); setTestState(testState + 1); } useEffect(() => { if (!testRef) return; testRef.current.addEventListener('contextmenu', (event) => { clickHandler(event) }); console.log('event added'); return () =.. 배열을 useState에서 사용할 때 const Main = () => { const [test, setTest] = useState([1, 2, 3]); function TestFunction({state, setState}): JSX.Element { return ( { const qwer = state; qwer[2] -= 1; setState(qwer); console.log('clicked', state); }} >{test} ); } return ( ); } div 영역을 클릭하면 test 배열의 2번값이 -1 되어, 클릭할 때마다 -1이 감소된 값이 리렌더될 것으로 생각되지만 .. 작동하지 않는다. spread operator 를 사용하여 const asdf = [...state]; 이렇게 바꿔주어야한다는데 .. 원리는 시간나면.. (React.js + Next.js) Skeleton 적용 프로덕트에서 UX 개선 항목으로 SkeletonUI 와 ProgressBar 요청사항이 들어왔다. 처음 진행해보는 작업이라 많은 검색을 해봤고, 절대 다수의 기술 블로그에서는 다음과 같이 설명하고 있었다. 1. 페이지 이동 시에 state 를 통해서 content 영역에 skeletonUI 를 렌더링한다. 2. fetch 이후 state 를 통해서 content 영역에 정상 데이터를 렌더링한다. 대충 코드로 나타내면 이렇게 되겠다. const [content, setContent] = useState(); request('url', (resData) => { setContent(~~~~); }); 유명한 스타트업의 기술블로그도 위와 같은 방식을 사용하고 있었다. 하지만 몇 가지 이유로 사뭇 다른 방식으로.. functions are not valid as a react child const SomeView = () => { return (..) } ReactDOM.render(SomeView , domContainer); (X) ReactDOM.render(, domContainer); (O) useEffect dynamic depth const func = () => { const array = []; if (조건1) { array.push(state1) array.push(state2) } if (조건2) { array.push(state3) array.push(state4) } return array; } useEffect(() => { array.forEach((k) => { k.method(); }) }, [func]); state가 바뀔때마다 depth 안의 func 도 매번 실행된다 이전 1 다음