this this 키워드 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수self-referencing variable다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. // 객체 리터럴 const circle = { radius: 5, getDiameter() { // this는 메서드를 호출한 객체를 가리킨다. return 2 * this.radius; } }; // 생성자 함수 function Circle(radius) { // this는 생성자 함수가 생성할 인스턴스를 가리킨다. this.radius = radius; }..

21 빌트인 객체 표준 빌트인 객체 모든 js 환경 호스트 객체 브라우저 또는 node 제공 사용자 객체 사용자가 정의한 객체 표준 빌트인 객체 Math, Reflect, JSON를 제외한 표준 빌트인 객체는 인스턴스를 생성할 수 있는 생성자 함수 객체 원시값과 래퍼 객체 원시값에 .으로 접근시 래퍼 객체(임시) 생성 래퍼 객체의 처리가 종료되면 가비지 컬렉션의 대상이 됨 전역 객체 브라우저 node window, self, this 등 global //ES11 이상 // 브라우저 환경 globalThis === this // true globalThis === window // true globalThis === self // true globalThis === frames // true // Node..

리액트 공식문서 학습기록 https://react.dev/learn Reusing Logic with Custom Hooks Custom Hook - 컴포넌트 간 논리 공유 그냥 다른 hook들 모아논 함수 아님? function useOnlineStatus() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEventListener('offline', han..

리액트 공식문서 학습기록 https://react.dev/learn Removing Effect Dependencies 종속성은 코드와 일치해야함 Effect는 반응값에 '반응’함. 그래서 linter는 그게 종속성에 있는지 확인함. 고로 linter가 시키는대로 하셈. 종속성을 제거하고 싶으면 [] 빈배열 던지셈 종속성을 변경하려면 코드를 고치셈 Effect의 코드를 변경하거나 반응값이 선언되는 방식을 변경 linter가 시키는 대로 종속성 조정 맘에 안 들면 1번으로 돌아가서 코드 변경 불필요한 의존성 제거 코드를 이벤트 핸들러로 이동해야하는지 -> 꼭 Effect여야하는지 여부 Effect가 관련없는 일을 하고 있는가? -> 별도 통신을 한다던지 다음 상태를 계산하기 위해 일부 상태를 읽고있는지 -..

리액트 공식문서 학습기록 https://react.dev/learn Separating Events from Effects 이벤트 핸들러와 Effect 중에 선택 이벤트 핸들러 - 상호작용될때(수동) Effect - 동기화가 필요할때(자동) 반응 값 및 반응 논리 컴포넌트 내부에 선언된 props, state 및 변수를 반응값이라고 함. 이벤트 핸들러 내부의 로직은 반응하지 않음. 이펙트 내부의 로직은 반응적임 Effect에서 비반응 로직 추출 useEffectEvent를 사용하자. function ChatRoom({ roomId, theme }) { const onConnected = useEffectEvent(() => { showNotification('Connected!', theme); }); ..

리액트 공식문서 학습기록 https://react.dev/learn Lifecycle of Reactive Effects Effect는 컴포넌트와 라이프사이클이 다름. Effect의 수명 주기 컴포넌트가 마운트되면 React가 동기화를 시작 하고 컴포넌트가 마운트 해제되면 동기화를 중지한다고 생각할 수 있음. 경우에 따라 구성 요소가 마운트된 상태로 유지되는 동안 동기화를 여러 번 시작하고 중지 해야 할 수도 있음. 동기화가 두번 이상 필요한 이유 ex) 채팅방에서 방이 바뀔때 연결을 재설정하는 것을 예제로 들고 있음. Effect를 재동기화하는 법 정리를 하자 Effect의 관점에서 생각하기 컴포넌트 관점 ChatRoomroomId로 설정 하여 장착"general" ChatRoomroomId로 설정하여..

리액트 공식문서 학습기록 https://react.dev/learn You Might Not Need an Effect 불필요한 Effect를 제거하는 방법 렌더링을 위해 데이터를 변환하는데는 Effect가 필요하지 않음. ex) 데이터 필터링 -> 컴포넌트 최상위에서 변환하셈 사용자 이벤트를 처리하기 위해 Effect가 필요하지 않음. ex) /api/buy 요청을 보냈을때 -> 구매버튼 클릭 이벤트 핸들러에서 무슨일이 일어났는지 정확히 알 수 있음. props나 상태 기반으로 상태 업데이트 상태가 변경되면 어차피 리렌더링이 일어나니 불필요한 작업을 줄이자가 핵심인듯 function Form() { const [firstName, setFirstName] = useState('Taylor'); cons..

리액트 공식문서 학습기록 https://react.dev/learn Synchronizing with Effects React에서 Effect는 렌더링으로 인한 부작용을 나타냄. Effect가 필요없을 수 있음 브라우저 API, 타사 위젯, 네트워킹 등 Effect 작성방법 Effect 선언 종속성 지정 - 필요할때만 실행되어야하므로 종속성을 지정하여 이를 제어함. 정리 추가 - connect + disconnect, subscribe + unsubscribe 등 1단계 - Effect 선언 import { userEffect } from 'react'; //컴포넌트 최상위에 호출 const App = () => { useEffect(() => { // }); return ; }; useEffect는 렌..

리액트 공식문서 학습기록 https://react.dev/learn Manipulating the DOM with Refs 노드에 ref 연결 import { useRef } from 'react'; const myRef = useRef(null); inputRef.current.focus(); scrollIntoView 사파리 호환성이 또 발목 잡네 루프 내 사용 ref 콜백 - 속성에 함수를 전달 한줄요약 - ref에 map, object등으로 dom node 관리 다른 컴포넌트의 dom 노드에 접근 아래처럼 ref를 전달 받아야함 import { forwardRef, useRef } from 'react'; const MyInput = forwardRef((props, ref) => { return..

리액트 공식문서 학습기록 https://react.dev/learn Referencing Values with Refs 컴포넌트가 정보를 저장하지만 해당 정보가 새 렌더링을 트리거 하지 않으려면 ref를 사용할 수 있음. 컴포넌트에 ref 추가 import { useRef } from 'react'; const ref = useRef(0); useRef는 다음과 같은 객체를 반환 { current: 0 // ref.current로 접근 } current는 js 객체 이므로 아무거나 넣을 수 있음. 스탑워치 만들어보기 clearInterval에서 호출되는 ID는 렌더링에 사용되지 않으므로 ref에 보관 import { useState, useRef } from 'react'; export default f..