[카테고리:] 리액트 기초 강좌

리액트 강좌: 비주얼 스튜디오 코드 활용하기

리액트는 현대 웹 개발에서 가장 인기 있는 라이브러리 중 하나로, 사용자 인터페이스(UI)를 효율적으로 구축할 수 있도록 돕습니다. 본 강좌에서는 비주얼 스튜디오 코드(Visual Studio Code, 이하 VS Code)를 사용하여 리액트 프로젝트를 설정하고 개발하는 방법에 대해 알아보겠습니다.

1. 비주얼 스튜디오 코드 소개

VS Code는 마이크로소프트가 개발한 소스 코드 편집기로 다양한 프로그래밍 언어를 지원합니다. 가벼우면서도 강력한 기능을 제공하기 때문에 많은 개발자들에게 사랑받고 있습니다. VS Code의 주요 기능으로는 다음과 같습니다:

  • 확장성과 커스터마이징
  • 내장형 터미널
  • 버전 관리(Git) 통합
  • 디버깅 지원
  • 다양한 테마와 아이콘 패키지

2. 환경 구축

2.1 VS Code 설치하기

먼저, VS Code를 설치해야 합니다. 여기를 방문해 운영 체제에 맞는 버전을 다운로드하고 설치합니다. 설치 과정은 간단한 클릭 과정으로 이루어져 있습니다.

2.2 Node.js와 npm 설치하기

리액트를 사용하기 위해서는 Node.js와 npm(Node Package Manager)이 필요합니다. Node.js는 자바스크립트 런타임 환경이며, npm은 자바스크립트 패키지를 관리하는 도구입니다. 아래 링크에서 설치 프로그램을 다운로드하고 설치합니다:

설치가 완료되면, 터미널에서 다음 명령어를 입력하여 설치가 정상적으로 이루어졌는지 확인할 수 있습니다:

node -v
npm -v

2.3 Create React App으로 리액트 프로젝트 만들기

VS Code와 Node.js, npm을 설치한 후, 새로운 리액트 애플리케이션을 생성할 수 있습니다. Create React App을 사용하면 모든 설정이 자동으로 구성된 기본 리액트 프로젝트를 생성할 수 있습니다. 다음 명령어를 실행하여 프로젝트를 생성합니다:

npx create-react-app my-app

위에서 my-app는 생성할 프로젝트의 이름입니다. 원하는 이름으로 변경할 수 있습니다. 명령어가 완료되면, 해당 디렉토리로 이동합니다:

cd my-app

3. VS Code에서 프로젝트 열기

VS Code를 실행한 후, 상단 메뉴에서 파일 > 폴더 열기를 선택하고, 생성한 my-app 폴더를 선택합니다. 이제 프로젝트 구조를 확인할 수 있습니다.

4. 프로젝트 구조 이해하기

Create React App을 사용하여 생성된 기본 프로젝트 구조는 다음과 같습니다:

  • node_modules/: 프로젝트에서 사용하는 모든 패키지가 저장됩니다.
  • public/: 정적 파일이 포함되어 있으며, HTML 템플릿이 위치합니다.
  • src/: 애플리케이션의 코드가 위치하며, 주로 자바스크립트 및 CSS 파일이 들어 있습니다.
  • package.json: 프로젝트에 대한 정보를 포함하고, 의존성 및 스크립트를 관리합니다.
  • README.md: 프로젝트에 대한 설명서 파일입니다.

5. 개발 환경 설정

5.1 Code Formatting과 Linting

코드 스타일을 일관되게 유지하고, 코드의 품질을 향상시키기 위해 ESLint와 Prettier를 설정합니다. 터미널에서 다음 명령어로 두 패키지를 설치합니다:

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev

이후, 프로젝트의 루트 디렉토리에 .eslintrc.js와 .prettierrc 파일을 생성하여 설정을 추가합니다. .eslintrc.js 파일의 내용은 다음과 같습니다:

