2024.01.23 TIL

 

개인과제 Growth

컴포넌트 분리하기

task의 isDone 상태에 따라서 영역과 버튼 요소를 다르게 출력하는 코드이다.

// Layout 컴포넌트

<div className="tasks-wrap">
                    <div>
                        <div className="in-progress-tag">
                            <div className="in-progress-circle"></div>In progress
                        </div>
                        <Tasks tasks={tasks} setTasks={setTasks} isDone={false} />
                        {/* isDone이 false인것들만 filter돼서 렌더링 */}

                    </div>

                    <div>
                        <div className="done-tag">
                            <div className="done-circle"></div>Done
                        </div>
                        <Tasks tasks={tasks} setTasks={setTasks} isDone={true} />
                    </div>
                </div>

//Tasks 컴포넌트

return tasks.filter((item) => {
        return item.id !== 0 && item.isDone === isDone; //여기서 task들 필터링
    }).map((item) => {
        return (
            <div key={item.id} className="task-box">
                <div className="title-in-task-box">{item.title}</div>
                <hr className="hr2"></hr>
                <div className="memo-in-task-box">{item.memo}</div>
                <div className="btn-wrap">
                    {isDone ?
                        <>
                            <button
                                className="task-progress-btn"
                                onClick={() => returnButtonClickHandler(item.id)}
                            >되돌리기</button>
                            <button
                                className="task-progress-btn"
                                onClick={() => delButtonClickHandler(item.id)}
                            >삭제</button>
                        </>
                        : <>
                            <button
                                className="task-progress-btn"
                                onClick={() => doneButtonClickHandler(item.id)}
                            >완료</button>
                            <button
                                className="task-progress-btn"
                                onClick={() => delButtonClickHandler(item.id)}
                            >삭제</button>
                        </>
                    }
                </div>
            </div>
        )
    })

 

mapped 요소 키값 부여하는 방식 

1. 마지막 요소 id + 1

2. crypto.randomUUID() 함수 이용하기

3. UUID, shortid 라이브러리 사용하기

 

vercel 배포 참고페이지

https://daily-life-of-bigone.tistory.com/40

[Next.js] Vercel로 프론트 배포하기 (도메인 변경)