아무거나

React + Typescript 에서 FC 를 사용하면 안되는 이유 먼저 React17 이하에서는 아래와 같이 React.FC 사용이 가능하며 React18 이상부터는 없어졌다고 한다. 참고 그러나 FC 를 사용하는건 좋은 방법이 아니며 CRA 에서는 여러가지의 이유로 FC 를 없애야 한다고 이슈가 올라왔었고 반영되었으며 이유는 아래 설명을 참고하자. children 을 암시적으로 가지고 있다. FC 를 이용한 컴포넌트 props 는 type 이 ReactNode 인 Children 을 암묵적으로 가지게 되며 이는 꼭 타입스크립트에 한정하지 않더라도 안티패턴이라고 한다. 왜냐하면 children 이라는 암묵적이었던 키워드는 자식노드가 필요한지 아닌지의 의도를 명확하게 드러낼 수 없다는, 타입의 관점에서..

오래전에 작성된 글을 복사해온거라 직접 테스트 해보는 것을 권장 ( 참고용 정도로만 올렸음 ) Scroll Down 구현 // Render DOM // ref가 지정된 곳으로 포커싱이 될 예정이다. forEach({ .... }) // 스크롤 다운 함수 async handleScrollDown() { if (this.scrollLocationRef && this.scrollLocationRef.current) { this.scrollLocationRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' }) } } // 실행되는 함수 // 동적 추가할 때 마다 새로 생성된 행의 Ref를 찾을 수 없어서 우선 재귀함수로 해결.. (__) this.h..

오래전에 작성된 글을 복사해온거라 직접 테스트 해보는 것을 권장 ( 참고용 정도로만 올렸음 ) Fragments: DOM에 별도 노드를 추가하지 않고 자식 목록을 그룹화 할 수 있다. // 1. Fragments를 사용하면 아래와 같이 된다. render() { return ( ) } // 2. Fragments를 짧은 구문으로 사용한 예시이다. // 짧은 구문은 많은 도구에서 아직 지원하지 않기 때문에 명시적으로 를 사용하자. render() { return ( ) } // 3. key가 있는 Fragments // Fragments에 key가 있다면 문법으로 명시적으로 선언해야 합니다. 예를 들어 정의 목록을 만들기 위해 컬렉션을 fragments 배열로 매핑하는 사용 사례이다. return ( {p..

오래전에 작성된 글을 복사해온거라 직접 테스트 해보는 것을 권장 ( 참고용 정도로만 올렸음 ) useRef 리액트를 사용하면서 가끔씩 직접 DOM을 선택해줘야하는 상황이 발생할 수 있다. 예를 들어 Element의 크기를 가져온다는지, 스크롤을 제어 한다는지 등 다양한 상황에 대해 대응하기 위하여 react에서는 ref를 사용하고 Functional Component에서 ref를 사용하기 위해선 useRef라는 React Hook 함수를 사용한다. import React, { useState, useRef } from 'react'; function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: '' }); const..

Document 체크박스 만들기 state에 checkbox관련 값 정의 this.state = { setCheckedCnt: 0, allChecked: false, } render에 체크박스 관련 값 추가 render() { ... let chkInput // 전체 체크 박스 if (!allChecked || setCheckedCnt === 0) { chkInput = this.handleAllChk()} checked={false} /> } else { chkInput = this.handleAllChk()} checked={true} /> } return ( ... {/* item: 반복문의 element 값, rowIdx: number값 */} handleChk(item.rowIdx)} /> ....

Number값 들어온 값에 따라 0표시 제어하는 함수(개수 입력에 용이하다) // 들어온 값이 0으로 시작되면 0을 잘라내는 함수 let input = e.target.value if (input.toString().startsWith('0')) { input = input.slice(1) }

Scroll Down 구현 // Render DOM // ref가 지정된 곳으로 포커싱이 될 예정이다. forEach({ .... }) // 스크롤 다운 함수 async handleScrollDown() { if (this.scrollLocationRef && this.scrollLocationRef.current) { this.scrollLocationRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' }) } } // 실행되는 함수 // 동적 추가할 때 마다 새로 생성된 행의 Ref를 찾을 수 없어서 우선 재귀함수로 해결.. (__) this.handleScrollDown().then(() => { this.handleScrollDown(..