Jaebin

useMemo 렌더링을 실행할때마다 변수를 재할당하지않고 메모리에 저장되있는 데이터를 그대로 불러와 불필요한 작업을 넘겨줌 useMemo 사용 전 : export default function App(){ const[valueOne, setValueOne] = useState(0); const[valueTwo, setValueTwo] = useState(0); const plus = () => { setValueOne(valueOne + 1); console.log("Plus") } const minus = () => { setValueTwo(valueTwo - 1); console.log("Minus") } console.log("Hello"); return( plus()}>{valueOne} minu..

.box{ top: 50px; position: fixed; } top(혹은 bottom) 속성을 붙였는지 확인해보자.

리듬게임을 프로젝트를 하는중...노트 스폰 딜레이를 설정하기 위해서 setInterval 콜백 함수를 사용해야하는 일이 생겼다. 그래서 useEffect에 setInterval을 넣고 함수를 돌리는데...state값 반영이 안되는 것이다! 일단 우리가 원래 사용하는 코드를 살펴보자. export default function App(){ const[count, setCount] = useState(0) useEffect(() => { setInterval(() => { setCount(count + 1); console.log(noteCount) }, 1000) }, []) } 여기서 사용하는 useEffect는 첫 렌더링에만 변경사항이 적용되는 로직이다. 그렇기 때문에 우리가 아무리 인터벌을 돌려도 c..

💣 display HTML 요소가 화면에서 차지할 속성을 설정하는 CSS 요소 💣 display : block 가로의 한줄 전체를 차지하는 속성 See the Pen Untitled by Jaebins (@evyghtqj-the-bold) on CodePen. 💣 display : inline 컨트롤의 크기만큼만 자리를 차지하는 속성 See the Pen DisplayBlock by Jaebins (@evyghtqj-the-bold) on CodePen. 💣 display : inline-block block 방식과 inline 요소를 합쳐놓은 속성 See the Pen DisplayInline by Jaebins (@evyghtqj-the-bold) on CodePen.