라이브스마트 - 1034 중 898 번째 페이지 -

스프링 부트 백엔드 개발 강좌, 12.2 깃허브 액션 사용하기

안녕하세요! 이번 강좌에서는 스프링 부트 애플리케이션의 CI/CD(지속적 통합/지속적 배포)를 자동화하는 방법인 깃허브 액션에 대해 알아보겠습니다. 깃허브 액션은 GitHub 저장소에 직접 통합된 CI/CD 도구로, 소프트웨어 개발 워크플로우를 자동화하는 데 매우 유용합니다. 이번 글에서는 깃허브 액션의 기본 개념부터 설정, 그리고 스프링 부트 프로젝트에 적용하는 방법을 다룰 것입니다.

1. 깃허브 액션이란?

깃허브 액션(GitHub Actions)은 GitHub에서 제공하는 CI/CD 플랫폼으로, 프로젝트 저장소의 이벤트에 따라 다양한 작업을 자동으로 수행할 수 있게 해줍니다. 코드가 푸시되거나 PR(Pull Request)이 만들어질 때, 특정 워크플로우를 실행하여 테스트를 수행하고, 빌드를 만들고, 배포하는 등의 작업을 자동으로 처리할 수 있습니다.

1.1 깃허브 액션의 특징

유연성: 사용자 정의 워크플로우와 작업을 쉽게 만들 수 있으며, 수많은 오픈 소스 액션을 활용할 수 있습니다.
버전 관리: 각 액션은 버전 관리를 지원하여, 특정 버전의 액션을 사용하여 일관된 환경을 유지할 수 있습니다.
안전성: 다양한 보안 도구와 인증 기능을 제공하여, 프로덕션 환경에서의 안전성을 보장합니다.

2. 준비하기

먼저, 깃허브 액션을 사용하기 위해서는 깃허브에서 리포지토리를 생성해야 합니다. 이미 리포지토리가 있다면, 그 리포지토리에 액션을 추가하면 됩니다.

2.1 GitHub 계정 생성

GitHub 계정이 없다면, 여기서 가입하세요.

2.2 새 리포지토리 만들기

GitHub에 로그인한 후, 오른쪽 상단의 ‘+’ 버튼을 클릭하고 ‘New repository’를 선택하세요. 리포지토리 이름, 설명, 공개 여부 등을 설정한 후 ‘Create repository’를 클릭하여 새 리포지토리를 생성합니다.

3. 간단한 스프링 부트 애플리케이션 만들기

이제 스프링 부트 애플리케이션을 개발해보겠습니다. Spring Initializr를 이용하여 기본 구조를 생성하겠습니다.

3.1 Spring Initializr 사용하기

다음 링크에 접속하여 프로젝트를 설정합니다: Spring Initializr. 필요한 의존성을 선택하고 ‘Generate’ 버튼을 클릭하여 zip 파일을 다운로드합니다. 이제 이 파일을 풀고, IDE에서 엽니다.

3.2 기본 코드 작성하기

간단한 REST API를 만들기 위해 아래의 코드를 작성합니다.

@RestController
public class HelloController {
    @GetMapping("/hello")
    public String hello() {
        return "안녕하세요, 스프링 부트!";
    }
}

4. 깃허브 액션 설정하기

이제 깃허브 액션을 설정하여 자동 빌드와 실행 테스트를 추가해보겠습니다.

4.1 .github/workflows 디렉토리 만들기

프로젝트 루트 디렉토리에 .github/workflows 디렉토리를 만듭니다. 이곳에 액션의 정의 파일을 위치시킬 것입니다.

4.2 워크플로우 파일 생성하기

워크플로우 파일은 YAML 형식으로 작성됩니다. 아래의 코드를 java_ci.yml라는 파일에 기록합니다.

name: Java CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Check out code
      uses: actions/checkout@v2

    - name: Set up JDK 11
      uses: actions/setup-java@v1
      with:
        java-version: '11'
        
    - name: Build with Gradle
      run: ./gradlew build