module.exports = {
    env: {
        browser: true,
        es2021: true,
    },
    extends: [
        'eslint:recommended',
        'plugin:react/recommended',
        'prettier',
    ],
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: 12,
        sourceType: 'module',
    },
    plugins: [
        'react',
        'prettier',
    ],
    rules: {
        'prettier/prettier': 'error',
    },
};

그리고 .prettierrc 파일에는 다음과 같은 설정을 추가할 수 있습니다:

{
    "semi": true,
    "singleQuote": true
}

5.2 VS Code 확장 프로그램 설치

VS Code의 확장 프로그램은 편리한 개발 도구로, 리액트 개발에 유용한 몇 가지 확장을 설치합니다. 추천하는 확장 프로그램은 다음과 같습니다:

  • ESLint
  • Prettier – Code formatter
  • Simple React Snippet
  • Reactjs code snippets

확장 기능은 좌측 사이드바의 Extensions 아이콘을 클릭한 후, 검색창에 각각의 이름을 입력하여 설치할 수 있습니다.

6. 리액트 기본 개념

리액트를 이해하기 위해서는 몇 가지 기본 개념을 알아야 합니다:

  • 컴포넌트(Component): 리액트 애플리케이션의 기본 구성 요소입니다. 컴포넌트는 JavaScript 함수로 정의되며, 코드 재사용을 돕습니다.
  • JSX: JavaScript XML의 약자로, HTML과 유사한 문법을 사용해 UI를 표현합니다.
  • 상태(State): 컴포넌트의 데이터 상태를 나타내며, 데이터가 변경될 때 리렌더링이 발생합니다.
  • 속성(Props): 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다.

7. 리액트 컴포넌트 만들기

이제 리액트 컴포넌트를 생성해보겠습니다. src/ 폴더에 MyComponent.js라는 파일을 생성하고, 다음 코드를 입력합니다:

import React from 'react';

const MyComponent = () => {
    return (
        

            
안녕하세요, 리액트!

            
이것은 나의 첫 번째 리액트 컴포넌트입니다.

        

    );
};

export default MyComponent;

이제 src/App.js 파일에서 이 컴포넌트를 사용해보겠습니다. 코드를 다음과 같이 업데이트합니다:

import React from 'react';
import MyComponent from './MyComponent';

function App() {
    return (
        

            
        

    );
}

export default App;

8. 리액트 라우팅 설정하기

리액트 애플리케이션에서 페이지 간 이동을 구현하기 위해 react-router-dom 라이브러리를 사용합니다. 다음 명령어로 이 패키지를 설치합니다:

npm install react-router-dom

이제, 라우팅을 설정할 수 있습니다. src/App.js 파일을 다음과 같이 수정합니다:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import MyComponent from './MyComponent';

function App() {
    return (
        
            
                
                
            
        
    );
}

export default App;

위 코드에서 AboutComponent는 새롭게 추가할 컴포넌트입니다. 같은 방식으로 새로운 컴포넌트를 생성하여 라우팅할 수 있습니다.

9. API와의 통신

리액트 애플리케이션에서 외부 API와 통신하기 위해 axios와 같은 라이브러리를 사용할 수 있습니다. 다음 명령어로 axios를 설치합니다:

npm install axios

axios를 사용하여 데이터를 가져오는 간단한 예제를 소개하겠습니다. 아래와 같이 src/MyComponent.js를 수정합니다:

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

const MyComponent = () => {
    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios('https://api.example.com/data');
            setData(result.data);
        };

        fetchData();
    }, []);

    return (
        

            
데이터 가져오기 예제

            
    
                {data.map(item => (
                    
  • {item.title}
    • 
                ))}
            

        

    );
};

export default MyComponent;

10. 애플리케이션 빌드 및 배포

개발이 완료되면 애플리케이션을 빌드하여 배포할 준비를 해야 합니다. 빌드는 다음 명령어로 수행할 수 있습니다:

npm run build

