지난 시간까지는 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

INDEX 10장 일정 관리 웹 애플리케이션 만들기 1. 프로젝트 준비하기 1.1 프로젝트 생성 및 필요한 라이브러리 설치 1.2 Prettier 설정 1.3 index.css 수정 1.4 App 컴포넌트 초기화 2. UI 구성하기 2.1 TodoTemplate 만들기 2.2 TodoInsert 만들기 2.3 TodoListItem과 TodoList 만들기 3. 기능 구현하기 3.1 App에서 todos 상태 사용하기 3.2 항목 추가 기능 구현하기 3.3 지우기 기능 구현하기 3.4 수정 기능 4. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 ⚙️ 애플리케이션을 만들어보자! 프로젝트 준비하기 UI 구성하기 기능 구현하기 1. 프로젝트 준비하기 1.1 프로젝트 생성 및 필요..

21-22/21-22 리액트 스타터 -2 2022. 1. 10. 13:00

INDEX 6장 컴포넌트 반복 1. 자바스크립트 배열의 map() 함수 ● 문법 2. 데이터 배열을 컴포넌트 배열로 변환하기 2.1 컴포넌트 수정하기 2.2 App 컴포넌트에서 예제 컴포넌트 렌더링 2.3 모듈 내보내기 및 불러오기 3. key 3.1 key 설정 4. 응용 4.1 초기 상태 설정하기 4.2 데이터 추가 기능 구현하기 4.3 데이터 제거 기능 구현하기 5. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 컴포넌트 반복 html 태그 중에는 반복적으로 사용할 필요가 있는 태그(li, tr, td 등)가 있다. // IterationSample.js const IterationSample = () => { return ( 눈사람 얼음 눈 바람 ); }; 이 장에서는..

21-22/21-22 리액트 스타터 -2 2021. 11. 29. 13:00