4.3 워크플로우 설명

위의 코드에서 on 키워드 다음에 정의한 push와 pull_request는 해당 이벤트가 발생했을 때 워크플로우를 실행하도록 설정합니다. jobs에는 여러 작업을 정의할 수 있으며, 각 작업은 특정 환경에서 실행됩니다. 필요한 스크립트를 실행하기 위해 각 단계에서 steps을 정의합니다.

5. 테스트 추가하기

이제 스프링 부트 애플리케이션의 테스트 코드를 추가해 보겠습니다. 다음과 같이 간단한 단위 테스트를 추가합니다.

@SpringBootTest
public class HelloControllerTest {

    @Autowired
    private MockMvc mockMvc;

    @Test
    public void helloShouldReturnMessage() throws Exception {
        mockMvc.perform(get("/hello"))
               .andExpect(status().isOk())
               .andExpect(content().string("안녕하세요, 스프링 부트!"));
    }
}

5.1 테스트 워크플로우 업데이트

위에서 작성한 YAML 파일에 테스트를 실행하는 명령어를 추가합니다.

- name: Run tests
      run: ./gradlew test

6. 커밋하고 푸시하기

모든 변경 사항을 커밋하고 원격 리포지토리에 푸시합니다.

git add .
git commit -m "Add GitHub Actions workflow"
git push origin main

6.1 워크플로우 실행 확인하기

GitHub 리포지토리의 ‘Actions’ 탭으로 이동하여 워크플로우가 성공적으로 실행되었는지 확인합니다. 빌드가 성공적으로 완료되면 모든 설정이 올바르게 구성된 것입니다.

결론

이번 강좌에서는 스프링 부트 애플리케이션에서 깃허브 액션을 사용하여 CI/CD를 간단하게 설정하는 방법을 배웠습니다. 자동화된 워크플로우를 통해 개발 및 배포 프로세스를 효율적이고 일관되게 유지할 수 있습니다. 지속적으로 깃허브 액션을 활용하여 프로젝트의 품질을 높여보세요!

추가 자료

리액트 강좌: 형 변환

리액트는 자바스크립트 라이브러리로, UI를 구축하기 위해 설계되었습니다. 리액트의 상태(state)와 속성(props)은 종종 데이터를 다루기 위한 형 변환을 필요로 합니다. 이 강좌에서는 형 변환의 개념과 이를 리액트 애플리케이션 내에서 사용하는 방법에 대해 자세히 설명하겠습니다.

형 변환이란?

형 변환(Type Conversion)은 데이터의 형을 다른 형으로 변환하는 과정을 의미합니다. 예를 들어, 문자열(string)을 숫자(number)로 또는 그 반대로 변환하는 것이 형 변환의 일반적인 예입니다. 자바스크립트에서는 자동 형 변환과 명시적 형 변환 두 가지 방법이 있습니다.

자동 형 변환

자바스크립트는 필요에 따라 자동으로 형 변환을 수행합니다. 이는 동적 타입 언어인 자바스크립트의 특성 중 하나입니다. 예를 들어:


const num = 5;
const str = "10";
const result = num + str; // 결과는 "510"

위의 코드에서 숫자 5와 문자열 “10”을 더하면, 숫자 5가 자동으로 문자열로 변환되어 “510”이라는 문자열 결과를 생성합니다.

명시적 형 변환

명시적 형 변환은 개발자가 직접 형 변환을 수행하는 것을 의미합니다. 자바스크립트에서는 여러 형 변환 함수를 제공합니다:

Number(value): 문자열이나 불리언을 숫자로 변환합니다.
String(value): 숫자나 불리언을 문자열로 변환합니다.
Boolean(value): 값의 진리값을 Boolean으로 변환합니다.

리액트에서의 형 변환

리액트 애플리케이션에서 형 변환은 매우 중요한 역할을 합니다. 사용자가 입력한 데이터를 처리할 때 주로 형 변환이 필요합니다. 예를 들어, 사용자가 입력한 숫자를 처리하거나 API에서 받은 데이터를 적절한 형으로 변환하는 등의 작업이 있습니다.

