React 기본 강좌 정리 - 5~7

일단 Component 로 만들고 불필요한 렌더링이 된다면 PureComponent 로 전환 하는 방식을 이용하자

일반적으로 제일 마지막에 있는 컴포넌트는 PureComponent 일 확률이 높다.

라이프사이클

생성시 라이프 사이클 : constructor -> render -> ref 설정해주는 메소드 -> componentDidMount

리렌더링 라이프 사이클 : shouldComponentUpdate -> render -> componentDidUpdate

소멸시 라이프 사이클 : componentWillUnmount -> 소멸

이외의 라이프 사이클은 deprecated 될 예정이므로 사용하지 않는 것이 좋다.

 

componentDidMount 

렌더링이 처음 시도되고 정상적으로 렌더링이 성공했다면 단 한번 호출 될 때 호출되는 메소드. setState 를 쓰고싶은데 render 에서 쓰면 무한루프가 생기니까 어디에 써야할지 모르겠다 싶으면 이쪽에 쓰기도한다. 비동기 요청을 많이 하기도한다.

 

componentWillUnmount

컴포넌트가 제거되기 직전. 컴포넌트의 부모에 의해서 사라질 때도 호출된다. 비동기 동작을 사용하는 코드가 존재한다면 여기서 마무리하는 작업을 반드시 넣어줘야한다. 그렇지 않으면 메모리 누수문제가 발생한다.

 

componentDidUpdate 

componentDidUpdate(prevProps, prevState) => {
    // ...
}

컴포넌트가 리렌더링되고 호출된다. 

 

setInterval

myInterval = setInterval(() -> {
    // ...
}, 1500);

1.5초마다 계속 코드가 동작된다. (컴포넌트가 사라져도, 프로그램이 종료될 때까지 계속 돈다.)

 

clearInterval

clearInterval(myInterval);

 

클로저 문제

비동기 함수가 바깥에 있는 변수를 참조하는 경우 생기는 문제. let 을 써서 클로저 문제를 줄이자.

 

고차함수

onClickHandler = (myValue) => (event) =>{
    event.preventDefault();
}

...

<button onClick={this.onClickHandler("abcdefg")} />

함수를 연달아서 쓰는 경우 단순화 할수 있는 방법이다.

 

setState & render

setState render 를 큐에 저장해서 리액트가 처리하는 방식. setState 를 연달아서 쓰는 경우 setState 를 리액트가 알아서  모아서 처리해주니 걱정하지 않아도된다.

 

useEffect

useEffect(() => {
    // componentDidMount + componentDidUpdate 역할
    return () => {
        // componentWillUnmount 역할
    }
}, []);

Hooks 는 라이프 사이클을 가지고 있지 않다. useEffect 는 이를 해결하기 위해 사용되는 메소드다. useEffect 의 두번째 인자값은 배열이 들어가는데 ~ 값들이 변경될때 useEffect 를 실행하라 라는 의미다. 배열에는 반드시 useEffect 와 연관된 값을 넣어야한다. 빈 배열을 넣으면 뭐가 바뀌든 신경쓰지 않겠다라는 의미다. 컴포넌트의 라이프 사이클을 대체하기 위해 만들어지긴 했지만 이를 컴포넌트의 라이프사이클 메소드와 1:1 대응 할 수 가없다. 다른 개념으로 받아들여야한다.

 

useMemo 

userMemo(() => {
}, []);

시간이 오래걸리고 복잡한 함수 결과 값을 기록하기위해 사용된다. 두번째 인자 값은 inputs 배열이다. inputs 에 들어가는 값은 어떤 인자값이 변경됬을 때 기억을 해지할지를 결정하게 해준다.

 

useCallback

함수 자체를 기억해둬서 컴포넌트가 재실행되도 함수를 새로 만들지 않도록 해준다. 함수 생성 자체가 비용이 너무 클 때 사용한다. useCallback 은 함수에 사용되는 입력값까지 전부 기억하고 있기 때문에 useCallback 안에서 state 를 쓸 때는 조심해야한다. 만약 state 를 쓰는 상황이라면 반드시 같이 쓰이는 두번째 인자에 사용하는 state 를 넣어줘야한다.  두번째 인자는 어떨때 함수를 다시 실행할지를 결정해주는 인자다. 

자식 컴포넌트에 함수를 넘길 때는 넘겨지는 함수가 useCallback 이여야 불필요한 함수 생성을 피할 수 있다.

 

useReducer

useState 가 너무 많으면 하나의 state 로 통일할 수 있다.

const initialState = {
    // ...
}

const reducer = (state, action) => {
    switch(action.type){
        case "MY_ACTION":
            return {
                ...statem
                // 변경되는 코드
            }
    }
}

const MyFunctionalComponent = () => {
    const [state, dispatch] = useReducer(reducer, initialState);
    const onClickHandler = useCallback(() => {
        dispatch({type: "MY_ACTION"});
    }, []);
}

dispatch 안의 객체가 action 이다.

dispatch 를 할 때마다 reducer 가 실행된다.

 

 

Hooks != 함수 컴포넌트

useEffect, useState, useRef 와 같은 것들이 Hooks 다.

- Hooks는 조건문 함수 안에 (가능하면 반복문 안에도) 넣으면 안된다. 함수 컴포넌트 안의 최상위에 놓는 것이 좋다.

- Hooks 안에서 componentDidMmount 와 componentDidUpdate 를 구분해서 쓰는 패턴

const mounted = useRef(false);
useEffect(() => {
    if(!mounted.current){
        mounted.current = true;
        // componentDidMount
    }
    else{
        // componentDidUpdate
    }
}, []);

 

dipatch, action, reducer

1. 이벤트 발생

2. dispatch 호출을 통해 action 요청

3. reducer 실행

4. reducer 에서 요청받은 action 을 보고 state 변경 

액션을 통해서만 state 를 변경하도록 하기도 한다.

 

immer 

얕은 복사를 해주는 라이브러리