본문 바로가기

Zoo48

상태관리 라이브러리란? ❓상태 관리 도구가 왜 필요할까? 상태란(State)? React에서 State는 component 안에서 관리되는 것이다. state는 오로지 자식 컴포넌트에게만 전달해줄 수 있다. 상태관리 필요성 1. 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 하다. 2. 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다. 3. 그런데 자식이 많아진다면 상태 관리가 매우 복잡해지며 자식이 많아질 수록 데이터이동이 많아져 코드가 복잡해진다. 만약 위그림 처럼 부모 컴포넌트로부터 상태를 전달받아야하는 ComponentD가 있다면 그 사이의 컴포넌트에 해당 상태를 전달해서 도착지인 ComponentD에 상태를 전달해주어야 한다. 심지어 그 사이의 ComponentB.. 2022. 12. 7.

[JS]이벤트 버블링과 캡처링(Bubbling & Capturing) 👉🏻JavaScript에는 click , keypress , focus , submit , scroll , change 와 같은 다양한 이벤트들이 있다. 만약 부모 요소와 자식 요소에 둘 다 같은 종류의 이벤트가 할당 되어있을 때, 이벤트를 동작시키면 어떤 이벤트가 먼저 실행될까? 이벤트 버블링 ( Event Bubbling ) 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다. 위와 같이 브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시키는 특성을 가지고 있다. 이와 같은 하위에서 상위 요소로의 이벤트 전파 방식을 이벤트 버블링(Event Bubbling)이라고 한다... 2022. 11. 27.

브라우저 저장소 차이점 ( Localstorage, SessionStorage, Cookie ) 🔔 브라우저 저장소로 Cookie와 Web Storage가 있다 HTML5 에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있다. ( Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다. ) 더 쉽고 간단한 저장소 제공을 위해 새로운 localStorage와 sessionStorage API를 제공한다. WebStorage의 특징 - 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다. 이것은 네트워크 트래픽 비용을 줄여 준다는 주요한 장점이 된다. - WebStorage는 용량의 제한이 없다. - 만료기간의 설정이 없다. 즉 한번 저장한 데이터는 영구적으로 존재하는 것이다. -.. 2022. 11. 16.

Promise Promise가 뭔가요? 프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미한다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 API를 사용하는데, API가 실행되면 서버에다가 데이터 보내달라는 요청을 보내고, 보내온 데이터의 반환값이나, 에러상황을 처리하기 위해 프로미스를 사용한다. promise를 사용한 비동기 처리 function async() { return new Promise((resolve, reject) => { setTimeout(() => { // setTimeout { console.log(res); }).. 2022. 11. 16.

이전 1 ··· 3 4 5 6 7 8 9 ··· 12 다음

티스토리툴바