폼 데이터 처리

리액트에서는 폼 데이터 처리 중 전달된 값의 형을 정확히 이해하고 변환하는 것이 중요합니다. 예를 들어, 입력 필드를 만들어 사용자로부터 숫자를 입력받는 경우, 입력값은 항상 문자열로 전달됩니다. 이 경우, 해당 값을 숫자로 변환해야 합니다.


import React, { useState } from 'react';

function NumberInput() {
    const [number, setNumber] = useState(0);

    const handleChange = (event) => {
        setNumber(Number(event.target.value)); // 문자열을 숫자로 변환
    };

    return (
        
            
            입력한 숫자: {number}
        
    );
}

위 코드에서는 사용자가 입력한 값을 Number() 함수를 사용해 숫자로 변환하고 있습니다.

API 데이터 처리

리액트에서 외부 API로부터 데이터 요청을 할 때, 응답 데이터의 형을 처리하는 것도 중요합니다. 일반적으로 API 응답은 JSON 형식으로 오며, 이 데이터를 적절한 형태로 변환해야 합니다.


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

function ApiData() {
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(jsonData => {
                const processedData = jsonData.map(item => (
                    {
                        id: Number(item.id), // id를 숫자로 변환
                        name: String(item.name) // name을 문자열로 변환
                    }
                ));
                setData(processedData);
            });
    }, []);

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

위 코드에서는 API로부터 받아온 데이터에서 id는 숫자로, name은 문자열로 변환하여 사용하고 있습니다.

형 변환의 주의사항

형 변환을 사용할 때 몇 가지 주의할 점이 있습니다:

NaN: 숫자로 변환할 수 없는 문자열은 NaN을 반환합니다. 예: Number('text')는 NaN이 됩니다.
유효성 검사: 데이터 형 변환 전 입력값의 유효성을 검사해야 합니다. 올바르지 않은 형 변환이 일어나지 않도록 주의해야 합니다.
의도치 않은 결과: 자동 형 변환에 의해 발생할 수 있는 의도치 않은 결과에 주의해야 합니다. 예를 들어, 0 == '0'은 true를 반환하지만, 0 === '0'은 false를 반환합니다.

결론

리액트에서 형 변환은 데이터를 표현하고 처리하는 데 필수적입니다. 다양한 방법으로 형 변환을 사용하는 방법을 배웠고, 이를 통해 입력 폼 및 API 데이터 처리에서 발생할 수 있는 오류를 예방할 수 있습니다. 이 강좌를 통해 리액트 애플리케이션 내에서 형 변환을 효과적으로 사용하는 방법을 익힐 수 있기를 바랍니다.

리액트 강좌: 함수의 불필요한 재호출 방지하기

리액트(React)는 사용자 인터페이스를 구축하기 위한 강력한 라이브러리로, 특히 단일 페이지 애플리케이션(SPA)에서 빠르고 효율적인 렌더링을 가능하게 합니다. 하지만 자주 발생하는 문제 중 하나는 함수가 불필요하게 재호출되는 것입니다. 이 글에서는 함수의 불필요한 재호출을 방지하는 방법과 그 이유에 대해 알아보겠습니다.

1. 함수 재호출의 원인

리액트에서는 컴포넌트의 상태(state)나 속성(props)의 변화가 있을 때마다 해당 컴포넌트를 리렌더링합니다. 이 때, 컴포넌트 내의 모든 함수가 재호출될 수 있습니다. 불필요한 함수 호출은 성능 저하로 이어질 수 있으므로 최적화를 필요로 합니다. 일반적으로 함수 재호출의 원인은 다음과 같습니다:

상태(State)의 변경
속성(Props)의 변경
부모 컴포넌트의 재렌더링

2. useCallback 훅 이용하기