위 명령어를 실행하면 build/ 폴더가 생성되고, 최적화된 정적 파일이 해당 폴더에 생성됩니다. 이 파일들을 선택한 호스팅 서비스에 업로드하여 배포할 수 있습니다.

11. 결론

이 강좌에서는 비주얼 스튜디오 코드와 리액트를 사용하여 웹 애플리케이션을 개발하는 방법에 대해 알아보았습니다. 리액트를 활용하여 동적인 사용자 인터페이스를 구축할 수 있으며, VS Code의 다양한 기능을 통해 효율적인 개발 환경을 구축할 수 있습니다. 앞으로 더 깊이 있는 리액트와 프론트엔드 개발 기술을 학습하시길 바랍니다!

리액트 강좌: 비동기 처리

리액트(React)는 컴포넌트를 기반으로 한 UI 라이브러리로, 사용자 인터페이스를 구축하는 데 널리 사용됩니다. 특히, 비동기 처리(Asynchronous Processing)는 현대 웹 애플리케이션에서 핵심적인 역할을 하며, API와의 상호작용 및 데이터 로딩을 효율적으로 처리하는데 필수적입니다.

1. 비동기 처리의 이해

비동기 처리는 코드가 실행되는 동안 다른 작업을 진행할 수 있게 해주는 프로그래밍 패러다임입니다. 이는 주로 다음과 같은 상황에서 필요합니다:

  • HTTP 요청을 보내고 응답을 기다리는 동안, 다른 작업을 수행하고 싶을 때
  • 파일을 읽거나 쓰는 작업이 시간이 걸릴 수 있을 때
  • 시간이 일정하게 걸리는 타이머를 설정할 경우

1.1 동기 vs 비동기

동기(Synchronous) 처리는 작업이 순차적으로 이루어지는 방식입니다. 즉, 한 작업이 완료되기 전까지 다음 작업이 시작되지 않습니다. 반면 비동기(Asynchronous) 처리는 작업이 시작되면, 해당 작업의 결과를 기다리지 않고 다른 작업을 동시에 수행할 수 있는 방식입니다.

1.2 비동기 처리의 필요성

웹 애플리케이션에서는 사용자 경험을 최적화하기 위해 비동기 처리가 필요합니다. 예를 들어, 사용자가 버튼을 클릭하여 데이터를 로딩할 때, 비동기적으로 데이터를 요청하면, UI가 멈추지 않고 사용자에게 빠른 피드백을 줄 수 있습니다.

2. 리액트에서 비동기 처리하기

리액트에서 비동기 처리를 구현하는 방법에는 여러 가지가 있으며, 대표적으로는 Promise, async/await, 그리고 리액트의 상태 관리 툴을 통해 수행할 수 있습니다.

2.1 Promise 사용하기

Promise는 비동기 작업의 성공 또는 실패를 나타내는 객체입니다. Promise 객체를 사용하여 비동기 작업을 처리하는 방법은 다음과 같습니다:


const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = "데이터 로딩 완료!";
            resolve(data);
        }, 2000);
    });
};

fetchData().then(response => {
    console.log(response);
}).catch(error => {
    console.log(error);
});

2.2 async/await 사용하기

async/await 구문은 Promise를 보다 쉽게 사용할 수 있는 문법입니다. 이 구문을 사용하면 비동기 코드가 마치 동기적으로 실행되는 것처럼 보이게 됩니다:


const fetchData = async () => {
    try {
        const response = await new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("데이터 로딩 완료!");
            }, 2000);
        });
        console.log(response);
    } catch (error) {
        console.log(error);
    }
};

fetchData();

2.3 리액트의 API와 비동기 처리

리액트에서 API와의 비동기 통신은 주로 useEffect 훅을 통해 이루어집니다. useEffect 훅은 컴포넌트가 렌더링될 때 사이드 이펙트를 발생시키는 데 사용됩니다:


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

