안녕하세요! 이번 포스트에서는 리액트를 사용하여 간단한 To Do 앱을 만들면서 할 일 추가 기능을 구현하는 방법에 대해 자세히 알아보겠습니다. 이 강좌는 리액트에 대한 기초 지식이 있는 분들을 위해 작성되었으며, 중급자 및 고급자에게도 유용한 정보를 제공할 것입니다. 리액트의 기초부터 시작하여 단계별로 앱을 완성해 나가는 과정에 대해 설명드리겠습니다.

1. 리액트 소개

리액트(React)는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리로, 페이스북에서 개발하였습니다. 리액트는 재사용 가능한 UI 컴포넌트를 만들어 효율적으로 웹 애플리케이션을 구축할 수 있도록 도와줍니다.

2. 프로젝트 설정

To Do 앱을 만들기 위해, 먼저 리액트로 새 프로젝트를 설정하겠습니다. 다음의 단계를 따라 해보세요:

npx create-react-app todo-app

위의 명령어를 터미널에 입력하면, 리액트 앱의 기본 구조가 생성됩니다. 생성된 디렉토리로 이동하려면 다음 명령어를 입력합니다:

cd todo-app

3. 필요한 패키지 설치

우리의 To Do 앱에는 사용자가 할 일을 입력하고 추가할 수 있는 폼이 필요합니다. 이를 위해 useState 및 useEffect 훅을 사용할 것입니다. 별도로 설치할 패키지는 필요하지 않지만, 프로젝트를 좀 더 개선하기 위해 추가적인 라이브러리를 사용해 볼 수 있습니다.

4. 기본 구조 세팅

src 디렉토리 내부에 components라는 폴더를 만들고, 그 안에 TodoList.js와 AddTodo.js라는 두 개의 컴포넌트 파일을 생성합니다.

TodoList.js

import React from 'react';

const TodoList = ({ todos }) => {
    return (
        

            
할 일 목록
            

                {todos.map((todo, index) => (
                    
{todo}
                ))}
            
        
    );
}

export default TodoList;

AddTodo.js

import React, { useState } from 'react';

const AddTodo = ({ addTodo }) => {
    const [inputValue, setInputValue] = useState('');

    const handleChange = (e) => {
        setInputValue(e.target.value);
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        if (inputValue) {
            addTodo(inputValue);
            setInputValue('');
        }
    }

    return (
        

            
            추가하기
        
    );
}

export default AddTodo;

App.js 수정

제공된 TodoList 및 AddTodo 컴포넌트를 App.js에 추가하겠습니다. 아래와 같이 내용을 수정합니다:

import React, { useState } from 'react';
import TodoList from './components/TodoList';
import AddTodo from './components/AddTodo';

const App = () => {
    const [todos, setTodos] = useState([]);

    const addTodo = (todo) => {
        setTodos([...todos, todo]);
    }

    return (
        

            
할 일 목록 앱
            
            
        
    );
}

export default App;

5. 앱 실행하기

이제 앱을 실행해보겠습니다. 개발 서버를 실행하려면 다음 명령어를 입력합니다:

npm start

브라우저에서 localhost:3000으로 이동하면, 할 일 목록 추가 기능이 있는 간단한 To Do 앱이 나타나는 것을 확인할 수 있습니다.

6. 기능 확장하기

우리는 기본적인 할 일 추가 기능을 구현했습니다. 이제 몇 가지 기능을 추가하여 앱을 개선할 수 있습니다. 예를 들어:

• 할 일 삭제 기능
• 할 일을 완료 처리하는 기능
• 할 일 수정 기능

이러한 기능을 추가하면 사용자가 보다 효율적으로 To Do 앱을 사용할 수 있습니다.

6.1 할 일 삭제 기능 추가하기

할 일 삭제 기능은 사용자가 완료한 할 일을 쉽게 삭제할 수 있도록 도와줍니다. 아래와 같이 TodoList.js를 수정합니다:

import React from 'react';