함수 컴포넌트에서 불필요한 재호출을 방지하기 위해, useCallback 훅을 사용할 수 있습니다. useCallback 훅은 특정 의존성 배열이 변경되지 않는 한, 같은 함수를 반환합니다. 이를 통해 불필요한 함수 재호출을 방지할 수 있습니다.


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

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

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

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
        </div>
    );
};

2.1 useCallback의 사용 예

위의 코드에서 increment 함수는 useCallback에 의해 메모이제이션(memoization)됩니다. 이 경우, setCount를 호출할 때 마다 새로운 함수를 생성하지 않고, 의존성 배열이 빈 배열이므로 컴포넌트가 처음 렌더링되는 동안 한 번만 생성되어 재호출됩니다.

3. useMemo 훅으로 성능 최적화

useMemo 훅은 메모이제이션을 통해 특정 값의 재계산을 방지하는데 사용됩니다. 함수 호출이 아닌 값을 메모이제이션 할 때 유용합니다. useMemo 훅을 통해 연산의 필요성을 줄일 수 있습니다.


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

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

    const computedValue = useMemo(() => {
        return count * 2;
    }, [count]);

    return (
        <div>
            <p>Computed Value: {computedValue}</p>
            <button onClick={() => setCount(c => c + 1)}>Increment Count</button>
        </div>
    );
};

3.1 useMemo의 사용 예

위 코드에서 useMemo는 computedValue를 count가 변경될 때만 재계산합니다. 이를 통해 성능을 최적화하고 불필요한 계산을 줄일 수 있습니다.

4. 최적화를 필요로 하는 컴포넌트

함수의 불필요한 재호출을 방지하기 위해 최적화해야 할 컴포넌트의 유형은 다음과 같습니다:

상태 관리가 복잡한 컴포넌트
렌더링 비용이 높은 컴포넌트
부모 컴포넌트가 자주 업데이트 되는 자식 컴포넌트

5. 리렌더링 추적하기

개발자 도구의 리액트 탭을 통해 실제로 어떤 컴포넌트가 렌더링되고 있는지 추적하는 것도 좋은 방법입니다. 이를 통해 성능 저하가 발생하는 부분을 진단하고 최적화할 수 있습니다.

6. 결론

리액트에서 함수의 불필요한 재호출을 방지하는 것은 애플리케이션의 성능을 개선하는 중요한 작업입니다. useCallback와 useMemo를 통해 불필요한 재호출을 방지할 수 있으며, 이러한 최적화 기법을 잘 활용하면 더욱 효율적이고 사용성이 높은 리액트 애플리케이션을 만들 수 있습니다.

이 안내서를 통해 여러분이 리액트에서 함수의 재호출을 효과적으로 최적화하는 방법을 이해하는 데 도움이 되었기를 바랍니다!

리액트 강좌: 컴포넌트와 상태

리액트(React)는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. 리액트는 컴포넌트 기반 아키텍처를 채택하고 있으며, 이로 인해 개발자는 재사용 가능한 UI 구성 요소를 만들 수 있습니다. 본 강좌에서는 리액트의 핵심 개념인 ‘컴포넌트’와 ‘상태’에 대해 깊이 있게 다룰 것입니다.

1. 컴포넌트란?

컴포넌트는 리액트의 기본 빌딩 블록으로, UI를 구성하는 작은 조각입니다. 각 컴포넌트는 독립적으로 작동하며, 다른 컴포넌트와 결합하여 복잡한 사용자 인터페이스를 형성합니다.

1.1. 컴포넌트의 종류

리액트 컴포넌트는 크게 두 가지 종류로 분류됩니다.

클래스 컴포넌트: ES6 클래스를 사용하여 정의된 컴포넌트입니다. 상태(state)를 관리할 수 있습니다.
함수형 컴포넌트: JavaScript 함수로 정의된 컴포넌트입니다. 최근에는 훅(Hooks)이라는 기능을 도입하여 상태를 관리할 수 있게 되었습니다.

1.2. 컴포넌트 생성

