분류 전체보기96 react-native 웹뷰로 띄워보기 오늘은 인프런에서 강의를 들었는데, 나중에 웹뷰를 프로젝트에 적용해보면 좋을 것 같아서 오랜만에 기록하려고 한다. 먼저 리액트 네이티브로 웹뷰를 사용하려면 react-native-webview 를 설치해야한다. 평소처럼 yarn install 이런식으로 설치하면 최신 버전이 다운받아지는데, 앱은 expo 버전도 중요하기 때문에 expo 버전에 맞게 설치를 해야한다. expo 버전에 맞게 설치하는 방법은 아래와 같다. npx expo install react-native-webview 이렇게 설치하면 현재 사용중인 expo 버전에 맞게 설치가 가능하다. 모바일에서 웹뷰를 사용하려면 WebView를 import 해서 source uri에 내가 만든 프론트를 연결해줘야 한다. 아래 코드와 같다. imp.. 2025. 11. 6. useImperativeHandle 상위 컴포넌트에서 하위 컴포넌트의 height 값을 동적으로 구할 필요가 생김. useImperativeHandle 와 forwardRef를 활용하여 하위 컴포넌트의 height 값을 동적으로 구할 수 있다. useImperativeHandle 란? 상위 컴포넌트가 하위 컴포넌트의 특정 함수나 값을 호출할 수 있도록 인터페이스를 제공하는데 사용된다. 주로 ref를 전달하는 방식과 함께 사용되며, 부모 컴포넌트가 자식 컴포넌트의 내부 메서드나 값을 제어할 수 있게 만든다. [사용 목적] 부모 컴포넌트에서 자식 컴포넌트의 특정 메서드나 속성에 접근하고자 할 때. 자식 컴포넌트의 내부 상태나 메서드를 외부로 노출할 때. [사용 방법] 1. 하위 컴포넌트에서 forwardRef를 사용해 컴포넌트를 생성 2. .. 2025. 2. 3. 두달차 와오 벌써 두달차라니~~현 회사는 사수가 없다.일단은 주어진 환경 대로 하고 있지만 가끔 잘 하고 있는지 모르겠다.오늘은 팀원이 아직 모달을 열지 않았는데 api 호출이 된다고 했다. 에러를 찾아줘서 확인을 해봤다.확인해보니 useQuery 에 매개변수로 조회해야할 타겟의 id 값을 주고있었는데 이 id 를 전역상태꺼를 사용해서 발생하던 문제였다.전역 상태이다보니 enabled 에 걸어놔도 계속 id 값이 있으니 조회가 되고 있었다.막연하게 enabled 에 !!id 로 필요할 때만 요청할 수 있을 줄 알았는데 전역 상태를 놓쳤다.모달을 눌렀을 때 타겟이 되는 아이디를 useState에 담아서 전역이 아닌 지역 상태로 관리하도록 변경하여 해결했다.좀 더 차근차근 만들어 가야겠다. 2024. 11. 29. SVN 기초 svn 기본1. 저장소에서 파일 가져오기 checkoutsvn 저장소에서 로컬로 파일을 처음 가져올 때 사용svn checkout 2. 파일 상태 확인 status현재 작업 중인 파일의 변경 사항을 확인할 수 있다.(수정된 파일, 추가된 파일, 삭제된 파일 등등)svn status 3. 파일 업데이트 update다른 팀원이 저장소에 커밋한 최신 변경 사항을 로컬에 작업 중인 복사본에 반영할 때 사용svn update 4. 파일 추가 add새로운 파일을 추가했을 경우 사용하여 추가svn add 5. 파일 삭제 delete파일을 삭제할 때 svn 명령어를 사용해서 삭제, 추가도 svn 명령어를 사용하여 작업하는 게 좋음svn delete 6. 변경 사항 커밋 commit로컬에서 수정한 내용을 저장소에 .. 2024. 9. 12. tanstack-query(react-query) staleTime과 refetchInterval을 활용한 네트워크 요청 최소화 방법 tanstack-query의 기초를 다시 보면서 전에 팀 프로젝트를 진행할 때 네트워크 요청이 많아 사용량이 다 차버린 생각이 나서 네트워크 요청을 최소화하는 방법을 찾게 되었다. 상황 및 문제점먼저 네트워크 요청을 줄이려면 tanstack-query의 데이터 캐싱을 사용해야 하는데 기존에는 stale time을 설정하지 않아서 0 이였다. 이 값이 0이면 데이터가 fresh 상태가 되지 않고 계속 stale 상태가 되어 계속 요청을 보내게 된다. tanstack-query의 캐싱 기능을 사용하지 않게 되는 것이다. 그런데 staleTime을 조정해서 캐싱되는 시간을 확보하려고 하는데 문제가 되는 점이 있었다. 예를 들어 내가 좋아요 한 글이 있는데 이 글의 제목이나 유저가 좋아요를 취소하는 등의 변경이.. 2024. 8. 12. [react] useCallback 리액트에서 리렌더링이 빈번한 것은 좋지 않다. 리렌더링을 줄이는 것이 중요한데 이 작업을 최적화한다고 할 수 있다. 불필요한 리렌더링이 발생하지 않도록 하는 최적화 방법에 자주 사용되는 것 중 하나는 바로 useCallback을 사용하는 것이다.이 외에도 컴포넌트를 캐싱하는 memo(React.memo)와 값을 캐싱하는 useMemo가 있다. useCallback오늘 알아볼 훅은 useCallback이다.useCallback은 함수를 캐싱한다고 할 수 있다. 함수를 메모리에 저장하여 매번 새로 생성되지 않도록 할 수 있고, 의존성 배열을 추가하여 원하는 때에 다시 메모리에 저장하도록 지정할 수 있다. 아래의 코드는 App 컴포넌트 하위에 Test 컴포넌트와 FileDrop 컴포넌트가 있는 구조이다. .. 2024. 7. 17. [react] PropsWithChildren 요즘 리액트 기초를 다시 공부 중인데, PropsWithChildren 타입을 알게 됐다. 이 타입은 상위 컴포넌트에서 하위 컴포넌트로 children을 내려줄 때 타입을 지정하는 children : ReactNode를 대체할 수 있다. 마우스 오른쪽 버튼을 눌러서 index.d.ts에 이동하여 type PropsWithChildren 타입을 보면 children을 반드시 설정하지 않아도 되는 선택적인 속성임을 알 수 있다. 만약 꼭! children이 들어가야 한다면 이 속성을 사용하는 것은 바람직하지 않을 것 같다. 꼭 필요한 곳에 children이 들어가지 않았는데도 에러가 나지 않을 것 이기 때문이다.그래서 선택적으로 children이 필요한 곳에는 PropsWithChildren 타입을 사용하고.. 2024. 7. 11. [react] 클래스형 컴포넌트 함수형 컴포넌트는 많이 사용해 봤는데 클래스형 컴포넌트는 사용해 본 적이 없어서 기록하게 되었다. 먼저, 클래스형 컴포넌트는 react의 Component 클래스를 상속받아야 하기 때문에 import 해준다.또한, render 메서드를 포함해야 한다. 아래의 코드는 color와 text 속성을 props로 내려준다.App.tsximport {Component} from 'react'import ClassComponent from './ClassComponent'export default class App extends Component { render() { return ( ) }} color 속성은 style에 적용하여 글.. 2024. 7. 11. 이전 1 2 3 4 ··· 12 다음 반응형
