c29130811

React Hook인 useEffect 는 컴포넌트 라이프 사이클에서 일어나는 Side Effect를 관리할 수 있게 해준다. Side Effect는 컴포넌트가 렌더링 과정에서 렌더링 이외에 작업을 부르는데, API 호출 , 데이터 저장, 로그 등 다양한 일들이 있을 수 있다. 타이머 등을 동작하는 웹 사이트에서 언마운트가 될 때 해제되어야 하는 업무들을 포함한다. import { useEffect } from 'react';useEffect(() => { fetch("https://api.example.com/data") .then(response => response.json())}, []); // [] 는 의존성 배열 일반적으로 하는 useEffect 사용하는 형태로 렌더링 후 즉 DOM 업..

어떻게 보면 React를 그냥 따라 쓰고 예제만 할 뿐 공부가 많이 부족했던거 같다. 그래서 찬찬히 공부 https://react.dev/reference/react/useState useState – ReactThe library for web and native user interfacesreact.devuseState는 state 상태를 저장하며 변경 감지 및 UI 업데이트를 하는 역할을 한다.가령 state가 아닌 변수가 업데이트가 일어난다고 해서 바로 업데이트 되어 화면에 해당 값이 반영되지는 않는다. useState는 다음 아래와 같이 [변수, 세팅할변수] = useState(초기값); 을 통해 사용을 한다. import "./styles.css";import { useState } from..

https://flowbite.com/docs/forms/search-input/#search-bar-example Tailwind CSS Search Input - Flowbite Use the search input component as a text field to allow users to enter search queries and receive relevant page results available in multiple styles and sizes flowbite.com tailwind로 페이지 몇개 작업하다가, 위 Flowbite에 Search Input에 Dropbox가 괜찮아보여 커스텀좀 해봤다. 사실 되게 어렵게 접근을 하는거 같은데... 그냥 사실 hidden 되어있는 것만 sta..

npm run start 해서 진행할 경우, iframe이 추가되며, 아래의 옵션 때문에 화면에 버튼이고 뭐고 아무것도 안눌림. position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647; https://github.com/facebook/create-react-app/issues/11773 Is this the bug of react-error-overlay? · Issue #11773 · facebook/create-react-app Describe the bug When I change the code and emit the hot-reload, there is iframe cove..

React 에서 Last Child 가 추가 될 때, Background Color를 변경한다. setTimeout을 활용하여, 3초가 지나면 다시 Color를 원복 시킨다.

React에서 useState로 있는 Array에 값을 Search 하는 코드 const searchResult = item.filter((v) => { return v.toLowerCase().includes(input); }); inputField에 입력 된 값이 포함 되면, searchResult에 추가하고, 추가된 값을 Render 한다.