Hook 유의사항

Hook은 순서가 매우 중요

• 최상위 바깥에 선언해서 실행순서가 일정하게 하는 것이 중요
• if문에 넣는것 금지 -> if(조건) useState(값)
• hook안에 hook을 쓰는것 금지 -> useEffect안에 useState를 쓰는 등
• 반복문은 상관없음 -> 비추천

hook과 라이플 사이클

// componentDidMount useEffect(() => { // 실행 할 로직 }, []); // componentDidUpdate const mounted = useRef(false); useEffect(() => { if(!mounted.current) mounted.current = true; // 실행 할 로직 }, [/*변경되는값*/]); // componentDidMount, componentDidUpdate 둘다 useEffect(() => { // 실행 할 로직 }, [/*변경되는값*/]);

hooks에서 최적화

useMemo(callback, [변경되는값]);

• 두번째 배열이 바뀌기전까지 값을 기억
• 함수 컴포넌트는 매번 함수가 새로 그려지며 실행되기 때문에 한번만 실행되면 되는 함수도 계속 호출되는 문제 발생
• 변경되는 값이 없다면 한번만 실행후 값을 보관하는 역할로 쓸 수 있다.

useRef()와 useMemo() 차이점

• useRef : 클래스로 치면 멤버변수 혹은 dom객체 처럼 특정한 '값'만 기억해야 할 때
• useMemo : 복잡한 함수의 'retur값'을 기억해야 할 때

useCallback(callback, [변경되는값]);

• 두번째 배열이 바뀌기전까지 함수 자체를 기억
• 함수 생성 자체가 오래걸리는 경우 쓰면 최적화에 도움됨
• 변경되는 값이 없다면 state 값을 맨처음 값만 기억(console로 확인)
• 변경되는 값이 있을때 새로운 값을 기억할 수 있다.
• 자식컴포넌트에 함수를 props로 내릴때는 useCallback을 반드시 사용(자식 리렌더링 방지)

useMemo()와 useCallback() 차이점

• useMemo : '함수 return 값'을 기억
• useCallback : '함수 reference'를 기억

React-Link to로 화면전환시 맨위로 스크롤가게하기

>Link to를 활용해 화면전환을 할때, 아래쪽에서 버튼을 눌러 하면 그대로 아래에 위치해서, ux상에 좋지 않은 경우가 있다. 그럴땐 아래와 같이 해주면 된다.

<Router onUpdate={() => window.scrollTo(0, 0)} history={createBrowserHistory()}>

... </Router>

위의 설정으로도 되지 않는다면, componentDidMount를 바꿔주면 된다.

아래와 같이 설정해주면된다.:

componentDidUpdate() { window.scrollTo(0,0); }