4/9 TIL

6

1. switch : 한번에 하나의 route를 렌더링 할 수 있는 방법

2. useRouteMatch : 특정한 url에 있는 지의 여부를 알려준다.

7.7

1. non-mutation : 원래 것은 바뀌지 않는다.

const x = [1,2,3];
x.slice(1, 2); // [1]
console.log(x) // [1,2,3]

slice했어도 기존 x는 변하지 않는다.

2. React.memo

props가 변하지 않으면 "컴포넌트를 리렌더링"하지 않게 만든다.

기존)
export default DraggableCard;

변경)
export default React.memo(DraggableCard);

떨림이나 렌더링 낭비 등 을 줄일 수 있다.

7.13

ref

ref란 HTML요소를 가져와서 그걸 변형 할 수 있도록 해준다.
<기존 코드>

function Board({toDos, boardId}:IBoardProps){
    return (
        <Wrapper>
            <Title>{boardId}</Title>
      
    //...
}

<적용코드>

import { useRef } from "react";

function Board({toDos, boardId}:IBoardProps){
    const inputRef = useRef<HTMLInputElement>(null);
    const onClick = () => {
        // onClick이 작동되면, inputRef가 연결된 input칸에 focus가 간다.
        inputRef.current?.focus(); 
        // onClick이 작동되면, inputRef가 연결된 input칸에 5초뒤에 focus가 사라진진다.
        setTimeout(() => {
            inputRef.current?.blur();
        }, 5000);
    }
    

    return (
        <Wrapper>
            <Title>{boardId}</Title>
            <input ref={inputRef} placeholder="grab me!" />
            <button onClick={onClick}>click me</button>

자바스크립트와 React.js를 이용해 모든 HTML의 method에 접근할 수 있다.

8.3

<기본>

 <Box 
        transition={{ type: "spring", delay : 0.5}}
        initial={{ scale : 0}} 
        animate={{ scale : 1, rotateZ: 360 }}
      />

<variants 사용코드>

const myVars = {
  start : { scale : 0 },
  end : { scale: 1, rotateZ: 360, transition : { type: "spring", delay : 0.5 }}
}
//...
<Box variants={myVars} initial="start" animate="end"/>