const TodoList = ({ todos, removeTodo }) => {
    return (
        

            
할 일 목록
            

                {todos.map((todo, index) => (
                    

                        {todo}
                         removeTodo(index)}>삭제
                    
                ))}
            
        
    );
}

export default TodoList;

이제 App.js에서 removeTodo 함수를 추가하여 할 일을 삭제할 수 있는 기능을 구현해야 합니다.

const removeTodo = (index) => {
    setTodos(todos.filter((_, i) => i !== index));
}

마지막으로 AddTodo, TodoList 컴포넌트를 호출할 때 removeTodo 함수를 전달합니다.

<TodoList todos={todos} removeTodo={removeTodo} />

6.2 할 일 완료 처리 기능 추가하기

이제 할 일을 완료할 수 있는 기능을 추가해 보겠습니다. 다시 TodoList.js를 수정하여 체크박스를 추가합니다.

import React from 'react';

const TodoList = ({ todos, removeTodo, toggleTodo }) => {
    return (
        

            
할 일 목록
            

                {todos.map((todo, index) => (
                    

                         toggleTodo(index)} 
                        />
                        {todo.text}
                         removeTodo(index)}>삭제
                    
                ))}
            
        
    );
}

export default TodoList;

이제 todo 객체를 수정하여 텍스트와 함께 isCompleted 속성을 추가해야 합니다. App.js에서 addTodo 함수를 수정하여 이러한 기능을 추가합니다.

const addTodo = (text) => {
    setTodos([...todos, { text, isCompleted: false }]);
};

toggleTodo 함수도 추가해야 합니다.

const toggleTodo = (index) => {
    const newTodos = todos.map((todo, i) => 
        i === index ? { ...todo, isCompleted: !todo.isCompleted } : todo
    );
    setTodos(newTodos);
};

7. 마무리

리액트를 사용하여 간단한 To Do 앱을 만들어 보았습니다. 우리가 구현한 기능은 할 일 추가, 삭제 및 완료 처리 기능입니다. 이 강좌를 통해 리액트의 기본적인 사용법과 컴포넌트 간의 데이터 흐름을 이해하셨길 바랍니다.

앞으로도 이러한 방식으로 다양한 기능을 추가하거나, CSS를 이용해 스타일링을 개선하는 등 여러분의 앱을 발전시킬 수 있습니다. 이를 통해 리액트에 대한 이해도를 높이고, 실제 프로젝트에서 활용할 수 있는 기초를 마련할 수 있습니다.

감사합니다. 다음 강좌에서는 더욱 많은 기능 확장과 리팩토링 방법을 알아보겠습니다. 여러분의 성공적인 리액트 학습을 기원합니다!

리액트(React)는 현대 웹 애플리케이션 개발에 널리 사용되는 JavaScript 라이브러리입니다. 리액트는 UI를 구성하는 컴포넌트를 기반으로 하며, 클라이언트 측에서 상태 관리와 효율적인 UI 렌더링을 통해 사용자 경험을 극대화합니다. 이 강좌에서는 리액트의 다양한 개념 중 하나인 Ref에 대해 자세히 다룰 것입니다.

1. Ref란 무엇인가?

리액트에서 Ref는 DOM 요소나 리액트 컴포넌트에 직접 접근하기 위한 방법입니다. Ref는 리액트의 컴포넌트 모델과 생명주기 내에서 직접적으로 DOM을 수정해야 할 필요가 있을 때 유용합니다. 이를 통해 우리는 상태(state)를 사용하지 않고도 DOM 엘리먼트에 접근하거나, 특정 메소드를 호출하는 등의 작업을 수행할 수 있습니다.

2. Ref의 필요성

리액트에서는 컴포넌트의 상태를 기반으로 UI를 업데이트하는 것이 일반적입니다. 그러나 때때로 우리는 UI의 특정 요소에 직접적으로 접근해야 하는 상황이 발생합니다. 이러한 상황에서 Ref를 사용합니다. 예를 들어, 포커스를 특정 입력 요소에 설정해야 하거나, 애니메이션 효과를 직접 적용해야 할 경우 Ref가 유용합니다.