const DataFetchingComponent = () => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch('https://api.example.com/data');
                const result = await response.json();
                setData(result);
            } catch (error) {
                console.error('Error fetching data:', error);
            } finally {
                setLoading(false);
            }
        };
        fetchData();
    }, []);

    if (loading) {
        return 
로딩 중...
;
    }

    return (
        

            
데이터:

            
{JSON.stringify(data, null, 2)}




    );

};


export default DataFetchingComponent;




2.4 상태 관리 도구와 비동기 처리


리액트의 상태 관리를 위한 도구들(예: Redux, MobX) 역시 비동기 처리를 지원합니다. Redux는 Redux Thunk 또는 Redux Saga를 통해 비동기 액션을 다룰 수 있도록 해줍니다.


3. 에러 처리 및 로딩 상태 관리


비동기 작업을 수행할 때, 에러 처리 및 로딩 상태를 관리하는 것은 매우 중요합니다. 사용자에게 로딩 스피너를 보여주거나, 에러 메시지를 표시하는 방식으로 UX를 개선할 수 있습니다. 아래는 간단한 에러 처리 및 로딩 상태 관리 예제입니다:



const DataFetchingComponent = () => {
    const [data, setData] = useState(null);
    const [error, setError] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch('https://api.example.com/data');
                if (!response.ok) {
                    throw new Error('네트워크 응답이 이상합니다');
                }
                const result = await response.json();
                setData(result);
            } catch (error) {
                setError(error.message);
            } finally {
                setLoading(false);
            }
        };
        fetchData();
    }, []);

    if (loading) return 
로딩 중...
;
    if (error) return 
에러 발생: {error}
;

    return 
{JSON.stringify(data)}
;
};



4. 결론


리액트에서 비동기 처리는 주로 API와의 상호작용과 데이터 로딩을 관리하는 데 중요한 역할을 합니다. Promise, async/await 및 다양한 상태 관리 도구를 통해 효율적으로 비동기 작업을 처리할 수 있습니다. 올바른 비동기 처리 방법을 이해하고 구현함으로써, 사용자에게 보다 나은 경험을 제공할 수 있습니다.


5. 추가적인 자료

리액트 강좌: 불필요한 함수 재생성 방지하기

리액트는 컴포넌트 기반의 프론트엔드 라이브러리로, 효율적이고 즐거운 사용자 인터페이스를 구축하기 위한 수단을 제공합니다. 그러나 리액트에서 컴포넌트를 작성하다 보면, 불필요하게 함수가 재생성되는 문제를 종종 만나게 됩니다. 이는 성능 저하를 초래할 수 있으며, 따라서 리액트 애플리케이션의 효율성을 높이기 위한 방안이 필요합니다.

1. 함수가 재생성되는 이유

리액트에서는 컴포넌트가 렌더링될 때마다 JSX가 실행됩니다. 이 과정에서 함수도 다시 실행되며 새로운 함수 인스턴스가 생성됩니다. 이는 다음과 같은 상황에서 발생할 수 있습니다:

  • 컴포넌트 내부에서 정의된 일반 함수
  • 이벤트 핸들러
  • 효과 훅(useEffect)의 의존성 배열에 포함된 함수

이러한 함수들이 매 렌더링마다 새롭게 생성되면, 특히 성능이 중요한 애플리케이션에서는 성능 저하가 발생할 수 있습니다.

2. 불필요한 함수 재생성을 방지하는 방법

2.1. useCallback 훅 활용하기

useCallback 훅은 특정 의존성이 변경될 때만 함수를 재생성할 수 있게 해줍니다. 이는 불필요한 렌더링을 방지하는 데 기여합니다. 다음의 예를 통해 살펴보겠습니다:

import React, { useState, useCallback } from 'react';

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

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

        return (
            

                
Count: {count}

                
            

        );
    }

위의 예시에서 increment 함수는 useCallback을 사용하여 메모이제이션되어, Counter 컴포넌트의 재렌더링 시 불필요하게 함수가 재생성되는 것을 방지합니다.

2.2. useMemo 훅 활용하기

