[Toy Projects] 'TODOoO' project (1)

우선 기본적으로 리액트 환경을 만들고, 대략적으로 화면에 필요한 태그들을 구성했다.

다음은 프로젝트 폴더 내의 src 폴더의 구조이다.

 

App.js는 Nav 컴포넌트와 Category 컴포넌트를 사용한다.

이때, Category 컴포넌트는 사용자가 카테고리를 추가할 때마다 추가될 예정이다.

// App.js

import './App.css';
import Nav from './component/Nav';
import Category from './component/Category';

function App() {
  return (
    <div className="app">
      <Nav></Nav>
      <Category></Category>
    </div>
  );
}

export default App;

 

Nav.js는 TODOoO의 상단 부분을 나타내는 컴포넌트이다.

// component/Nav.js

function Nav() {
  return (
    <div className="nav">
        <p className='nav-title'>TODOoO</p>
        <p className='nav-setting'>☸︎</p>
    </div>
  );
}

export default Nav;

 

Category는 각 리스트를 담을 카테고리를 나타내는 컴포넌트이다.

카테고리 개수만큼 컴포넌트가 사용될 예정이다.

여기서는 Form 컴포넌트가 사용되는데, 일정추가 버튼을 누르면 컴포넌트가 나타날 예정이다.

// component/Category.js

import Form from './Form';

function Category() {
  return (
    <div className="category">
    </div>
  );
}

export default Category;

 

Form.js는 일정을 추가하는 폼을 나타내는 컴포넌트이다.

// component/Form.js

function Form() {
  return (
    <div className="form">
        <input type='text' placeholder='할 일을 추가하세요!'></input>
        <p>추가</p>
    </div>
  );
}

export default Form;

 

모든 리스트는 App.js로부터 관리될 예정이다.

 

App.js에서 useState를 이용하여

1. 리스트를 저장할 todo
2. 카테고리 종류를 저장할 category
3. 카테고리 수 만큼 동적으로 태그를 생성하기 위한 cateForm

을 선언하였다.

 

// App.js

import './App.css';
import Nav from './component/Nav';
import Category from './component/Category';
import { useEffect, useState } from 'react';

function App() {
	// todo와 category에는 임의로 값을 집어넣었다.
  const [todo, setTodo] = useState([{
    category:'일반',
    desc:'할일1'
  },{
    category:'일반',
    desc:'할일2'
  },{
    category:'카테고리2',
    desc:'할일1'
  }]);
  const [category, setCategory] = useState(['일반','카테고리2']);
  const [cateForm, setCateForm] = useState([]);

  useEffect(()=>{
    let _cateform = [];
    for(let i = 0; i < category.length; i++){
      let _todo = [];
      for(let j = 0; j < todo.length; j++){
        if(category[i] === todo[j].category){
          _todo.push(todo[j].desc);
        }
      }
      _cateform.push(<Category key={i} category={category[i]} todo={_todo}></Category>);
    }
    setCateForm(_cateform);
  },[category])
  return (
    <div className="app">
      <Nav></Nav>
      {cateForm}
    </div>
  );
}

export default App;

 

Category 컴포넌트에서 todo 목록이 제대로 담겼는지 확인하기 위해 props로 받은 데이터를 출력해 보았다.

// component/Category.js

import Form from './Form';

function Category(props) {
  return (
    <div className="category">
        <div></div>
        <p>{props.category}</p>
        <p>+</p>
        <p>{props.todo}</p>
    </div>
  );
}

export default Category;

 

 

다음은 카테고리별로 todo 목록이 적절하게 담긴 모습이다.

 

다음 페이지에서는 각 카테고리 안에서 + 버튼을 누르면 Form 컴포넌트가 화면에 나타나도록 할 예정이다.

 

 

 

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)