react

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..

요즘 핫?하게 떠오르고 있는 tailwindcss 를 react에 사용해보았다. 간단하게 tailwindcss를 왜 쓰는지 알아보고 가자! TailwindCSS 장점? 테일윈드css는 utility-first 컨셉의 프레임워크다. 사전에 정의된 클래스를 사용하여 직접 HTML에 인라인 스타일로 바로 적용할 수 있다. utility-first를 사용하면 css를 90% 적게 적용 할 수 있으며 이로 인해 css 의 성능 및 유지비용이 10배 줄어 들 가능성이 있다. 커스텀도 자유롭게 가능하며 클래스명이나 컴포넌트의 네임명을 고민하지 않아도 된다는점!! 내가 주로 사용하는 styled-components와 비교해봤더니 바짝 쫒아오고있는..ㅎㅎㅎ 그래서 한번 나도 사용해보았다 1. npm 패키지 설치 npm ..

👉React hooks란..? 기존 클래스컴포넌트에서 사용하던 리액트 기능들을 함수컴포넌트에서도 사용할 수 있게 된것 이에요. 함수컴포넌트에서도 state기능을 사용할수 있다! 그걸 hooks라고 불러줘! 이런것이죠 //function components function App() { return ( 함수컴포넌트 ); } //hooks const App() => { const [count, setCount] = useState(0); return ( hooks ); } hooks 도입전에 함수컴포넌트는 class 컴포넌트에서 사용하는 state나 라이프사이클을 사용할수 없었어요 return만 가능했죠 그래서 hooks 가 생기면서 함수컴포넌트로도 state와 라이프사이클을 사용할수 있게되었어요 📢우리는 ..

useRef는 react에서 DOM연결을 해주는 HOOK입니다. DOM연결을 원하는 element에 ref 속성을 넣어주면 useRef가 객체를 반환하여 current속성에 dom을 넣어주죠 import React, { useRef } from "react"; const App = () => { const userNameRef = useRef(null); return ( ); }; export default App; 오호.. 아주 쓸모있는 함수입니다 그런데 부모컴포넌트에서 자식 컴포넌트에게 ref를 사용하고 싶다면? //App.js import React, { useRef } from "react"; import Input from "./Input"; const App = () => { const use..

styled components를 이번에 배워서 프로젝트를 만드는 도중 class가 바뀔때 style을 변경하는 것을 단순히 style을 추가하면 되는줄 알았는데 props를 이용해서 할수 있다는 것을 알게되었다. //components 안녕하세요. //style & aside{ position:fixed; right:0; top:0; z-index:9; width:50vw; height:100%; padding:2rem; background:#fff; transform:translateX(100%); transition:all .5s ease; box-sizing:border-box; &.is--open{ transform:translateX(0); } loginOn state가 바뀌면 클래스 is--..

함수형 컴포넌트에서 componentDidMount,componentDidUpdate,componentWillUnmount 의 라이프사이클을 대신해 사용 할 수 있는것이 바로 useEffect 입니다. 그럼 어떻게 useEffect를 사용하는지 확인해봅시다 1. componentDidMount, componentDidUpdate hook const Messege = ()=>{ const [message, setMessage] = useState('안녕하세요'); useEffect(() => { console.log('useEffect 실행'); setTimeout(() => { setMessage("만나서 반가웠어요"); }, 3000) },[]) // 빈 배열 return( {message} ) } u..