React (5) 함수형 컴포넌트

■ 함수형 컴포넌트란?

- return값이 있는 function과 동일한 구조의 컴포넌트이다.

- 부모 컴포넌트에게서 props로 파라미터를 전달받아 사용할 수 있다.

- render함수가 없기 때문에 return만 사용하여 화면을 그려준다.

- 함수형 컴포넌트에서 state와 생명주기 함수의 기능을 사용해야 하는 경우 비슷한 기능을 제공하는 hook를 추가하면 된다.

※ state가 없고 생명주기 함수를 사용할 수 없다.

 

■ 대표적인 hook함수

● useState()

- state변수값을 선언하게 해주는 메서드(setState메서드와 비슷한 역할)

[표현법]
const [값을 담을 변수, 값을 변경하는 setter함수] = useState(초기값);

- useState메서드는 길이 2짜리 배열을 반환해 주며 이를 구조분해할당을 이용하여 반환된 값을 저장한다.

• 반환된 값을 담아줄 첫번째 인자(count) : state의 변수명
• 반환된 값을 담아줄 두번째 인자(setCount) : count값을 변경해 주는 함수를 저장(setState와 비슷한 역할을 한다.) 

예시)

const [count, setCount] = useState(0);

// 위 코드는 아래 코드와 같다
// const list = useState(0);
// const count = list[0];
// const setCount = list[1];

- count 변수에 초기값을 0으로 설정해준다. (this.state = {count : 0})

- setCount 함수는 state값 중 count를 변경해 주는 함수를 저장한다.(this.setState({count : x}))

 

● userEffect(콜백함수)

- 생명주기 함수 중 componentDidMount와 비슷한 역할을 한다.

- 최초 페이지 로딩시 무조건 한 번은 실행되고 의존성 목록이 바뀔때마다 다시 한번 실행된다.

[표현법]
useEffect(
    () => {
        // 랜더링이 완료된 후 실행할 코드
        return 컴포넌트가 언마운트될 때 실행될 코드(componentWillUnMount와 동일한 역할)
    }, [의존성 목록]
)

- useEffect의 반환값으로 다시 한번 콜백함수를 반환하게 되면 컴포넌트가 소멸할 때 해당 함수를 실행시킨다.

예시)

function TestUseEffect(){

    const [count, setCount] = useState(0);

    const increment = () => setCount(count + 1);

    useEffect(
        () => {
            // 페이지 랜더링이 완료된 후 id값이 btn1인 요소를 찾아서 이벤트 부여
            const btn1 = document.getElementById("btn1");
            if(btn1){
                btn1.addEventListener('click', increment);
                return () => btn1.removeEventListener('click', increment);
                // 컴포넌트가 소멸할 때 추가한 이벤트 제거
            }
        }, [count]
    );

    return(
        <div>
            <button id="btn1">increment</button>
            count :: {count}
        </div>
    )

}

 

● useCallback(콜백함수)

- 매개변수로 들어간 Callback함수를 캐시에 저장하여 빠르게 해당 함수를 실행할 수 있도록 도와준다.(성능최적화에 사용)

[표현법]
useCallback(원본콜백함수, 의존성목록)

예시)

function TestUseCallback(){

        const [count, setCount] = useState(0);

        const increment = useCallback( 
            () => {
                setCount(count + 1)
            }, [count]
        );

        return(
            <div>
                <button onClick={increment}>증가</button>
                count :: {count}
            </div>
        )

}

 

■ 캐시란?

- 데이터나 값을 미리 저장하는 저장소이다.

- 빠르게 저장된 값을 가져오고자 할 때 사용한다.

- React hook에서는 전역변수를 캐시에 저장하여 상태값을 가질 수 있게끔 컨트롤한다.

 

■ 의존성이란?

- 캐시를 갱신시킬 요소이다.

- 리액트에서는 의존성 목록 중 어느것 하나라도 충족(값이 변경)되면 캐시된 값을 자동으로 변경하고 컴포넌트를 다시 랜더링하여 변경사항을 반영한다.

- 보통 useState로 선언한 state상태값을 넣어줘서 state값의 변경이 있을 때 캐시를 갱신시키고 페이지를 재랜더링시킨다.