컴포넌트의 종류: functional

특징:

1. class 컴포넌트처럼 this. 를 사용하지 않기 때문에 가독성이 좋다.

2. props, state가 바뀔때 마다 함수 블록안의 코드가 전부 재실행된다. (반면 class 컴포넌트는 render함수만 재실행된다.)

코드블록 안에서 설정한 값 또한 이전 값을 기억하지 못하기 때문에 초기값이 설정된 상태로 실행된다.

하지만 리액트 Hook useState를 사용함으로써 리액트는 이전값을 메모리에 저장해 활용할 수 있게된다.

3. 파라미터 = state에 의존적이다.

 

const SimpleHabit = (props) => {
    const [ count, setCount ] = useState(0);

    const handleIncrement = () => {
        setCount( count + 1 );
    };

    return (
        <li className="habit">
            <span className="habit-name">Reading</span>
            <span className="habit-count">{count}</span>
            <button 
                className="habit-button habit-increase"
                onClick={handleIncrement}
            >
                <i className="fas fa-plus-square"></i>
            </button>
        </li>
    )
}

 

2번의 설명대로라면 useState의 초기값이 0 이기 때문에 부모가 props, state를 수정/변경할때 마다 재실행되어서 이전 값을 참조하지 못해 무조건 0으로 부터 로직이 작동되어야 하지만, useState로 인해 이전값을 참조할 수 있어 정상적으로 1씩 증감하는 로직이 작동될 수 있다.

const handleIncrement = () => {
    setCount( count + 1 );

};

 

const handleIncrement = useCallback(() => {
    setCount( count + 1 );
});

 

같은 맹락에서 컴포넌트 안의 함수 또한 재실행의 영향을 받는데 이때 useCallback을 사용함으로써 리액트가 자동으로 캐시하면서 동일한 콜백함수를 전달한다.