https://github.com/ReactTraining/react-router/releases/tag/v5.1.0

 

Release v5.1.0 · ReactTraining/react-router

Read the blog post List of commits Features Add useParams, useLocation, useHistory, and useRouteMatch hooks (d6224d6) Add support for forwardRef in (b5528ed) Add support for functions in <l...< p=""> </l...<>

github.com

PathVariable 을 받을 때 match 값을 hook으로 받을 수 있게 react router v5에서 추가되었다.

아래와 같이 사용하면 된다.

 

import { useRouteMatch } from 'react-router-dom';

const Component = () => {
	const { params }: any = useRouteMatch();
    
    // /path/:idx
    return (
    	<div>{params?.idx}</div>
    );
};

export default Component;

input 에 focus 를 주기 위해, ref 설정을 하고 focus 를 주었는데, "Object is possibly 'null'" 오류가 계속 발생한다.

if 조건문으로 한번 감싸 주었는데도.. 그래서 아래와 같이 tsconfig.json 을 수정해주었다.

 

// tsconfig.json
{
	...
    "strictNullChecks": false,
    ...
}

React.js 에서 비동기 요청 등의 동작 이후 응답/set state 가 되기 전에 해당 컴포넌트가 unmount 되면서 set state 오류가 나는 경우가 있다. 그럴때는 아래와 같이 해주면 된다.

 

const mounted = useRef(false);

useEffect(() => {
	mounted.current = true;
    () => {
    	mounted.current = false;
    }
}, []);

const fetch = async () => {
	const res = await fetch();
    if (!mounted.current) {
    	return;
    }
    
    // now mounted. do something else
};

array state 의 index 개수 변동이 없을때에는 re-render가 일어나지 않는다.

이럴때에는 새로운 array 로 set state를 해주면 된다.

 

const arr = [1, 2, 3];

setArray([...arr]);

 

 

 

Component 를 Link to 로 연결시에 스크롤이 0 으로 이동되도록 아래와 같이 처리

 

+ Recent posts