React8 클로저에 대해 알아보기 with useState 클로저란 실행 컨텍스트와 렉시컬 스코프의 조합으로 함수가 선언 되었을 당시에 환경을 기억하여 상위 스코프내의 변수에 접근 할 수 있게 해주는 문법이다.아래 함수를 실행해보면 10이 출력되는 것을 통해 inner 함수가 상위 스코프인 outer의 _var를 참조하는 것을 알 수 있다.이는 클로저에 의해 접근 가능한 것.const outer = () => { let _var = 10; const inner = () => console.log(_var); inner();};outer(); // 10아래 함수를 예측해보면 어떻게 출력될까const outer = () => { let _var = 10; const setVar = (newVal) => { _var = newV.. 2024. 10. 9. [React Hooks] useState 분석해보기 (진행 중) useState는 React 깃허브에서 @packages/react/src/ReactHooks.js에서 export 중이다.// @packages/react/src/ReactHooks.jsexport function useState( initialState: (() => S) | S,): [S, Dispatch>] { const dispatcher = resolveDispatcher(); return dispatcher.useState(initialState);}제네릭 타입 S를 담아주면 리턴하는 값은 [S타입, Dispatch>] (S타입에 대한 Dispatch하는 함수)useState의 리턴 값을 알아가기 위해 resolveDispatcher() 라는 함수를 추적function resolveDi.. 2024. 10. 9. [React] 카카오 api를 통해 주소를 좌표로 변환해보기 (undefinded Geocorder) 일단 페이지에 카카오 지도가 열려있다면 단순하게 kakao.maps.services.Geocoder()를 열어서 키워드를 콜백함수에 넣어주면 쉽게 나옴. 아래는 카카오 문서에 있는 예시 // 주소-좌표 변환 객체를 생성합니다var geocoder = new kakao.maps.services.Geocoder();// 주소로 좌표를 검색합니다geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function(result, status) { // 정상적으로 검색이 완료됐으면 if (status === kakao.maps.services.Status.OK) { var coords = new kakao.maps.LatLng(result[0].y, resu.. 2024. 9. 6. @radix-ui 훑어보기 - accordion @radix-ui/accorian primitives/packages/react/accordion/src/Accordion.tsx at main · radix-ui/primitives Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos. - radix-ui/primitives github.com // 사용하는 법 import * as Accordion from '@radix-ui/react-accordion'; import React from 'react'; import classNames from .. 2024. 3. 24. webpack과 babel (feat. CRA) webpack 여러 개의 파일을 하나로 합쳐주는 모듈 번들러 기능 css loader 기능 jsx 변환 작업 여러 개로 나눠진 js 파일을 html이 실행 할 수 있는 하나의 js파일로 합쳐줌 파일 분할(Code Splitting) 애플리케이션 번들에 포함된 코드를 여러 개의 조각/청크 로 분할하는 기술 초기 로딩 시 필요한 최소한의 코드만 다운로드 하여 페이지 로딩 속도 향상 대규모 애플리케이션에 유용 리액트 라우터와 같은 라이브러리와 잘 통합되어 있어, 각 페이지에 필요한 코드만 로딩하게 도와줌 // 동적 import() - 모듈은 필요할 때만 로딩되며 웹팩은 이를 감지하여 해당 모듈을 별도의 청크로 분할 const someModule = import('./someModule.js'); // 웹팩의 .. 2024. 1. 11. [React.js] React Query 에 대해 (feat. SWR 과의 차이) -v3 SWR, React Query 등장 이전 Redux, MobX 등의 상태 관리 라이브러리는 클라이언트 상태 관리에는 유용하지만, 서버 상태와 동기화 되지 않았기 때문에 개발자들이 직접 상태를 업데이트 해줬어야 함. => SWR과 React Query는 이러한 불편함을 해소하기 위해 등장 선언적으로 프로그래밍 가능 여러번 호출 된 동일한 API 요청은 한번만 실행 dirty해진 데이터는 적절한 시점에 알아서 업데이트 Global State 와 Server State의 관심사 분리 react-query가 swr을 앞지르고 있다. React query vs SWR React Query React Query는 리액트 에플리케이션에 서버 상태를 가져와서, 캐싱|동기화|업데이트를 쉽게 해준다 React Query .. 2022. 12. 30. [React.js] video 태그에 동적 값 할당 const Clip= (url:string) =>{ return ( ) } 요렇게 선언했는데 이 후 url 값을 업데이트 해주어도 처음 할당된 영상만 보여지는 상황이 생겼다. 하고 싶은건 버튼 클릭시 url 값이 업데이트 되어 보여지는 영상도 바뀌는 것 이에 대한 해결책으로 video 태그에 키 값을 주거나 ref를 주는 것. const Clip= ( url:string ) => { const videoRef = useRef(); useEffect(() => { videoRef.current?.load(); }, [url]); return ( ); } const Clip=( url:string )=> { return ( ); } 참고 : https://stackoverflow.com/questions/4.. 2022. 12. 29. next.js 의 장단점 2022. 11. 25. 이전 1 다음
