TIL 21. React Todolist 앱 구현

Mission: Todolist 구현하기

1) 목적

• 사용자가 할 일 목록을 관리할 수 있는 Todolist 앱을 구현한다.
• React, Redux, React Router 기술을 활용하여 상태 관리와 라우팅을 구현한다.

2) 방법

1. 컴포넌트 구조 설계:

• Home.jsx: Todo 앱의 메인 페이지를 담당하는 컴포넌트로, 할 일 목록을 표시하고 Todo 아이템을 추가, 삭제, 완료/취소 기능을 제공한다.
  
  
• Todo.jsx: 각 Todo 아이템을 표시하는 컴포넌트로, 제목, 내용, 완료/취소 버튼, 상세보기 링크 등의 요소를 포함한다.
  
  
• Detail.jsx: 선택한 Todo 아이템의 상세 정보를 표시하는 컴포넌트로, 제목, 내용, 이전 버튼 등의 요소를 포함한다.
  
  
• Router.jsx: React Router를 사용하여 페이지 라우팅을 설정하는 컴포넌트로, 메인 페이지와 상세 페이지의 경로를 정의한다.
  
  

2. 상태 관리:

• Redux를 활용하여 앱의 상태를 관리한다.
  
  
• configStore.js 파일에서 Redux store를 생성하고, todolists.js 파일에서 초기 상태와 액션 타입, 액션 생성자, 리듀서를 정의한다.
  
  
• Home.jsx 컴포넌트에서 useSelector와 useDispatch를 사용하여 상태를 조회하고 액션을 디스패치한다.
  
  

3. 라우팅:

• React Router를 사용하여 메인 페이지와 상세 페이지의 경로를 설정하고, 해당 경로에 맞는 컴포넌트를 렌더링한다.
  
  
• Router.jsx 파일에서 BrowserRouter와 Routes 컴포넌트를 사용하여 경로와 컴포넌트 매핑을 설정한다.

3) 알게된 점

• React를 사용하여 컴포넌트 기반의 UI를 구현하는 방법을 익혔다.
  
  
• Redux를 활용하여 상태 관리를 할 수 있으며, 액션 타입, 액션 생성자, 리듀서를 통해 상태를 업데이트하는 방법을 배웠다.
  
  
• React Router를 사용하여 페이지 라우팅을 설정하고, 경로에 따라 다른 컴포넌트를 렌더링하는 방법을 이해했다.

4) 결과물

https://github.com/nna-na/my-todo-list2.git