useMemo 훅은 계산된 값을 메모이제이션하여 성능을 최적화할 수 있게 해줍니다. 복잡한 계산을 수행하는 함수를 메모이제이션함으로써 성능을 개선할 수 있습니다.

import React, { useState, useMemo } from 'react';

    function FactorialCalculator() {
        const [number, setNumber] = useState(1);

        const factorial = useMemo(() => {
            const calculateFactorial = (n) => {
                return n <= 0 ? 1 : n * calculateFactorial(n - 1);
            };
            return calculateFactorial(number);
        }, [number]);

        return (
            

                 setNumber(e.target.value)} />
                
Factorial: {factorial}

            

        );
    }

위의 예시에서는 number 상태가 변경될 때만 팩토리얼 계산이 실행되며, 내부 함수가 불필요하게 재생성될 필요가 없습니다.

2.3. 클래스 컴포넌트에서 bind 메소드 사용 피하기

클래스 컴포넌트에서는 메소드가 재생성되는 것을 피하기 위해 생성자에서 this.methodName = this.methodName.bind(this);와 같은 방식으로 바인딩을 수행하거나, 화살표 함수를 사용하여 메소드를 정의하는 것이 좋습니다.

class MyComponent extends React.Component {
        constructor(props) {
            super(props);
            this.handleClick = this.handleClick.bind(this); // 생성자에서 바인딩
        }

        handleClick() {
            console.log('Clicked!');
        }

        render() {
            return ;
        }
    }

3. 성능 테스트 및 최적화 확인하기

성능 최적화를 위한 방법을 적용한 후에는 가급적 프로파일링 도구를 이용해 성능 변화를 확인해야 합니다. 리액트의 React DevTools에서 제공하는 프로파일링 기능을 통해 렌더링 성능을 측정할 수 있습니다. 이를 통해 불필요한 렌더링이 발생하고 있는지 확인하고, 필요 시 추가적인 최적화를 고려해야 합니다.

4. 결론

리액트 애플리케이션에서 불필요한 함수 재생성을 방지하는 것은 성능 개선을 위해 매우 중요한 작업입니다. useCallback과 useMemo 훅을 적절히 활용하면 불필요한 렌더링을 방지할 수 있으며, 클래스 컴포넌트에서의 바인딩 방식 또한 고려해야 합니다. 성능 최적화는 반복적인 과정임을 명심하고, 지속적으로 애플리케이션의 성능을 모니터링하며 개선해 나가야 합니다.

5. 참고 자료

리액트 강좌: 불필요한 컴포넌트 리렌더 방지하기

1. 들어가며

리액트는 사용자 인터페이스를 구축하기 위한 매우 강력하고 유연한 라이브러리입니다. 그러나, 각종 컴포넌트가 렌더링되는 방식 때문에 성능 문제가 발생할 수 있습니다. 특히, 불필요한 컴포넌트 리렌더링은 애플리케이션의 성능을 저하시킬 수 있습니다. 이번 강좌에서는 리액트에서 불필요한 컴포넌트 리렌더링을 방지하기 위한 다양한 기법을 살펴보겠습니다.

2. 리렌더링의 이해

리액트에서는 상태(state)나 속성(props)이 변경되면 해당 컴포넌트가 리렌더링 됩니다. 비록 이라는 기본적인 동작이 정상적이지만, 과도한 리렌더링은 성능 이슈를 초래할 수 있습니다. 따라서 리렌더링을 효과적으로 관리하는 것이 중요합니다.

2.1. 리렌더링이 발생하는 경우

리액트에서 리렌더링이 발생하는 주요 경우는 다음과 같습니다:

  • 컴포넌트의 state가 변경될 때
  • 컴포넌트의 props가 변경될 때
  • 부모 컴포넌트가 리렌더링될 때 자식 컴포넌트도 리렌더링됨

2.2. 과도한 리렌더링의 비용

