웹 프로그래밍/FrontEnd (5) 썸네일형 리스트형 [React] useRef는 unmount 되어도 유지될까? 최근에 캐시된 이미지를 사용하기 위해 useRef에 캐시되어야 할 id를 저장하고 캐시여부를 판단해야 하는 상황이 있었습니다..! 관련해서 오늘은 useRef와 관련된 사실을 알아보겠습니다! 먼저 내가 원했던 동작은 useRef를 선언한 컴포넌트가 unmount 되어도 그 값이 유지되어서 다음에 컴포넌트가 mount되어도 동일한 useRef 값을 사용하고 싶었습니다! 다음 코드를 살펴보자 //App.js function App() { const [isOpen, setIsOpen] = useState(false); return ( { setIsOpen(!isOpen); }} > click {isOpen && } ); } 먼저 App.js에 state를 바꾸는 버튼을 하나 만들어주고, 버튼이 클릭될때마다 U.. [React] useState? useRef? (feat.단축키 추가) 최근에 업무를 진행할 때 리액트로 만들어진 웹사이트에 전역 단축키 이벤트를 추가해야하는 경우가 있었습니다. 이때 겪었던 문제 상황과 해결 방법에 대해 간단하게 소개하고 관련 내용을 추가 학습하여 정리해보았습니다. 상황을 자세히 설명하자면 리액트로 만들어진 프로젝트에 전역 단축키 기능을 추가해야하고, 로직을 추가할 때 컴포넌트 안의 업데이트 된 state 값을 사용해야하는 상황이었습니다. 상황을 간단한 코드로 재현해보면 다음과 같습니다.(코드는 App.js에 중요한 부분만 간단하게 요약하였습니다.) //App.js function App() { const [count, setCount] = useState(0); useEffect(() => { //컴포넌트가 렌더링 될 때 전역 단축키 이벤트를 설정한다. .. [JavaScript] Bind가 뭐죠? Bind란 무엇일까? 모든 함수의 메소드로 context를 수정하게 해주는 것이다. bind는 함수처럼 호출 가능한 "특수객체"를 반환한다. 이 객체를 호출하면 this가 원하는 형태로 고정된 함수가 반환된다!! let user = { firstName: "John" }; function func() { alert(this.firstName); } let funcUser = func.bind(user); funcUser(); // John 이렇게 바인딩을 시켜주면 func내부의 this는 user를 가리키게 된다!! 신기하다.. let user = { firstName: "John", say(phrase) { alert(`${phrase}, ${this.firstName}!`); } }; let say .. [Javascript] fetch()로 API 요청 보내기 fetch란? 클라이언트에서 직접 API를 호출해주는것 (브라우저에서 직접 비동기 http통신을 하는것을 Ajax라고 불렸었다.) 브라우저에 내장된 함수로 예전에는 requrest,axios,jQuery같은 라이브러리를 사용해 API를 호출했다. 즉, 프론트엔드에서 백엔드에 요청할때 쓰인다! fetch사용법 fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)); 첫번째 인자로 URL을 두번쨰 인자로 옵션을 객체로 받는다. Promise객체를 리턴하기 때문에 비동기적으로 실행된다. GET요청 fetch("localhost:3000/api/u.. 이벤트 버블링, 캡쳐, 위임 이벤트 버블링 이벤트가 발생했을때 상위 컴포넌트로 이벤트가 전달되는 특징 div->div->div->body 이런식으로 이벤트가 상위로 전달된다. document.querySelector('parent').addEventListener('click', (e)=>{ console.log(e.target.className); }); document.querySelector('child').addEventListener('click', (e)=>{ console.log(e.target.className); }); child 를 클릭하면 child, parent순서대로 콘솔에 찍힌다. 브라우저에 의해 화면에 이벤트가 발생했을때 최상위요소까지 이벤트를 전파시키기 때문이다. *각 태그마다 이벤트가 등록 되어 있어 .. 이전 1 다음
