지난주부터 본격적인 리액트 공부가 시작되었다. 리액트 입문 주간에는 간단한 Todo List 만들기 개인프로젝트가 주어졌는데, 맨날 index.html에서 시작했던 사람이 처음으로 리액트로 프로젝트를 만들어 보려니 막막하기 그지없었다...!! 그런데 조금 긍정적인 막막함이랄까? 재미있고 흥미롭게 다가오는 느낌이었다. 그래도 어쨌든 막막했기 때문에 기초 강의를 다시 들으면서 천천히 아주 천천히 조금씩 써내려가보았다!
1. {props.children} 활용하여 상단바 만들기
강의를 들을 때부터 나는 이 개념이 뭐랄까... 내 머릿속에 있는 느낌이랑 완전 반대 개념의 느낌으로 다가와서 사실 지금도 좀 헷갈린다. 나에게는 index.html이 항상 최고? 대빵? 최상위? 같은 느낌이었는데, {props.children}을 사용해서 Layout.jsx라는 분리된 상단바 파일을 만들어주면, 이 Layout.jsx가 부모 요소가 된다는 것 이 납득(?)하기가 어려웠다.
Layout 컴포넌트가 App 컴포넌트를 품고 있는 "부모 요소"가 되지만 정작 props는 자식 컴포넌트인 App에서 넘겨받는다는 게 직관적으로 이해하기가 어려웠다. 여튼 그렇게 받아 온 props를 상단바 아래에 띄우는 것이기 때문에 header 밑에 {props.children} 요렇게 넣어줄 수 있다.
App 컴포넌트에서는 상단에서 Layout을 import 해주고,
Layout 태그가 props를 품을 수 있도록 해주면 된다.
여러 개의 메뉴가 있는 웹사이트에서 공통 상단바를 가지면서 상단바 아래의 내용은 메뉴별로 상이하게 만드는 경우가 있을텐데, 아직 그건 어떻게 구현해야 할지 잘 모르겠다. chatGPT선생님도 아까부터 똑같은 내용만 반복하고 클리어하게 이해되는 설명을 해주지 못하고 있어서 이해하기가 어렵다.
2. 필요한 state들
Todo List 페이지를 구현하기 위해 필요한 state는 4개가 있었다. 제목, 내용(메모), todo 목록, done목록 이렇게 4가지의 정보를 다뤄야 하기 때문에 아래처럼 4개의 state를 선언해주었다.
const [title, setTitle] = useState("")
const [memo, setMemo] = useState("")
const [todo, setTodo] = useState([])
const [done, setDone] = useState([])
3. InputForm 컴포넌트
Todo List 페이지는 크게 위에서부터 상단바 - 입력폼 - Now Working - Done 요렇게 4가지 구역으로 구성되어 있는데, 상단바를 Layout.jsx로 분리했으니, 입력폼 역시 InputForm.jsx를 만들어서 분리해본다. 원래 레이아웃 html태그들로 가득했던 부분을 Inputform으로 넘겨 줄 정보들을 나열하는 것으로 대체한다.
그러면 InputForm.jsx에서 해당 props를 넘겨받아서 적재적소에 배치해 줄 수 있다.
위에서 선언해 둔 4개의 state 중에서 글쓰기폼에서 다루게 되는 것은 제목, 내용(메모), todo목록 이렇게 3가지가 되겠다. 각 input에 입력되는 value로 setTitle, setMemo 해주고, 글쓰기 버튼을 클릭하면 id, 입력된 title, 입력된 memo가 객체의 형태로 todo 목록에 전달된다. 이미 존재하는 todo목록의 맨 뒤에 todoData를 추가해 주고 새로운 객체로 setTodo해준다. 그러면 등록이 완료된 것이기 때문에 input 입력값은 초기화해준다.
페이지에 들어가면 아직 등록한 todo가 없다는 문구가 뜨고 있다.
input에 내용을 입력한다. 간단한 메모만 할 수 있도록 각 input에 내가 생각하는 적정 글자수제한을 두었다.
추가하기 버튼을 누르면 입력한 내용이 todo 목록에 추가되어 Now working 영역에 todo 카드가 붙게 되고, input에 입력하던 내용은 모두 사라진다.
4. todo 삭제하기
삭제하기 기능까지는 구현하는 데에 크게 코드를 짜기 어렵거나 이해가 어려운 부분이 없었다.
삭제하기 버튼을 클릭하면 todo 목록 중 해당 내용의 id값을 전달받아 삭제 함수가 실행된다.
먼저 정말 삭제를 하겠느냐는 confirm창을 띄워서 방금 클릭한 버튼이 '삭제하기'버튼임을 사용자에게 한번 더 리마인드한다. 여기서 확인을 누르는 경우에만 해당 id에 해당되는 내용을 todo 리스트에서 걸러낸다.
여기까지는 강의에서도 배운 내용이라서 큰 어려움 없이 해볼 수 있었던 것 같다. 본격적인 어려움은 그 다음 단계인 todo완료하기 그리고 완료 취소하기 기능에서부터 시작되는데 ...더보기