불필요한 리렌더링은 다음과 같은 문제를 초래합니다:

  • 성능 저하: 렌더링이 자주 일어나면 애플리케이션 반응 속도가 느려질 수 있습니다.
  • 메모리 사용 증가: 리렌더링으로 인해 불필요한 메모리 사용이 증가할 수 있습니다.
  • 유저 경험 저하: 애플리케이션 속도가 느려지면 사용자 경험에도 부정적인 영향을 미칩니다.

3. 불필요한 리렌더링 방지하기

3.1. React.memo 사용하기

리액트는 React.memo라는 고차 컴포넌트를 제공하여 컴포넌트의 리렌더링을 방지할 수 있습니다. React.memo를 사용하면 동일한 props가 전달될 경우 컴포넌트를 리렌더링하지 않습니다.

import React, { memo } from 'react';

const MyComponent = memo(({ title }) => {
  return <h1>{title}</h1>;
});

3.2. useMemo와 useCallback

리액트의 훅 중 useMemo와 useCallback을 사용하면 리렌더링을 최적화할 수 있습니다. 이들은 각각 메모이제이션된 값을 반환하고, 메모이제이션된 함수를 반환하여 불필요한 렌더링을 방지합니다.

import React, { useMemo, useCallback } from 'react';

const MyComponent = ({ items }) => {
  const total = useMemo(() => calculateTotal(items), [items]);
  const handleClick = useCallback(() => {
    console.log('Clicked!');
  }, []);

  return (
    <div>
      <h1>Total: {total}</h1>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

3.3. PureComponent와 shouldComponentUpdate

클래스형 컴포넌트에서는 PureComponent를 상속받아 불필요한 리렌더링을 방지할 수 있습니다. PureComponent는 기본적으로 props와 state의 얕은 변화를 비교하여 변경이 없으면 리렌더링을 방지합니다.

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    return <h1>{this.props.title}</h1>;
  }
}

3.4. 상태 관리 최적화

상태 관리 라이브러리(예: Redux, MobX)를 사용하여 전역 상태를 관리하면 불필요한 리렌더링을 줄일 수 있습니다. 상태를 적절히 분리하여 특정 컴포넌트만 리렌더링되도록 할 수 있습니다.

4. 리렌더링 최적화 방법 사례

다음은 리렌더링 최적화를 적용한 예제입니다.

import React, { useState, memo } from 'react';

const Item = memo(({ item }) => {
  console.log('Item rendered');
  return <div>{item.name}</div>;
});

const ItemList = ({ items }) => {
  return items.map(item => <Item key={item.id} item={item} />);
};

const MyComponent = () => {
  const [items, setItems] = useState([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }]);
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <h1>Counter: {counter}</h1>
      <button onClick={() => setCounter(counter + 1)}>Increment Counter</button>
      <ItemList items={items} />
    </div>
  );
};

5. 결론

리액트 애플리케이션에서 성능을 최적화하기 위해서는 불필요한 컴포넌트 리렌더링을 방지하는 것이 필수적입니다. React.memo, useMemo, useCallback, PureComponent와 같은 다양한 기법을 활용하면 보다 성능이 뛰어난 애플리케이션을 만들 수 있습니다. 여러분의 리액트 프로젝트에 최적화를 적용하여 더 나은 사용자 경험을 제공해보세요!

리액트 강좌: 변수와 상수

리액트는 현대 웹 애플리케이션을 구축하는 데 가장 널리 사용되는 자바스크립트 라이브러리 중 하나입니다. 리액트를 효과적으로 사용하기 위해서는 자바스크립트의 기초 개념, 특히 변수와 상수에 대한 이해가 필요합니다. 이 글에서는 리액트에서 변수와 상수를 사용하는 방법을 깊이 있게 탐구하겠습니다.

1. 변수란 무엇인가?

변수는 데이터를 저장하는 공간으로, 필요에 따라 그 값을 변경할 수 있는 특성을 가지고 있습니다. 자바스크립트에서는 var, let, const 세 가지 키워드를 사용하여 변수를 선언할 수 있습니다.