3. Ref 사용 방법

리액트에서 Ref를 생성하고 사용하는 방법은 다음과 같습니다.

import React, { useRef } from 'react';

function MyComponent() {
    const inputRef = useRef(null);

    const focusInput = () => {
        if (inputRef.current) {
            inputRef.current.focus();
        }
    };

    return (
        

            
            포커스
        
    );
}

위의 예시에서 useRef 훅을 사용하여 inputRef를 생성하고, input 요소에 ref 속성을 추가했습니다. 버튼 클릭 시 focusInput 함수가 호출되어 입력 요소에 포커스가 가게 됩니다.

4. Ref의 사용 사례

4.1. 포커스 관리

사용자가 “Enter” 키를 눌렀을 때 특정 입력 필드로 포커스를 이동하는 기능을 구현할 수 있습니다. 이 경우 Ref를 이용하여 입력 필드에 직접 접근합니다.

4.2. 애니메이션 및 DOM 조작

리액트에 애니메이션 라이브러리와 함께 사용할 때 DOM 요소에 직접적인 변화를 줄 필요가 있습니다. 이 때 Ref를 활용하면 유동적인 애니메이션 효과를 쉽게 적용할 수 있습니다.

4.3. 외부 라이브러리와의 통합

특정 외부 라이브러리를 사용하여 DOM 요소에 접근해야 할 때 Ref를 이용해 해당 요소를 선택하고, 라이브러리의 메소드를 호출할 수 있습니다.

5. Ref와 상태 관리의 차이

Ref와 상태(state)는 동일한 목적을 가지고 있는 것처럼 보이지만, 둘은 각기 다른 용도로 설계되었습니다. 상태는 UI를 업데이트하는 방법이며, Ref는 DOM 요소에 접근하기 위한 방법입니다. 상태는 리액트의 생명주기와 함께 동작하지만, Ref는 DOM의 직접적인 조작에 사용됩니다.

6. Ref의 한계

Ref는 상태 관리와 비교할 때 몇 가지 제한이 있습니다. 주요 한계는 다음과 같습니다:

• Ref 변경 사항에 따른 리렌더링이 발생하지 않음: Ref는 직접적으로 DOM을 수정하며, 해당 요소가 변경되어도 리액트의 상태 관리 시스템에 영향을 주지 않습니다.
• 주로 DOM 직접 조작에 사용: Ref는 안 좋은 디자인 패턴을 유발할 수 있습니다. 컴포넌트를 통해 상태를 관리하는 것을 권장합니다.

7. Ref를 활용한 예제

아래의 예제 코드는 사용자가 입력할 수 있는 텍스트 영역을 제공합니다. 사용자가 “Enter” 버튼을 누르면 텍스트 영역에 포커스가 가도록 구현되어 있습니다.

import React, { useRef } from 'react';

function TextInput() {
    const textAreaRef = useRef(null);

    const focusTextArea = () => {
        if (textAreaRef.current) {
            textAreaRef.current.focus();
        }
    };

    return (
        

            
            텍스트 영역 포커스
        
    );
}

8. 추가적인 Ref 심화

Ref는 React의 더 깊은 부분에서 활용될 수 있습니다. 예를 들어, 리액트의 forwardRef를 사용하여 부모 컴포넌트에서 자식 컴포넌트로 Ref를 전달하는 방법에 대해 설명하겠습니다.

import React, { forwardRef, useRef } from 'react';

const FancyInput = forwardRef((props, ref) => (
    
));

function ParentComponent() {
    const inputRef = useRef(null);

    const focusInput = () => {
        if (inputRef.current) {
            inputRef.current.focus();
        }
    };

    return (
        

            
            포커스
        
    );
}

9. 결론

