VamosDev의 개발 브이로그

[적용 상황]어떤 자식요소의 트리거를 위해 부모요소에서 특정 상태 또는 값을 업데이트 하니,다른 자식요소(형제요소)까지 불필요하게 리렌더링 되는 현상 발생= > 이를 해결하기 위해 "자식요소의 트리거를 자식요소 내부에서 선언하고 그 트리거만 외부로 전달하도록 함" [사용방법]1. 자식요소에서 컴포넌트를 forwardRef()로 감싼 후, props 옆에 ref를 넣는다. (ref는 임의의 명칭이 아니며, 다른 이름으로 바꿀 수 없다. 즉, 반드시 'ref'라고 기재해야 complile이 가능하다)2. useImperativeHandle을 이용하여 필요한 트리거 함수를 선언한다. ( useImperativeHandle: ref로 노출할 메서드나 값을 사용자 정의할 수 있게 해줌, 보통 ref를 붙이면..

배열의 요소마다 async 적용 시, for ~ of 사용(.map과 비교) ✅ 핵심 차이 요약구분map(async) for...of + await 목적배열을 변환 (return 결과로 새 배열 생성)단순 반복비동기 제어await가 작동하지 않음 → 병렬 실행await 가능 → 순차 실행사용 추천 상황병렬 처리하고 .then() 또는 Promise.all로 처리할 때순차 실행이 필요할 때 (API 순서 중요 등)

1. 정의- 미래에 완료될 비동기 작업의 최종 완료 또는 실패 결과를 나타내는 객체 2. 왜 사용하는가?Javascript는 싱글 스레드에서 돌아가기 때문에, 시간이 오래 걸리는 비동기 작업(예: API 요청, 타이머, 파일 읽기 등)에 대해 결과가 오기까지 기다릴 수 있도록 하는 방법이 필요함. (기존에는 콜백 함수 구조를 이용했지만, '콜백지옥'이 발생할 수 있는데, Promise는 이를 해결해줌) 3. Promise의 상태 1) pending : 아직 완료되지 않음 2) fullfilled : resolve()가 호출됨 – 성공 3) rejected : reject()가 호출됨 – 실패 4. new Promise()의 형태로 사용하는 이유 - Promise는 클래스임. - 즉, Promi..

1. 동기 / 비동기 1) 동기- 코드가 같은 회기에 실행됨. 즉 한 회기에 모든 코드가 위에서 아래로 순차적으로 실행됨- 작업의 시작 시점이 순차적이라는 뜻임. 2) 비동기 - 코드가 같은 회기 안에 실행되지 않음. 즉 한 회기에 모든 코드가 순차 실행되지 않음. - 시간이 오래 걸리는 작업은 "나중에 처리" 하고 다음 코드부터 실행 ex ) setTimeout, fetch, 이벤트리스너 등 2. async / await 1) await 는 비동기 작업이 끝날 때까지 기다리는 키워드, await가 있으면 해당 줄에서 잠깐 멈췄다가, 완료되면 다음 줄 실행2) await는 async 함수 안에서만 사용 가능3) 기본적으로 모든 코드들은 위에서부터 순차적(동기적)으로 실행되는데, 작업의 시작 시점은 ..

아래와 같은 두 함수 선언 방식의 차이 const 함수명 = () => {}function 함수명 () {}  1. 요약 1) 함수 선언문 : function 함수명() {} - function 키워드를 사용해 선언 - 호이스팅*이 적용됨 - this가 동적임 (일반 함수에서 this는 호출된 컨텍스트를 따름)  2) 함수 표현식 : const 함수명 = () = > {} - const 키워드를 사용해 변수처럼 선언 - 호이스팅이 적용되지 않음 - 화살표 함수로, 이 함수는 this를 부모 스코프에서 유지함  2. this 바인딩 차이 - ()=>{}와 같은 화살표 함수는 this가 변하지 않기 때문에 React 이벤트 핸들러로 사용함.// 1) 함수 선언문 : 일반 함수의 this는 호출된 객체(obj..