1.1 var 키워드

var는 가장 오래된 변수 선언 방법으로, 함수 스코프를 가집니다. 이는 var로 선언된 변수가 함수 내에서만 유효함을 의미합니다. 전역 스코프에서는 언제든지 접근할 수 있습니다.

var x = 10;
if (true) {
    var x = 20; // 같은 스코프 내에서 x를 재정의
}
console.log(x); // 출력: 20

1.2 let 키워드

let은 블록 스코프를 가지며, 이를 통해 묶음(블록) 내에서만 유효한 변수를 선언할 수 있습니다. 이는 변수의 범위를 더욱 세밀하게 제어할 수 있게 해줍니다.

let y = 10;
if (true) {
    let y = 20; // 다른 블록 스코프 내에서 재정의
}
console.log(y); // 출력: 10

1.3 const 키워드

const는 상수를 선언하는 데 사용되며, 선언 후에는 값을 변경할 수 없습니다. 마찬가지로 const도 블록 스코프를 가집니다.

const z = 30;
if (true) {
    const z = 40; // 다른 블록 스코프 내에서 재정의
}
console.log(z); // 출력: 30

2. 리액트에서 변수 사용하기

리액트에서는 변수와 상수를 UI를 구성하는 데 사용됩니다. 주로 컴포넌트의 상태를 저장하거나, props로 데이터를 전달하는 데 사용합니다.

2.1 컴포넌트의 상태

리액트 컴포넌트의 상태는 useState 훅을 사용하여 선언합니다. 이 상태는 컴포넌트가 렌더링될 때 값이 변경될 수 있습니다.

import React, { useState } from 'react';

const Counter = () => {
    const [count, setCount] = useState(0); // count 변수를 선언

    return (
        

            
현재 카운트: {count}

            
        

    );
}

2.2 Props를 통한 데이터 전달

컴포넌트 간에 데이터를 전달할 때 props를 사용합니다. props는 컴포넌트의 속성으로, 변수처럼 사용할 수 있습니다.

const Greeting = ({ name }) => {
    return 
안녕하세요, {name}님!
;
}

const App = () => {
    return ;
}

3. 상수를 사용하는 방법

상수는 변하지 않는 값을 의미하므로, 코드의 가독성을 높이고 버그를 줄이는 데 도움을 줍니다. 리액트에서는 주로 상수로 스타일이나 설정 값을 정의합니다.

const API_URL = "https://api.example.com/data";

const fetchData = async () => {
    const response = await fetch(API_URL);
    const data = await response.json();
    console.log(data);
}

4. 변수와 상수를 활용한 예제

변수와 상수를 라이프 사이클에 맞춰 활용하는 방법을 다뤄보겠습니다. 아래는 리액트에서 API 요청을 보내고 데이터를 표시하는 간단한 예제입니다.

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

const DataFetcher = () => {
    const [data, setData] = useState([]);
    const API_URL = "https://api.example.com/data";

    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch(API_URL);
            const result = await response.json();
            setData(result);
        };

        fetchData();
    }, []);

    return (
        
    
            {data.map(item => (
                
  • {item.name}
    • 
            ))}
        

    );
}

5. 변수와 상수 Best Practices

  • 변수명은 의미 있게 작성하라: 변수명은 그 용도를 명확하게 나타내도록 작성한다.
  • 상수는 대문자 사용: 상수는 대문자와 밑줄(_)로 구분하여 정의한다.
  • 스코프를 의식하라: 변수와 상수의 스코프를 명확히 이해하고 작성할 것.

결론

리액트에서 변수와 상수를 올바르게 사용하는 것은 안정적이고 유지보수가 쉬운 코드를 작성하는 데 매우 중요합니다. 위의 내용들을 바탕으로 변수와 상수를 효과적으로 활용해 보시기 바랍니다.

이 강좌가 도움이 되셨다면, 댓글로 남겨주세요!