React: 후크가 있는 클래스 구성 요소 VS 함수 구성 요소

클래스 구성 요소

React Hooks 이전에 동적 구성 요소를 만들려면 클래스 구성 요소를 만들고 수명 주기 메서드를 사용하여 상태를 변경하여 재사용 가능하고 캡슐화해야 합니다.

ES6 클래스를 생성함으로써 클래스는 JSX 마크업을 반환할 React.Component 메서드로 확장render해야 합니다. 또한 생성자의 초기 상태를 this.state 로 할당해야 합니다. 예를 들어 여기에서는 클래스가 있는 간단한 시계 구성 요소를 만듭니다. 시계가 작동하도록 하려면 클래스에 수명 주기 메서드를 추가해야 합니다. 요소를 DOM에 넣습니다. React에서는 mounting라고 합니다. 마찬가지로 DOM에서 요소를 제거합니다. 이를 unmounting 라고 합니다. React에서 구성 요소를 탑재하면 다음 네 가지 기본 제공 메서드가 호출됩니다.

생성자()

getDerivedStateFromProps()

렌더()

componentDidMount()

자세한 내용은 React Doc: Commonly used lifecycle methods에서 읽으십시오.

이 예에서는 생성자에서 초기 상태를 설정하고 매초 시간을 설정하도록 정의했습니다componentDidMount(). 따라서 시계는 현재 시간으로 1초마다 상태를 업데이트합니다.

class ClockUsingClass extends React.Component {
    constructor(props) {
        super(props)
        this.state = { date: new Date() }
    }

    componentDidMount() {
        this.time = setInterval(() => {
            this.changeTime()
        }, 1000)
    }

    componentWillUnmount() {
        clearInterval(this.time)
    }

    changeTime() {
        this.setState({ date: new Date() })
    }

    render() {
        return (
            <div className="clock">
                <h1>Hello! This is a class component clock.</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        )
    }
}

분명히 우리는 클래스 기반 구성 요소의 경우 상태 변경과 함께 작동하도록 하기 위해 몇 가지 단계가 필요하다는 것을 알 수 있습니다.

constructor(props) 및 render() 메서드로 클래스를 생성합니다.

생성자에서 this.state 문으로 초기 상태를 설정하십시오.

this.setState()를 사용하여 상태를 업데이트합니다.

componentDidMount() , componentWillUnmount() , componentDidUpdate() 등과 같은 수명 주기 메서드를 사용하여 상태를 변경합니다.

후크가 있는 함수 구성 요소

Hooks는 React 16.8에 새로 추가되었습니다. Hooks의 가장 유용한 기능은 클래스를 사용하지 않고 상태를 사용할 수 있다는 것입니다.

두 가지 가장 일반적으로 사용되는 후크가 있습니다. 상태 후크 -- useState 및 효과 후크 -- useEffect .

상태 후크를 사용하면 함수 구성 요소에 상태를 추가할 수 있습니다. 생성자에서 this.state 문으로 초기 상태를 설정하는 대신 react에서 { useState }를 가져올 수 있습니다. 그러면 초기 상태를 인수로 설정할 수 있습니다. 상태 후크는 현재 상태와 이를 업데이트하는 함수라는 한 쌍의 값을 반환합니다. 일반적으로 다음과 같이 useState를 사용합니다.

    const [time, setTime] = useState(new Date())

효과 후크는 첫 번째 DOM 업데이트와 함께 호출됩니다. useEffect 함수를 전달할 수 있으며 DOM이 업데이트될 때마다 useEffect 함수도 호출됩니다. 또한 효과 후크를 사용하면 효과 후크를 트리거할 모든 종속성을 포함하는 배열을 두 번째 인수로 전달할 수 있습니다. 종속성이 변경되면 효과 후크가 다시 실행됩니다. 이 기능은 Ajax 요청을 보다 효율적으로 수행할 수 있는 방법을 제공합니다. DOM 업데이트로 매번 요청하는 대신 이러한 값이 변경되는 동안에만 요청하는 종속성을 전달할 수 있습니다.useEffect는 다음과 같이 사용할 수 있습니다.

    useEffect(() => {
        setInterval(() => {
            changeTime()
        }, 1000)
    })

그래서 위에서 만든 시계를 후크로 다시 작성합니다.

const ClockUsingHooks = props => {
    const [time, setTime] = useState(new Date())

    const changeTime = () => {
        setTime(new Date())
    }

    useEffect(() => {
        const tick = setInterval(() => {
            changeTime()
        }, 1000)
        return () => clearInterval(tick)
    })
    return (
        <div className="clock">
            <h1>Hello! This is a function component clock.</h1>
            <h2>It is {time.toLocaleTimeString()}.</h2>
        </div>
    )
}

요약

구성 요소를 만드는 이 두 가지 방법과 비교하면 후크에 필요한 코드가 적고 읽고 이해하기가 더 명확하다는 것을 분명히 알 수 있습니다. 후크는 수명 주기 메서드를 대체하는 보다 효율적인 방법을 제공합니다.

간단한 시계 만들기 레포를 확인해보세요here