리액트 컴포넌트는 다음과 같이 생성할 수 있습니다.

import React from 'react';

class MyComponent extends React.Component {
    render() {
        return <h1>안녕하세요, 리액트!</h1>;
    }
}

위의 예제는 클래스를 선언하여 ‘MyComponent’라는 컴포넌트를 정의하고, 이를 사용하여 “안녕하세요, 리액트!”라는 텍스트를 화면에 렌더링하는 간단한 컴포넌트입니다.

2. 상태(state)란?

상태는 컴포넌트의 데이터나 값을 의미합니다. 컴포넌트의 상태는 내부적으로 저장되며, 상태가 변경될 경우 컴포넌트는 자동으로 다시 렌더링됩니다.

2.1. 상태의 사용

클래스 컴포넌트에서 상태를 사용하려면, constructor 메서드에서 초기 상태를 정의하고, `this.setState()` 메서드를 사용하여 상태를 업데이트합니다.

class MyStateComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }
    
    increment = () => {
        this.setState({ count: this.state.count + 1 });
    }
    
    render() {
        return (
            <div>
                <p>현재 카운트: {this.state.count}</p>
                <button onClick={this.increment}>증가</button>
            </div>
        );
    }
}

위의 예제에서 ‘MyStateComponent’는 카운트를 증가시키는 기능을 가진 컴포넌트입니다. `increment` 메서드를 호출하면 상태가 변경되고, 이로 인해 컴포넌트가 다시 렌더링됩니다.

2.2. 함수형 컴포넌트에서의 상태 관리

함수형 컴포넌트에서 상태를 관리하기 위해 React의 `useState` Hook을 사용합니다. 아래는 상태를 사용하는 함수형 컴포넌트의 예시입니다.

import React, { useState } from 'react';

const MyFunctionalComponent = () => {
    const [count, setCount] = useState(0);
    
    const increment = () => {
        setCount(count + 1);
    }
    
    return (
        <div>
            <p>현재 카운트: {count}</p>
            <button onClick={increment}>증가</button>
        </div>
    );
}

3. 상태가 컴포넌트에 미치는 영향

상태는 컴포넌트의 UI를 동적으로 변화시키는 중요한 요소입니다. 상태가 바뀌면 컴포넌트와 관련된 모든 부분이 다시 렌더링되며, 이로 인해 최신 상태를 반영한 UI가 제공합니다.

3.1. Props와 State의 차이점

컴포넌트 간에 데이터 전달 시 사용되는 ‘props’와, 컴포넌트 내부의 데이터를 관리하는 ‘state’는 서로 다른 개념입니다. props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터이며, state는 컴포넌트가 자체적으로 관리하는 데이터입니다.

4. 리액트에서 컴포넌트와 상태 관리하기

리액트 애플리케이션은 보통 여러 개의 컴포넌트로 구성되며, 이들 간의 데이터 흐름은 상위 컴포넌트에서 하위 컴포넌트로 이루어집니다. 아래에서는 컴포넌트와 상태를 어떻게 효과적으로 관리할 수 있는지에 대해 설명하겠습니다.

4.1. 상태 끌어올리기

부모 컴포넌트에서 상태를 관리하고, 자식 컴포넌트에 props로 전달하는 방법을 ‘상태 끌어올리기’라고 합니다. 이렇게 하면 여러 자식 컴포넌트가 동일한 상태를 공유하며, 이를 통해 더욱 일관된 UI를 구축할 수 있습니다.

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { sharedState: 0 };
    }
    
    updateSharedState = (newValue) => {
        this.setState({ sharedState: newValue });
    }
    
    render() {
        return (
            <div>
                <ChildComponent sharedState={this.state.sharedState} updateSharedState={this.updateSharedState} />
            </div>
        );
    }
}

4.2. 상태 관리 라이브러리

