리액트 (12) 썸네일형 리스트형 2021 변화된 리액트 React에서 사용하는 개념 중 하는 상태관리다. 상태를 기준으로 View를 그리기 때문에 일반 변수로 사용하지 않고 setState로 상태를 할당한다. 이벤트 핸들러에서 setState 이후 바로 상태값을 참조하여 다른 작업을 할 때 문제가 생기게 된다. React의 setState등이 비동기적으로 작동하는 이유는 일정 시간동안 변화하는 상태를 모아 한꺼번에 렌더링 하기 위해서다. How to force batching? ReactDOM.unstable_batchUpdate 리액트 내부 API로 한 이벤트 핸들러에서 발생하는 모든 업데이트를 단일 렌더 패스로 일괄 처리 할 수 있다. 이는 불필요한 렌더 함수 호출을 줄일 수 있게 된다. Automatic Batching 페이스북에서 리액트의 변화된 점이.. React Router 정리 기본적으로 클라이언트사이드 렌더링 하는 SPA 특징을 가진 리액트인데 웹 개발을 하다보면 한 종류의 화면만 사용하지 않기에 React Router을 사용한다. URL 이동시키기 Link a 태그와 같다. 하지만 SPA 특성상 a 태그처럼 새로고침이 발생하면 안되기에, a 태그 기반으로 기능상의 개선을 통해 새로고침 없이 다른 뷰를 렌더할 수 있다. Route는 컴포넌트에 기본적으로 match, history, location이라는 것을 넘겨준다. match 이 객체는 어떤 라우트에 매칭이 되었는지에 대한 정보가 있고 params(/about/:name 형식)정보를 가지고 있다. history 이 객체를 통해 push, replace를 통해 다른 경로로 이동하거나 앞 뒤 페이지로 전환 할 수 있다. loc.. Receives *all* click events DOM 리스너를 추가 document.addEventListener(...)하면 React 이벤트를 확인 할 수 있습니다. React 16 및 이전 버전에서는 e.stopPropagation() React 이벤트 핸들러를 호출하더라도 여전히 수신이 가능하지만 React 17을 사용하면 document 핸들러가 실행되지 않습니다. 캡처 단계를 사용하도록 리스너를 변환하여 이와 같은 코드를 수정할 수 있습니다. document.addEventListener('click', function() { // Now this event handler uses the capture phase, // so it receives *all* click events below! }, { capture: true }); .만 Fix a missing dependency warning 해당 경고 이미지는 위키피디아 api를 이용한 검색 기능을 구현하는 과정에서 발견했다. 검색을 해보니 useEffect내에 사용하고 있는 state를 배열안에 추가시켜 달라는 의미라고 한다. 1. 첫번째 시도 const [term, setTerm] = useState('programming'); const [results, setResults] = useState([]); useEffect(() => { const search = async () => { const { data } = await axios.get('https://en.wikipedia.org/w/api.php', { params: { action: 'query', list: 'search', origin: '*', format: 'jso.. 이전 1 2 다음
