리액트 머티리얼 UI 컴포넌트를 이용한 할일 목록 구현

구글 머티리얼 디자인을 구현한 Material-UI 컴포넌트를 이용해서 할일 목록을 제작해 보겠습니다. 

https://material-ui.com/

 

#1 프로젝트 생성

C:\react> npx create-react-app todolist

 

 

#2 Material-UI 컴포넌트 추가

C:\react\todolist> npm install @material-ui/core

 

 

#3 TodoList.js 생성

할일 정보를 담을 배열 형식의 상태 변수(todos)와 값을 추가하는 함수(addTodo)를 정의하고, AppBar, Toolbar, Typography 컴포넌트를 이용해서 앱 이름을 출력합니다.

 

각 컴포넌트의 사용 방법은 아래 사이트를 참조하세요. 

• App Bar ☞ https://material-ui.com/api/app-bar/
• Toolbar ☞ https://material-ui.com/api/toolbar/
• Typography ☞ https://material-ui.com/api/typography/

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import './App.css';

function TodoList() {

    // 훅을 호출해 상태 변수와 상태 변수 업데이트 함수를 선언
    // todos : 할일 제목과 내용을 담고 있는 배열
    const [todos, setTodos] = React.useState([]);

    // todos 상태 변수에 새로운 값을 추가하는 함수를 선언
    const addTodo = (todo) => {
        setTodos([todo, ...todos]);
    }

    return (
        <div className="App">
            <AppBar position="static" color="default">
                <Toolbar>
                    <Typography variant="h6" color="inherit">할일 목록</Typography>
                </Toolbar>
            </AppBar>
        </div>
    );
}

export default TodoList;

 

#4 App.js에 TodoList 컴포넌트 추가

import React from 'react';
import './App.css';
import TodoList from './TodoList.js';

function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

export default App;

 

#5 웹 브라우저를 통해 확인

 

#6 AddTodo.js 생성

할일 제목과 내용을 입력하고 추가하는 기능을 제공하는 컴포넌트를 작성합니다.

 

각 컴포넌트의 사용 방법은 아래 사이트를 참조하세요.

• Dialog ☞ http://material-ui.com/api/dialog
• Dialog Actions ☞ http://material-ui.com/api/dialog-actions
• Dialog Content ☞ http://material-ui.com/api/dialog-content
• Dialog Title ☞ http://material-ui.com/api/dialog-title

 

 

import React from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';

const AddTodo = (props) => {
    
    // 할일 정보(제목과 내용)를 저장할 상태 변수 선언
    const [todo, setTodo] = React.useState({ title: '', content: '' });

    // 할일 제목과 내용 입력창(TextField) 내용 변경을 처리하는 이벤트 핸들러
    const handleChange = (e) => {
        setTodo({...todo, [e.target.name]:e.target.value})
    }
    
    // 추가 버튼을 클릭하면 부모 컴포넌트의 addTodo 함수를 호출해서 할일 정보를 전달하고 입력 화면을 보이지 않게 처리
    const addTodo = () => {
        props.addTodo(todo);
        handleClose();
    }

    // 할일 입력 화면(Dialog) 표시 여부를 저장할 상태 변수와 값을 변경하는 함수 선언  
    const [open, setOpen] = React.useState(false);
    const handleOpen = () => {
        setOpen(true);
    }
    const handleClose = () => {
        setOpen(false);
    }
    
    return (
        <div>
            <Button style={{marginTop: 10}} variant="outlined" color="primary" onClick={handleOpen}>할일 추가</Button>
            {/* Dialog 컴포넌트의 open 속성값이 true이면 화면에 표시 */}
            <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
                <DialogTitle id="form-dialog-title">할 일</DialogTitle>
                <DialogContent>
                    <TextField autoFocus margin="dense" value={todo.title} onChange={handleChange} name="title" label="할일 제목" fullWidth />
                    <TextField autoFocus margin="dense" value={todo.content} onChange={handleChange} name="content" label="할일 내용" fullWidth />
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose} color="primary">취소</Button>
                    <Button onClick={addTodo} color="primary">추가</Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

export default AddTodo;

 

#7 TodoList.js에 AddTodo 컴포넌트 추가 및 할일 목록 출력 기능 추가

import React from 'react';
// 	...
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Checkbox from '@material-ui/core/Checkbox';
import AddTodo from './AddTodo.js';

function TodoList() {

    // 	...
    
    // todos 상태 변수의 값을 ListItem 컴포넌트에 담아서 반환
    const todosToList = todos.map((item, index) => 
        <ListItem key={index}>
            <Checkbox/>
            <ListItemText primary={item.title} secondary={item.content} />
        </ListItem>
    );

    return (
        <div className="App">
            <AppBar position="static" color="default"> ... </AppBar>
            <AddTodo addTodo={addTodo} />
            <List>{todosToList}</List>
        </div>
    );
}

export default TodoList;

 

#8 브라우저를 통해 확인