Read: 할 일 리스트 렌더링하기TodoList 컴포넌트의 기능이면서 CURD의 두 번째 요소인 Read 기능을 만들어보자.Read 기능을 이용하면 배열에 저장한 여러 할 일 아이템을 반복해서 렌더링할 수 있다.배열을 리스트로 렌더링하기App 컴포넌트의 State 변수 todo에는 배열 형태로 여러 개의 할 일 아이템이 저장되어 있다. 따라서 배열 todo를 TodoList 컴포넌트에 Props로 전달한다.(...)function App() { (...) return ( );}export default App;src/App.js TodoList 컴포넌트에서는 App에서 Props로 전달된 todo를 리스트로 렌더링해야 한다. 이때 배열 메서드 map을..

25-26/React.js 2025. 12. 26. 10:00

지난 시간까지는 TodoEditor 컴포넌트를 활용하여 할 일을 추가하는 단계까지 구현해 보았다. 지난번에 만들었던 컴포넌트를 이용하여 이번에는 할 일 리스트를 렌더링하고 수정하며, 마지막으로 삭제하는 단계까지 구현하여 할 일 관리 앱을 완성하여 본다.1. Read: 할 일 리스트 렌더링하기 먼저, TodoList 컴포넌트의 기능이면서 CRUD의 두 번째 요소인 Read 기능을 만들어보자. Read 기능을 이용하여 배열에 저장한 여러 할 일 아이템을 반복하여 렌더링할 수 있다. [ 배열을 리스트로 렌더링 ]App 컴포넌트의 State 변수 todo는 배열 형태로 여러 개의 할 일 아이템을 저장한다. 따라서 배열 todo를 TodoList 컴포넌트에 Props로 다음과 같이 전달한다.(...)functio..

24-25/React.js 2 2025. 1. 3. 11:33

Read: 할 일 리스트 렌더링 하기 Read 기능을 이용하면 배열에 저장한 여러 할 일 아이템을 반복해서 페이지에 렌더링 할 수 있다. 배열을 리스트로 렌더링하기 배열 todo를 TodoList 컴포넌트에 Props로 전달한다. (...) function App() { (...) return ( ); } export default App; map을 이용한 HTML 반복하기 TodoList 컴포넌트에서 배열 메서드 map을 이용해 HTML 요소를 반복해 렌더링 한다. import TodoItem from "./TodoItem"; import "./TodoList.css"; const TodoList = ({ todo }) => { // Props를 구조 분해 할당한다. return ( Todo List ..

23-24/React.js 2 2023. 12. 23. 01:13

Read: 할 일 리스트 렌더링하기 배열을 리스트로 렌더링하기 App 컴포넌트의 State 변수 todo에는 배열 형태로 여러 개의 할 일 아이템이 저장되어 있습니다. 배열 todo를 TodoList 컴포넌트에 Props로 전달합니다. (...) function App() { (...) return ( ); } export default App; TodoList 컴포넌트에서는 App에서 Props로 전달된 todo를 리스트로 렌더링해야 합니다. 리액트에서 배열 데이터를 렌더링할 때는 배열 메서드 map을 주로 이용합니다. map을 이용하면 HTML 또는 컴포넌트를 순회하면서 매 요소를 반복하여 렌더링합니다. map을 이용한 HTML 반복 TodoList 컴포넌트에서 배열 메서드 map을 이용해 HTML ..

23-24/React.js 1 2023. 12. 22. 10:00