프로젝트가 커지면서 상태 관리가 복잡해지면, Redux, MobX와 같은 상태 관리 라이브러리를 사용하는 것이 좋습니다. 이러한 라이브러리는 전역 상태를 관리하는데 유용하며, 복잡한 애플리케이션에서 상태 관리를 쉽게 할 수 있게 도와줍니다.

예를 들어, Redux를 사용하는 경우 다음과 같은 방식으로 상태를 관리할 수 있습니다.

import { createStore } from 'redux';

const initialState = { count: 0 };

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return { count: state.count + 1 };
        default:
            return state;
    }
};

const store = createStore(reducer);

5. 리액트 컴포넌트의 라이프사이클

리액트 컴포넌트는 생성, 업데이트, 제거의 과정을 거치며, 이 각 단계에서 특정 메서드가 호출됩니다. 이를 ‘라이프사이클’이라고 합니다.

5.1. 라이프사이클 메서드

클래스 컴포넌트에서 사용할 수 있는 주요 라이프사이클 메서드로는 다음과 같은 것들이 있습니다.

componentDidMount: 컴포넌트가 첫 렌더링을 끝낸 후 호출됩니다.
componentDidUpdate: 컴포넌트가 업데이트된 후 호출됩니다.
componentWillUnmount: 컴포넌트가 언마운트(제거)될 때 호출됩니다.

6. 결론

리액트에서 컴포넌트와 상태는 애플리케이션의 구조와 동작에 매우 중요한 역할을 합니다. 컴포넌트를 통해 UI를 구성하고, 상태를 통해 동적인 사용자 경험을 제공하여, 최종 사용자가 만족하는 애플리케이션을 개발할 수 있습니다. 본 강좌를 통해 리액트의 기본 개념을 이해하고, 다양한 컴포넌트를 만들며, 상태를 관리하는 방법을 익히기를 바랍니다.

7. 추가 자료

리액트 공식 문서와 다양한 온라인 강의들을 통해 더 많은 정보를 찾아보실 수 있습니다. 아래는 유용한 링크입니다:

리액트 강좌: 함수

리액트는 사용자 인터페이스를 구축하기 위해 많이 사용되는 JavaScript 라이브러리입니다. 리액트를 이해하고 활용하기 위해서는 함수의 개념을 명확히 이해하는 것이 중요합니다. 본 강좌에서는 리액트에서 함수가 어떻게 사용되는지에 대해 자세히 다루고, 현대 웹 개발에서 함수형 프로그래밍이 어떻게 적용되는지에 대해 알아보겠습니다.

1. 리액트에서 함수의 정의

리액트에서 함수는 상태를 관리하거나 화면을 업데이트하는데 필요한 로직을 포함하는 기본 단위입니다. 리액트는 함수형 컴포넌트를 사용하여 UI를 정의할 수 있도록 지원합니다. 함수형 컴포넌트는 JavaScript 함수로, 이 함수에서 JSX를 반환하여 화면에 렌더링합니다. 함수형 컴포넌트는 간단하고 직관적이며, 리액트의 훅(Hook) 기능을 통해 상태와 생명주기 메서드를 사용할 수 있습니다.

2. 함수형 컴포넌트 vs 클래스형 컴포넌트

리액트는 주로 두 가지 방식으로 컴포넌트를 정의할 수 있습니다: 클래스형 컴포넌트와 함수형 컴포넌트입니다. 클래스형 컴포넌트는 ES6 클래스를 사용하여 정의되며, 유지 관리 및 테스트가 어렵고 코드 양이 상대적으로 많아지는 경향이 있습니다. 반면, 함수형 컴포넌트는 단순하고 가벼우며, 코드가 짧아 유지 관리가 용이합니다.

함수형 컴포넌트는 다음과 같이 정의됩니다:


function MyComponent() {
    return <div>Hello, World!</div>;
}

클래스형 컴포넌트는 다음과 같이 정의됩니다:


class MyComponent extends React.Component {
    render() {
        return <div>Hello, World!</div>;
    }
}

3. 함수형 컴포넌트의 장점

