[React] Kanban Board 만들기

ex01: Property: Component 작성 (Date Flow: Top -> Down)

• Kanban Board #1 자세한 코드 보기

ex02:Component Styling

• Kanban Board #1

---

• 형제 컴포넌트끼리 통신은 불가, 이를 해결하기 위해
  데이터를 부모에게 넘겨주고 그 부모가 다른 자식에게 넘겨줌으로써 형제와 형제의 통신을 간접적으로 이루어낼 수 있습니다.

• json은 별도의 loader를 설치할 필요없이 내장되어있는 기능을 통해 import하여 사용할 수 있다.

• JSX에서는 스네이크 표기법을 사용하여 하나의 컴포넌트를 명확히 명시하는 것이 좋다.

---

[ex01]

• API를 너무 나눠서 보내지 맙시다! 서버 쪽에서는 API를 통으로 보내고 필요한 쪽에서 필터링하여 사용하도록 코딩.

데이터를 보내는 필터링 방법 (1) - 추천 X

import React, { Fragment } from 'react';
import CardList from './CardList';
import cards from './data.json';


export default function KanbanBoard(){
   const cardList = {
       ToDo : [],
       Doing: [],
       Done: []
   }
    cards.forEach(function(card){
        cardList[card.status].push(card);
    })

    return (
        <div className={'KanbanBoard'}>
            <CardList key='Todo' title= {'ToDo'} cards={cardList['ToDo']}/> 
            <CardList key='Doing' title= {'Doing'} cards={cardList['Doing']}/> 
            <CardList key='Done' title= {'Done'} cards={cardList['Done']}/> 
        </div>
    );
};  

데이터를 보내는 필터링 방법 (2) - 추천 O (filter의 사용 )

import React, { Fragment } from 'react';
import CardList from './CardList';
import cards from './data.json';


export default function KanbanBoard(){
    return (
        <div className={'KanbanBoard'}>
            <CardList key='Todo' title= {'ToDo'} cards={cards.filter((card) => card.status=='ToDo')}/> 
            <CardList key='Doing' title= {'Doing'} cards={cards.filter((card) => card.status=='Doing')}/> 
            <CardList key='Done' title= {'Done'} cards={cards.filter((card) => card.status=='Done')}/> 
        </div>
    );
};  

배열의 수만큼 컴포넌트 생성하기

[CardList]

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

export default function CardList({ title, cards }){
    console.log(cards);
    return (
        <div className={'CardList'}>
            <h1>{ title }</h1>
            {cards.map(card => <Card
                                    key={card.no} 
                                    title={card.title} 
                                    description={card.description}
                                    tasks={ cards.tasks } />)}
        </div>
    );
};  

// cards의 갯수만큼 컴포넌트가 있어야 한다.
// map 활용
// 속성값으로 넘겨주기

[Card]

import React from 'react';

export default function Card({ title, description, tasks }){
    return (
        <div className='Card'>
            <div className='Card__Title'>{ title }</div>
            <div className='Card__Details'>
                { description }
                <TaskList tasks={ tasks } />
            </div>
        </div>
    );
};  

// JSX에서는 스네이크 표기법을 사용하여 하나의 컴포넌트를 명확히 명시하는 것이 좋다.