분류 전체보기45 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 에러처리 오늘의 에러 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 오늘 발생한 에러는 아니지만 ㅎㅎ 업무를 하면서 위와 같은 에러가 발생했다. useEffect의 cleanup함수를 사용하여서 메모리 누수를 해결하라고 하는 메세지인 것 같다. 왜 이런 에러가 발생했을까? cleanup 함수는 컴포넌트가 언마운트 될 때 실행이 된다. 만약 요청을 통.. 2022. 1. 30. VSC에서 react사용시 html태그 자동완성 설정하기! 리액트를 사용하면서 매번 이렇게 태그를 만들어줘야했다. 태그를 한페이지에만 수십개 쓰는 경우도 있기 때문에 이 과정이 너무 귀찮아서 구글링을 해보니, vsc에서 지원해주는 플러그인으로 html파일에서는 h1, div 이런식으로만 작성해도 태그가 자동완성이 되지만, react에서는 따로 설정을 해줘야했다. 진짜 간단하다. vsc창 왼쪽 하단에 설정 아이콘을 누른 후, setting을 누른다. 오른쪽 상단의 open setting을 누르면 json파일이 띄워진다. 밑에 코드만 추가해주면 셋팅 끝!"emmet.includeLanguages": { "javascript": "javascriptreact" } 이제는 react에서도 div라 치고 엔터를 누르면 태그가 자동으로 만들어진다! 2022. 1. 24. useEffect 정리 react hook중에 하나로 마운트, 언마운트, 업데이트시에 특정 작업을 처리할 수 있다. 마운트 : 컴포넌트가 처음 나타났을 때를 의미 언마운트 : 컴포넌트가 사라질 때를 의미 업데이트 : 특정 값이 바뀔 때를 의미 useEffect 구조 및 파라미터 useEffect(() => { console.log("컴포넌트가 처음 나타났을 때 실행"); return () => { console.log("컴포넌트가 사라질 때 실행"); }; }, []); useEffect는 위왁 같은 구조를 가지고 있으며, 첫번째 파라미터로는 함수가 들어가고, 두번째 파라미터로는 배열(deps)가 들어간다. deps는 3가지로 나눌 수 있다. 빈 배열을 넣는 경우 컴포넌트가 처음 나타날 때에만 useEffect에 등록한 함수가.. 2022. 1. 15. 키 자판으로 이벤트 주기(onKeyPress) 보통은 Input창에서 '확인'버튼을 눌렀을 경우 어떠한 이벤트를 발생시킨다. '확인' 버튼 뿐만 아니라 ',' 나 'enter' 등 특정 키를 클릭하였을 경우에 이벤트를 발생시키고 싶었다. 실제로 velog에서도 태그 추가시 사용되는 기능이다. 이외에도 많이 사용되어 구글링을 해보니 input태그의 onKeyPress속성을 통해서 이벤트를 발생시킬 수 있었다. import React from "react"; const testComponent = () => { const test = ({ code }) => console.log(">>>", code); return ; }; 여기서 code는 원래 e.code이지만, 구조분해할당을 통해서 {cod.. 2022. 1. 13. 이전 1 2 3 4 5 ··· 12 다음
