분류 전체보기41 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. react-dnd 드래그 범위 에러(with. react-tooltip) 이미지를 첨부하고 싶지만, 개발중인 서비스라 문제가 된 부분을 직접 만들어서 추후에 이미지를 첨부해야겠다. react-dnd를 사용하여서 폴더 기능을 만들고 있는 중인데 드래그 범위가 이상하다.... 관련없는 코드를 다 생략하고, 밑에와 같이 useDrag hook을 사용하여 drag를 ref속성 값으로 전달을 해주면 해당 부분이 드래그가 되야한다. const [,drag] = useDrag(() => { ... }) return ( ... ) 하지만, 드래그 된 범위가 해당 태그가 아니라 화면의 1/4범위를 잡아서 엄청 광범위하게 드래그가 되었다. 노가다를 해봐야겠다는 생각이 들어 drag값을 하위 태그에 한번씩 다 넣어 보았고, ReactTooltip에서 발생하는 에러인 것을 찾아냈다. 해당 Cont.. 2022. 1. 9. 모달창 구현, TypeError: Cannot read properties of undefined (reading 'contains') 해결 방법 폴더 탭을 클릭하였을 때, 다른 폴더 리스트가 나오는 작은 모달창을 구현하였다. 이제 모달창이 제거되는 이벤트를 만들어야하는데, 감이 오질 않아서 velog를 참고하였다. velog는 작은 모달창이 띄어진 상태에서 페이지에 있는 모든 버튼들이 활성화 된 상태였고, 모달 바깥을 누르면 모달창이 꺼졌다. 나도 이러한 기능을 구현하고 싶어 구글링을 해보았고, 밑에와 같은 코드를 찾게 되었다. // 생략 const Modal = ({ setModal, modalRef }) => { const modalRef = useRef(); const handleClickOutSide = ({ target }) => { if (!modalRef.current.contains(target)) { setModal(false);.. 2022. 1. 7. 스코프(scope)란? 실행컨텍스트를 공부하면서 자연스럽게 스코프에 대해서 공부하게 되었다. 자바스크립트 코드를 작성해보기 전에 배웠던 개념이라 와닿지 않았는데, 지금은 어느정도 이해가 된다. 다른 사람들은 모르겠지만, 나는 우선 코드를 작성해보고 나중에 개념을 봐야 이해가 잘 되는 것 같다. 스코프란? 자바스크립트에서만 쓰이는 개념이 아니고, 모든 언어에서 쓰이는 개념이고 가장 기본적이고 중요한 개념이다. 다른 코드가 참조할 수 있는 범위이다. 변수 이름, 함수 이름, 클래스 이름 같은 식별자가 선언된 위치에 따라 다른 코드에 참조 될 수 있을지 없을지가 결정 된다. 전역에서 선언되면 전역스코프를 갖게 되고, 지역에서 선언된다면 지역스코프를 갖게 된다. 스코프체인이란? 함수의 중첩으로 계층적인 구조를 가질 때, 상위스코프의 .. 2022. 1. 4. 실행 컨텍스트(Execution Context) - Outer 👉Outer와 스코프체이닝 💡 Outer : 이전 렉시컬 환경을 가리키기 때문에 타고타고 내려갈 수 있다. 정식 명칭 : Outer Enviroment Reference(외부 환경 참조) 💡 Scope Chaining : 상위 스코프와 연결되어 있어 참조할 수 있는 것 Outer를 통해 Scope Chaining을 할 수 있게 된다. Outer는 현재 렉시컬 환경에서 참조할 식별자가 없다면, 이전의 렉시컬 환경으로 가서 식별자를 찾는다. 이렇게 찾을 때까지 찾아 내려가고, 식별자를 발견한다면 그 식별자의 값을 출력하고 더 이상 이전 렉시컬 환경으로 내려가지 않기 때문에 콜스택 공간안에 동일한 식별자가 여럿이어도 값을 결정할 수 있다. 이것을 식별자 결정이라고 한다. 예시를 통해 알아보자. let food.. 2022. 1. 2. 이전 1 2 3 4 5 ··· 7 다음
