My Boundary As Much As I Experienced

가물가물해서 다시 정리

배우게 된 계기사람들이 하도 form 구현 시 React-hook-form이 좋다고 해서언젠가 한 번 써봐야지 했다가 이번에 만드는 초기앱 회원가입에 써보기를 고려하였다. 사실 처음엔 useState와 useEffect가 가장 직관적이지 않나? 이걸로도 충분한데..라는 생각이 지배적이었는데 알고보니 매우 개발자를 편하게 해주는 좋은 라이브러리였다. React-hook-form의 최대 장점: 관리할 상태가 엄청나게 줄어든다.아래는 내가 취업 전 부트캠프 파이널 프로젝트로 했던 코드이다.호텔 예약 매물 양도 플랫폼이 컨셉이었는데, 예약 과정에서 관리해야될 상태들이 너무 많았다.호텔 취소 물품의 1차 가격, 2차 가격, 2차 가격 설정 여부, 계좌등록여부, 은행, 계좌번호, 약관 동의1/2/3/4를 포함해서...

공부하게 된 계기리액트네이티브로 ref를 쓸 때 아래같은 에러가 나올 때가 있다. 딱 봐도 ForwardRef를 쓰라는 얘기같은데자세히 보면 함수형 컴포넌트에선 직접 ref를 받을 수 없다는 얘기다. 지금까지 리액트 웹개발하면서함수형 컴포넌트에서 ref를 props로 잘만 사용해왔는데??? 이상하다. 왜 리액트네이티브에선 이런 에러가 나는가?Warning: Function components cannot be given refs.Attempts to access this ref will fail. Did you mean to use React.forwardRef()? 일단 그전에 props와 ref를 비교해보자. Props와 Ref의 비교props는 데이터와 이벤트 핸들러를 전달하기 위한 용도: prop..

