전체 글

문제햄버거 가게에서 일을 하는 상수는 햄버거를 포장하는 일을 합니다. 함께 일을 하는 다른 직원들이 햄버거에 들어갈 재료를 조리해 주면 조리된 순서대로 상수의 앞에 아래서부터 위로 쌓이게 되고, 상수는 순서에 맞게 쌓여서 완성된 햄버거를 따로 옮겨 포장을 하게 됩니다. 상수가 일하는 가게는 정해진 순서(아래서부터, 빵 – 야채 – 고기 - 빵)로 쌓인 햄버거만 포장을 합니다. 상수는 손이 굉장히 빠르기 때문에 상수가 포장하는 동안 속 재료가 추가적으로 들어오는 일은 없으며, 재료의 높이는 무시하여 재료가 높이 쌓여서 일이 힘들어지는 경우는 없습니다.예를 들어, 상수의 앞에 쌓이는 재료의 순서가 [야채, 빵, 빵, 야채, 고기, 빵, 야채, 고기, 빵]일 때, 상수는 여섯 번째 재료가 쌓였을 때, 세 번째..

useState(setState)를 사용할때 그런경우가 있다. 바로 엇,,왜 내가 생각한대로 동작이 안되지,,?그 이유는 바로 비동기적으로 동작하기 때문이었다.useState가 비동기적으로 동작하는 이유에 대해서 알아보려고 한다.  원인을 알아보기function App() { const [number, setNumber] = useState(1); const handleAdd = () => { setNumber(number + 1); }; const handleMultiply = () => { setNumber(number * 2); }; const handleMultiplyAddNumber = () => { setNumber(number * 2); setNumber(number + 1);..

최근에 리액트로 포트폴리오를 구축했는데 애니메이션을 빠르고 쉽게 적용하고 싶었다. framer-motion이 내가 찾던 라이브러리 였다. (왜 이제 안걸까;;? ㅎ) https://www.npmjs.com/package/framer-motion framer-motion A simple and powerful JavaScript animation library. Latest version: 11.1.5, last published: 16 hours ago. Start using framer-motion in your project by running `npm i framer-motion`. There are 4191 other projects in the npm registry using framer-mo..

⭐️useTransition 이란⭐️ 상태 변경의 우선순위를 낮춰 다른 렌더링이 더 빠르게 수행되도록 해줄 수 있는 hook 이다. (리액트 18에 생김) 왜?? 이것을 사용해야 할까? 리액트는 기존에 동기적으로 처리 되고 있었다. 즉 하나의 작업에 하나만 처리가 된다는 것인데 리액트가 렌더링이 끝날때까지 순차적으로 계속 지연이 된다는 것이다. useTransition 훅을 통해 동시성을 실현할 수 있다. 동시성을 실현하게 되면 A와 B의 작업을 처리하고 있을시 B를 지연시키고 A를 처리할 수 있다. 코드로 구현해보기 function App() { const data = ['사과','배','오렌지','바나나','딸기','천례향','귤','자몽','수박','키위','아보카도','참외'] const allD..