본문 바로가기

개발 학습74

잘 사용하지 않은 React use Hook - 3 1. useImperativeHandleuseImperativeHandle은 함수 컴포넌트에서 생성된 ref 객체의 인스턴스를 조작하고 사용자 정의 메서드를 노출할 때 사용하는 Hook입니다. 이 Hook은 주로 부모 컴포넌트가 자식 컴포넌트의 인스턴스를 직접적으로 조작해야 할 때 사용됩니다.import React, { useRef, useImperativeHandle, forwardRef } from 'react';// 자식 컴포넌트const ChildComponent = forwardRef((props, ref) => { const internalRef = useRef(); useImperativeHandle(ref, () => ({ focus: () => { internalRef... 2024. 8. 22.
개발간에 썼던 React use Hook - 2 1. useContext컴포넌트 트리 전체에 데이터를 공유할 수 있도록 해주는 기능으로 Redux를 대체할 수 있습니다. 단계1. createContext를 사용해 초기상태값을 넣어 새로운 컨텍스트 객체를 생성2. ContextProvider 컴포넌트를 사용하여 하위 컴포넌트들 에게 context값 업데이트하고 전달3. useContext를 사용하여 context값을 불러옴 💥 useContext 주의점컴포넌트 구조와 의존성 관리: useContext를 사용하여 컴포넌트에서 Context를 가져올 때, 컴포넌트의 구조와 의존성을 고려해야 합니다. Context를 너무 많이 사용하면 컴포넌트 간의 의존성이 복잡해질 수 있습니다. 필요한 경우에만 useContext를 사용하여 컴포넌트 간의 의존성을 최소화.. 2024. 8. 22.
개발간에 썼던 React use Hook - 1 1. useCallback부모컴포넌트에서 자식컴포넌트로 onClick 함수를 전달해주는 상황일 때 2가지 상황에 대해 생각해보자const Root = () =>{ return ( console.log('click !')}> console.log('click !')}> console.log('click !')}> )}const Number = ({onClick}) =>{ return( 버튼 ) 해당코드는 Number 컴포넌트로 onClick 함수를  직접 생성해서 전달해주기 때문에 렌더링이 발생할 때 마다 새로 함수다 생성된다. const Root = () =>{ const onClick = () =>{ console.log('clic.. 2024. 8. 22.
(2) 타입스크립트 type Symbol 고유하고 수정 불가능한 값으로 만들어준다. 접근제어에 용이 1. 타입으로 사용하여 소문자 symbol 2. 함수로 사용하여 대문자 Symbol Symbol("value") // 고유한 값 생성 Undefined & Null 둘다 소문자로만 존재한다. config를 만지면 모든 타입에 서브타입으로 존재할 수 있다. --strictNullChecks를 사용하면 null과 undefined를 자시자신 타입에만 사용 할 수 있다. 이 경우 유니온 타입으로 사용 할 수 있다. void 타입에는 undefined만 올 수 있다. 자바스크립트 런타임에서 typeof로 null은 object가 나오고 undefined는 undefined가 나온다. object 타입이 object { } | [ ] decl.. 2022. 7. 14.
(1) 타입스크립트 설정 기본 타입스크립트 설치 1. npm i typescript -g 로 전역설치 타입스크립트 컴파일러 tsc test.ts 처럼 tsc 명령어를 사용해 컴파일해서 plain한 자바스크립트 파일로 만들어줌 tsc로 전체 컴파일시 컴파일 옵션 설정 tsc --init 를 사용하여 tsonfig.json을 생성후 tsc명령어시 폴더안에 든 ts파일들이 옵션에 맞게 모두 컴파일 됨 .ts 파일 변경시 자동으로 자바스크립트가 컴파일 되도록 설정 = 와치모드 (watch mode) tsc -w 2022. 7. 12.
jwt 인증 보호되어 있는 글 입니다. 2022. 7. 1.