Ref는 리액트에서 매우 유용한 기능으로, DOM 요소에 직접 접근하여 조작할 수 있는 방법을 제공합니다. 이 가이드를 통해 Ref의 개념, 필요성, 사용 방법 및 고급 기능을 이해하셨기를 바랍니다. 더 나아가 리액트를 사용하여 웹 애플리케이션을 개발할 때, Ref를 적절히 활용하여 보다 나은 사용자 경험과 UI를 제공할 수 있기를 바랍니다.

10. 추가 자료

• 리액트 공식 문서 – Refs and the DOM
• 리액트 학습 – Refs in React

리액트와 Ref에 대한 더 많은 정보를 얻기 위해 다양한 자료를 찾아보시기 바랍니다. 감사합니다!

웹 개발은 현대의 다양한 애플리케이션을 구축하는 데 필수적인 기술입니다. 그 중에서도 리액트와 Node.js는 인기 있는 프레임워크와 런타임으로, 프론트엔드와 백엔드 개발에 널리 사용되고 있습니다. 이번 강좌에서는 리액트를 사용하기 위한 Node.js 환경 설정에 대해 자세히 알아보겠습니다.

1. Node.js란?

Node.js는 서버 사이드 애플리케이션을 구축하기 위한 오픈 소스 자바스크립트 런타임입니다. 기본적으로 크롬의 V8 자바스크립트 엔진 위에서 실행되며, 비동기 이벤트 기반 프로그래밍 모델을 제공합니다. 이러한 특성 덕분에 Node.js는 웹 서버와 다양한 네트워크 애플리케이션을 구축하는 데 매우 효율적입니다.

2. Node.js 설치하기

리액트를 사용하기 위해서는 먼저 Node.js를 설치해야 합니다. Node.js는 다양한 운영 체제에서 지원되므로, 자신이 사용하는 환경에 적합한 방법으로 설치할 수 있습니다.

2.1. Windows에서 Node.js 설치하기