함수 커링이란?함수가 인자를 하나씩 받아가며 최종 결과를 도출하는 함수 패턴이다.아래와 같은 형식이 된다고 생각하면 된다.(params1) => (params2) => { return }도대체 이걸 왜 쓰나.. 싶었는데 가끔 나름 요긴하게 쓰게된다.주로 한 번에 prop을 결정짓지 못할 때 사용하게 된다.(이 단계에서는 이 prop이 결정되고, 저 단계에서는 저 prop이 결정되고...)예시를 들어보겠다. 내가 직면한 문제 - 기존 컴포넌트에 prop을 추가적으로 넣어야하는데 못하는 상황(?)나는 최근에 리액트네이티브의 FlatList를 다뤄야하는 일이 있었다.FlatList는 리액트네이티브가 제공하는 대규모 데이터 배열을 처리하기 위한 스크롤 뷰이다.(뷰포트에 있지 않는 데이터는 렌더하지 않는 win..

forwardRef란?챗지피티의 설명에 따르면, '자식 컴포넌트의 DOM 엘리먼트 또는 클래스 인스턴스에 접근할 수 있도록 하는 기능을 제공한다'라고 한다. 그런데 그냥 쉽게 말해서 '자식 컴포넌트에 ref를 props로 내려줘야'할 때 써야한다. 예를 들어 아래와 같은 경우, ref로 어떤 DOM 요소를 관찰하려고 하는데, 단순 jsx태그가 아니라컴포넌트인 경우 이렇게 ref를 내려줘야한다. 이때 ref라는 이름으로 내려주면 forwardRef를 써야한다는 경고가 나온다. props의 이름으로 아무거나 임의로 쓸 수 있는거 같지만, 'ref'같은 이름은 예약어로 forwardRef를 쓸때만 사용할 수 있는 것이다. 사용법부모 컴포넌트에서 ref를 만들어서 내려준다. (여기서 그냥 inputRef={in..

Next.js 12 Page Router의 커스텀 페이지 레이아웃(getLayout)을 사용하는 것을 보며JSX에 {...props} 식으로 모두 뿌려주는게 대강 모든 Props를 다시 주는것이겠거니하고 넘어갔다.그러나 현재 제대로 한 번 정리할 필요가 있겠다고 생각했다. 1. 하위 컴포넌트에게 객체 속성 전파아래 props라는 객체를 MyCompoent에 props로 넣는 예제이다.const props = { name: 'John', age: 30, location: 'New York'}; 위 코드는 아래 코드와 결과적으로 같다. 그래서 아래처럼 상위 컴포넌트에서 받은 props를 바로 자식 컴포넌트에 내려주는 방식으로 사용 가눙하다.interface MyProps { id: 101, clas..

ReactComponent를 찾을 수 없다는 에러 해결법예전 사이드 프로젝트 진행 도중 UX디자이너 분이 네비게이션 바를 바꾸셨다.react-icons에 있는 기성 아이콘이 아닌 커스텀 svg아이콘을 쓰게 되어 svgr을 쓰게 됐다.그런데 아래 에러가 뜨는 것이다. Module '"*.svg"' has no exported member 'ReactComponent'.Did you mean to use 'import ReactComponent from "*.svg"' instead?  챗지피티에게 물어본 결과, 헛소리밖에 듣지 못했다.아무래도 SVGR의 최신버전을 쓰면서 뭔가 다른 문법으로 바뀐 것으로 의심되었다.찾아보니 SVGR을 4버전 이상으로 이용할 때 svg를 import하는 방식이 달라졌다. 아래..

🧞‍♂️ 혹여 틀린 부분이 있다면 댓글로 알려주시면 감사드리겠습니다. 퀴즈. 부모가 재렌더되면 자식들은 재렌더될까 안 될까?기본적으로 재렌더 된다. 재렌더를 막기 위해 'useCallback' 혹은 'React.memo'를 쓰게 되는 것이다.부모가 자식한테 prop을 아무것도 안 내려주고 있고 자식은 그저 부모에게 마운트만 되어있다고 치자.부모의 state들은 사실 자식에게 하등 상관없지만 부모의 state가 바뀌어 재렌더되면 자식도 재렌더된다. 컴포넌트 재렌더를 막기위한 대표수단 React.memo이걸 막기 위해 쓰는 것이 React.memo이다. 리액트 컴포넌트를 메모이제이션해놓는 방법 중 하나이다.쉽게 말해 캐싱해두고 변하지 않게 하는 방법이다.아래 예시는 이전에 설명한 것처럼 아무런 prop도 ..

클래스 컴포넌트란?클래스 컴포넌트는 React에서 사용되는 컴포넌트의 한 종류이다.이전에는 주로 클래스 컴포넌트가 주류였지만, 최근에는 함수형 컴포넌트와 훅을 이용한 상태 관리가 더욱 표준적으로 쓰인다. 클래스 컴포넌트는 render() 메서드를 포함하여 여러 생명주기 메서드를 사용할 수 있다는 특징이 있다.(임의로 메서드를 추가하는 것도 가능하다.) 함수형 컴포넌트에서는 hook로 이런 주기를 조작할 수 있으나 그 자유도는 클래스형보다 낮다. 클래스 컴포넌트의 특징- React.Component 클래스를 상속받아서(extends하여) 정의된다.- render() 메소드로 view로직을 처리함- 생명주기 메서드를 사용할 수 있음 라이프 사이클 메서드의 분류라이프사이클 메서드의 종류는 총 9가지이지만 크게..

MSW란?Mock Service Worker의 준말이다.이때 Service Worker는 앱의 백그라운드에서 실행되는 브라우저가 제공하는 기능이다.브라우저와 앱의 중간에서 이벤트를 listening하고 있는 존재라고 보면 된다.(PWA나 Firebase Cloud Message같은 기능들을 구현해보려고 했던 개발자들은 사용해본 경험이 있을 것이다.) Mock이란 단어에서 알 수 있듯이, MSW는 브라우저의 백그라운드에서 비동기 api통신 호출을 가로채서 가짜 응답을 해주는 Proxy의 역할을 한다. 왜 필요한가? 백엔드에서 API를 아직 주지 않았을 때, api 명세서대로 객체를 생성하여일단 호출 받았다 치고 화면 구현해본 경험이 다들 있을 것이다.그러나 이런 방식으로 모사하는건 마크업을 확인하는 용도로..