아무거나

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..

Fragments: DOM에 별도 노드를 추가하지 않고 자식 목록을 그룹화 할 수 있다. // 1. Fragments를 사용하면 아래와 같이 된다. render() { return ( ) } // 2. Fragments를 짧은 구문으로 사용한 예시이다. // 짧은 구문은 많은 도구에서 아직 지원하지 않기 때문에 명시적으로 를 사용하자. render() { return ( ) }

모바일에서 Input Text 에 값을 입력 시 하단 키패드 때문에 화면 가려지는 현상 해결 // 예를 들어 state에 사이즈 조절 또는 display:none 을 할 state를 추가 inputAutoSize: string // function ( 해당 예제는 class에 display:none 을 주어 화면이 안잘리게 하는 방법으로 진행 ) handleFocusIn = () => { this.setState({ inputAutoSize: 'none' }) } handleFocusOut = () => { this.setState({ inputAutoSize: '' }) } // html ( stype을 state로 관리하여 포커스에 따라 display css 설정이 제어된다. ) TEST DIV DI..

값 입력 후 포커싱 자동 이동 예제(ex:핀 번호) 하기 HTML의 input 태그 설정을 사용하게되면 모바일에서 숫자만 입력 가능한 키패드가 표시된다. // react + typescript ... class PinLogin extends React.Component { ... pinCodeNumFocus2: React.RefObject pinCodeNumFocus3: React.RefObject pinCodeNumFocus4: React.RefObject pinCodeNumFocus5: React.RefObject pinCodeNumFocus6: React.RefObject constructor(props) { super(props) this.state = {} this.pinCodeNumFocus2..

React Hook을 이용한 Functional Component 구현 // tsx import * as React from 'react' ... interface IProps { history?: History, } interface IStateProps {} interface IState { testVal: string, } type Props = IProps & IStateProps const Home: React.FC = ({ history }) => { const [state, setState] = React.useState({ testVal: 'TEST', }) const { testVal } = state // componentDidMount React.useEffect(() => {} //..

ex) path: /boards/:boardNo const boardNo = match.params.boardNo ex) path: /detail/:type const type = match.params.type

history.push() 가 동작이 안하는 경우가 있다. 이럴 경우 컴포넌트 설계나 선언부 측에 문제가 있다. 하지만 급하게 수정해야 할 경우 아래와 같이 작업하자. // react 링크 이동 안될때 태그를 활용 // react 페이지 reload 안될 때 꼼수(주소가 동일할 경우 발생) -> 해당 방법은 진짜 급한경우가 아니면 절대로 사용하지 말자.. route 에서 redirect를 이용 ex) /app/user/reload -> /app/user 왠만하면 커스텀 팝업같이 표시해야 하는 경우는 제일 상위 컴포넌트 레벨에 선언하고 하위 컴포넌트로 전달받아 사용하도록 하자.