간단한 앱을 구축하여 React Hooks 이해하기

기능적 구성 요소에서 클래스 구성 요소 개념을 사용할 수 있는 후크의 최신 React 기능을 사용하여 간단한 앱을 빌드할 것입니다.

이 시리즈는 Stephen Griderudemy의 "Modern React with Redux"시리즈의 예에서 영감을 받았습니다.

따라서 터미널을 열고 새로운 반응 앱 반응 후크를 만드십시오.

반응 후크

그런 다음 해당 디렉토리로 cd하십시오. 코드 편집기를 열고 반응 애플리케이션을 시작하십시오.

초기 설정

이제 평소와 같이 코드 편집기에서 src 디렉토리로 이동하여 모든 항목을 삭제합니다.

모두 삭제

다음으로 src 폴더에 새 파일 index.js를 만듭니다. 그 내용은 코드 아래에 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(
    <App />, document.querySelector('#root')
);

이제 src 폴더 안에 구성 요소 디렉토리를 만들고 내용이 코드 아래에 있는 새 파일 App.js를 만듭니다.

import React, { Component } from 'react'

class App extends Component {
    render() {
        return (
            <div>
               App is rendered
            </div>
        )
    }
}

export default App;

따라서 초기 설정이 올바른 경우 localhost에서 아래와 같이 표시됩니다.

앱이 렌더링됨

다음으로 App.js를 업데이트하여 다른 텍스트가 표시되는 두 개의 버튼을 클릭합니다.

import React, { Component } from 'react';
import './App.css';


class App extends Component {
    state = { resources: 'posts' };

    render() {
        return (
            <div className="main__container">
                <span className="buttons__container">
                    <button onClick={() => this.setState({ resources: 'posts' })}>Posts</button>
                    <button onClick={() => this.setState({ resources: 'todos' })}>Todos</button>
                </span>
                <span>{this.state.resources}</span>
            </div>
        )
    }
}

export default App;

또한 동일한 폴더에 App.css를 생성하여 약간의 CSS를 추가합니다.

.main__container {
    display: grid;
    place-content: center;
    grid-template-rows: 30px 30px;
    grid-gap: 10px;
}

.buttons__container{
    display: grid;
    grid-template-columns: 100px 100px;
    column-gap: 5px;
    font-size:1.5rem;
}

이제 우리의 앱은 아래와 같이 보입니다.

게시물

이제 앱을 기능 기반 구성 요소로 변경한 다음 후크를 사용할 것입니다.

그래서 다양한 유형의 후크가 있습니다. 아래 다이어그램에 나열되어 있습니다.

다른 유형의 후크

앱에서 상태를 사용하므로 앱에 대한 useState 후크가 필요합니다. 후크를 사용하도록 변경해 보겠습니다. 주요 변경 사항은 굵게 표시되었으며 클래스 기반 앱 구성 요소도 기능적인 구성 요소로 변경되었습니다.

import React, { useState } from 'react';
import './App.css';

const App = () => {
    const [resource, setResource] = useState('posts');

    return (
        <div className="main__container">
            <span className="buttons__container">
                <button onClick={() => setResource('posts')}>Posts</button>
                <button onClick={() => setResource('todos')}>Todos</button>
            </span>
            <span>{resource}</span>
        </div>
    )

}

export default App;

http://localhost:3000/로 이동하여 앱을 확인하면 동일하게 동작합니다. 그것은 우리의 변화가 성공적이라는 것을 의미합니다.

하지만 아래 다이어그램에서 const [resource, setResource] = useState('posts') 행이 무엇을 의미하는지 이해해 봅시다.

useState 설명

useState('posts')는 두 요소의 배열이고 우리는 배열 분해를 수행하고 있으므로 resource=useState('posts')[0] 및 setResource=useState('posts')[1]

다음으로 ResourceList 구성 요소 생성을 시작하지만 먼저 axios를 설치하여 간단한 끝점에 대한 GET 요청을 만듭니다. 따라서 터미널로 이동하여 실행 중인 앱을 중지하고 axios를 설치하십시오.

축 설치

이제 src 디렉터리 안에 새 파일 ResourceList.js를 만듭니다. 여기에 다음 클래스 기반 코드를 추가합니다. 여기에서 우리는 두 가지 수명 주기 메서드인 componentDidMount 및 componentDidUpdate를 사용하고 있습니다. 초기 렌더링 시와 사용자가 버튼을 클릭할 때마다 API 호출을 수행하기 때문입니다.

import React, { Component } from 'react';
import axios from 'axios';

class ResourceList extends Component {
    state = { resources: [] };

    async componentDidMount() {
        const response = await axios.get(`https://jsonplaceholder.typicode.com/${this.props.item}`);
        this.setState({ resources: response.data });
    }

    async componentDidUpdate(prevProps) {
        if (prevProps.item !== this.props.item) {
            const response = await axios.get(`https://jsonplaceholder.typicode.com/${this.props.item}`);
            this.setState({ resources: response.data });
        }
    }

    render() {
        return (
            <div>
                {this.state.resources.length}
            </div>
        )
    }
}

export default ResourceList;

이제 후크를 사용하도록 변경하겠습니다. 수명 주기 메서드에 대한 또 다른 후크인 useEffect가 필요합니다.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const ResourceList = ({ item }) => {
    const [resources, setResources] = useState([]);

    const fetchResource = async (item) => {
        const response = await axios.get(`https://jsonplaceholder.typicode.com/${item}`);
        setResources(response.data);
    }

    useEffect(() => {
        fetchResource(item);
    }, [item])

    return (
        <div>
            {resources.length}
        </div>
    )
}

export default ResourceList;

이제 후크 useEffect는 componentDidMount 및 componentDidUpdate라는 두 가지 수명 주기 메서드의 조합입니다.

useEffect 후크

마지막으로 백엔드 API에서 Todos 또는 Posts의 콘텐츠를 표시하여 앱을 완성해 보겠습니다. ResourceList.js의 return 문에서 다음을 변경합니다.

return (
        <ul>
            {resources.map(record => <li key={record.id}>{record.title}</li>)}
        </ul>
    )

최종 앱은 아래와 같습니다.

최종 앱

이 githublink에서 동일한 최종 코드를 찾을 수 있습니다.