1. Node.js 공식 웹사이트(https://nodejs.org/)로 이동합니다.
2. 버전 선택: LTS(Long Term Support) 버전을 다운로드하여 설치합니다.
3. 다운로드가 완료되면 설치 파일을 실행하고, 설치 과정을 진행합니다.
4. 설치가 완료되면 명령 프롬프트를 열고 node -v 명령어로 설치가 완료되었는지 확인합니다.

2.2. macOS에서 Node.js 설치하기

1. Homebrew를 사용하여 Node.js를 설치할 수 있습니다. 터미널을 열고 다음 명령어를 입력합니다:
2. brew install node
3. 설치 후 node -v 명령어로 버전을 확인합니다.

2.3. Linux에서 Node.js 설치하기

1. NodeSource 저장소를 추가하고 설치할 수 있습니다. 터미널에서 다음 명령어를 실행합니다:
2. curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
3. sudo apt-get install -y nodejs
4. 설치 후 node -v 명령어로 버전을 확인합니다.

3. npm과 패키지 관리자

Node.js를 설치하면 npm(Node Package Manager)도 함께 설치됩니다. npm은 자바스크립트 라이브러리 및 패키지를 관리하는 도구로, 리액트 프로젝트에 필요한 패키지를 설치하는 데 사용됩니다.

3.1. npm 버전 확인하기

명령 프롬프트나 터미널에서 다음 명령어를 실행하여 npm 버전을 확인합니다:

npm -v

4. 리액트 프로젝트 생성하기

Node.js와 npm이 설치되었다면 이제 리액트 프로젝트를 생성할 차례입니다. 리액트 프로젝트를 생성하는 가장 쉽게 접근할 수 있는 방법은 Create React App을 사용하는 것입니다.

4.1. Create React App 설치하기

Create React App은 리액트 애플리케이션을 빠르게 구축할 수 있도록 도와주는 공식 도구입니다. 다음 명령어로 Create React App을 전역으로 설치합니다:

npm install -g create-react-app

4.2. 리액트 프로젝트 생성하기

Create React App을 설치한 후, 다음 명령어를 사용하여 새로운 리액트 애플리케이션을 생성합니다. my-app은 프로젝트 이름이며, 원하는 이름으로 변경할 수 있습니다.

npx create-react-app my-app

4.3. 리액트 프로젝트 실행하기

프로젝트가 생성되면 아래 명령어로 해당 폴더로 이동하고, 애플리케이션을 실행할 수 있습니다:

cd my-app
npm start

이제 웹 브라우저를 열고 http://localhost:3000에 접속하면 기본 리액트 애플리케이션을 확인할 수 있습니다.

5. Node.js 서버 설정하기

리액트 애플리케이션을 완성하기 위해서는 Node.js 서버를 설정해야 합니다. 이를 통해 REST API를 제공하고, 리액트 애플리케이션과 인터랙션할 수 있습니다.

5.1. 새로운 Node.js 프로젝트 생성하기

리액트 프로젝트와 별도로 Node.js 백엔드 서버를 생성합니다. 새로운 폴더를 만들고 해당 폴더로 이동한 다음, 다음 명령어를 실행하여 새로운 npm 프로젝트를 시작합니다:

mkdir my-node-server
cd my-node-server
npm init -y

5.2. Express 설치하기

Express는 Node.js 용 웹 애플리케이션 프레임워크로, RESTful API를 쉽게 구축할 수 있도록 도와줍니다. 다음 명령어로 Express를 설치합니다:

npm install express

5.3. 기본 서버 코드 작성하기

새로운 파일을 생성하고 서버 코드를 작성합니다. server.js라는 이름의 파일을 생성하고 아래의 기본 코드를 추가합니다:

const express = require('express');
const app = express();
const PORT = process.env.PORT || 5000;

app.get('/', (req, res) => {
    res.send('Hello World from Node.js server!');
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

6. Node.js 서버 실행하기

서버 코드를 작성한 후, 아래 명령어로 Node.js 서버를 실행합니다:

node server.js

웹 브라우저를 열고 http://localhost:5000에 접속하여 “Hello World from Node.js server!”라는 메시지를 확인합니다.

7. 리액트와 Node.js 연결하기

리액트 애플리케이션과 Node.js 서버가 모두 준비가 되었으면, 두 애플리케이션 간의 연결을 설정합니다. 이 과정에서는 리액트 애플리케이션에서 Node.js 서버로 API 요청을 보내고 응답을 받아오는 방법을 설명합니다.

7.1. Axios 설치하기

API 요청을 보내기 위한 라이브러리인 Axios를 리액트 프로젝트에 설치합니다. 아래 명령어를 실행하여 Axios를 설치합니다:

npm install axios

7.2. API 요청 코드 작성하기

리액트 애플리케이션의 컴포넌트 내부에서 Node.js 서버로 요청을 보내는 코드를 작성합니다. src/App.js 파일을 열고 아래 코드를 추가합니다:

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

function App() {
    const [message, setMessage] = useState('');

    useEffect(() => {
        axios.get('http://localhost:5000')
            .then(response => {
                setMessage(response.data);
            })
            .catch(error => {
                console.error('There was an error!', error);
            });
    }, []);

    return (
        

            
{message}
        
    );
}

export default App;

8. 최종 결과 확인하기

모든 설정이 완료되었다면, 리액트 애플리케이션을 다시 시작합니다. 브라우저를 새로고침하여 Node.js 서버에서 가져온 메시지를 확인할 수 있습니다.

9. 결론

이번 강좌에서는 리액트 애플리케이션을 개발하기 위한 Node.js 환경을 설정하는 방법에 대해 알아보았습니다. Node.js와 Express를 사용하여 간단한 백엔드 서버를 구축하고, Axios를 사용하여 리액트와 연결하는 과정을 살펴보았습니다. 앞으로 더 복잡한 애플리케이션을 개발할 때 이 기본 지식을 토대로 확장해 나가길 바랍니다.

10. 참고 자료

• Node.js Documentation
• React Documentation
• Express Documentation
• Axios Documentation