단순성: 함수형 컴포넌트는 더 적은 코드로 작성할 수 있으며, 이해하기 쉽습니다. 특히 복잡한 상태 관리 없이 UI를 간단하게 렌더링 할 수 있습니다.
성능 최적화: 리액트는 함수형 컴포넌트를 메모이제이션(memoization)하여 최적화 할 수 있습니다. 이를 통해 다시 렌더링할 필요가 없는 경우 컴포넌트를 건너뛸 수 있어 성능을 크게 향상시킬 수 있습니다.
사이드 이펙트 관리: 훅을 통해 부수 효과를 관리할 수 있어 상태 관리가 간편해집니다.

4. React Hook을 통한 상태 관리

리액트 16.8버전부터 도입된 훅(Hook)은 함수형 컴포넌트에서 상태를 관리할 수 있는 가장 효과적인 방법입니다. 가장 많이 사용하는 훅은 useState와 useEffect입니다.

4.1 useState 훅

useState는 상태 변수를 추가하고, 상태를 업데이트할 수 있는 함수를 반환합니다. 사용 방법은 다음과 같습니다:


import React, { useState } from 'react';

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

    return (
        <div>
            <p>현재 카운트: {count}</p>
            <button onClick={() => setCount(count + 1)}>증가</button>
        </div>
    );
}

4.2 useEffect 훅

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있게 해주는 훅입니다. 다음은 useEffect를 사용하는 예시입니다.


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

function Timer() {
    const [seconds, setSeconds] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => setSeconds(s => s + 1), 1000);
        return () => clearInterval(interval);
    }, []);

    return <p>경과 시간: {seconds}초</p>
}

5. 고급 Hooks

useReducer, useContext와 같은 고급 훅을 사용하면 더욱 복잡한 상태 관리가 필요할 때 유용합니다. 특히 useReducer는 복잡한 상태 로직이나 여러 하위 값을 관리할 때 유용합니다. 예를 들어, todo 리스트를 관리하는 데 사용할 수 있습니다.


import React, { useReducer } from 'react';

const initialState = { todos: [] };

function reducer(state, action) {
    switch (action.type) {
        case 'ADD_TODO':
            return { todos: [...state.todos, action.todo] };
        default:
            throw new Error();
    }
}

function TodoApp() {
    const [state, dispatch] = useReducer(reducer, initialState);
    
    const addTodo = todo => dispatch({ type: 'ADD_TODO', todo });

    return (
        <div>
            <h1>To Do List</h1>
            <button onClick={() => addTodo('새 할 일')}>추가</button>
            <ul>
                {state.todos.map((todo, index) => <li key={index}>{todo}</li>)}
            </ul>
        </div>
    );
}

6. 함수형 프로그래밍의 기본 원칙

리액트는 함수형 프로그래밍 패러다임을 따르는 경향이 있습니다. 여기 몇 가지 기본 원칙을 살펴보겠습니다.

순수 함수: 출력이 항상 입력에만 의존해야 합니다. 외부 상태에 영향을 주어서는 안 됩니다.
상태 불변성: 상태를 직접 변경하지 않고 새로운 상태를 반환합니다.
고차 함수: 함수를 인자로 받거나 함수를 반환하는 함수를 의미합니다. 리액트에서는 props를 통해 컴포넌트를 전달하는 방식이 여기에 해당합니다.

7. 결론

리액트는 함수형 프로그래밍 패러다임을 따르며, 함수형 컴포넌트를 통해 UI를 정의하고 상태를 관리하는 데 많은 장점을 제공합니다. 이 강좌를 통해 함수형 컴포넌트의 정의와 장점, React Hooks, 그리고 함수형 프로그래밍의 주요 원칙을 살펴보았습니다. 리액트에서 함수를 잘 활용한다면, 더 효율적이고 관리하기 쉬운 애플리케이션을 구축할 수 있을 것입니다.

더 많은 정보를 원하시면 공식 리액트 문서(여기)를 참조하시기 바랍니다.