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

코드를 작성하다보면 다음과 같이 반복되는 코드를 작성할 수도 있습니다. import React from ‘react‘; const IterationSample = () => { return ( 떡볶이 마라탕 치킨 초밥 ); }; export default IterationSample; 위의 예시는 li 태그의 반복입니다. 위의 예시는 간단하기에 그냥 li 태그를 반복해서 작성해도 큰 문제가 없지만, 간단한 반복에서 나아가 반복되는 코드들이 많아진다면 코드의 양은 늘어나고 파일의 용량도 증가해 쓸데없는 낭비가 발생할 것 입니다. 이번 6장에서는 반복적인 내용을 효율적으로 보여주고 관리하는 방법에 대해서 설명하도록 하겠습니다. 6.1 자바스크립트 배열의 map() 함수 자바스크립트에서는 배열 객체의 내장 함..

22-23/22-23 리액트 스타터 3 2022. 11. 10. 10:00

이번 장에서는 반복되는 코드를 효율적으로 보여주고 관리하는 방법에 대해 배워보겠습니다. 0. 자바스크립트 배열의 내장 함수 자바스크립트에서는 배열을 다룰 수 있는 유용한 내장 함수들이 있습니다. forEach : 배열의 각 요소들에게 일관된 작업을 수행할 수 있습니다. 사용법 - 배열명.forEach(파라미터) map : 배열 안의 모든 원소를 변환할 때 사용됩니다. 사용법 - 배열명.map(파라미터) filter : 배열에서 특정 조건을 만족하는 값들을 분류하여 새 배열을 만듭니다. 사용법 - 배열명.filter(파라미터) push : 배열의 맨 뒷부분에 요소를 추가합니다. 사용법 - 배열명.push(파라미터) pop : 배열의 맨 뒤 요소 하나를 반환하고 제거합니다. 사용법 - 배열명.pop() co..

22-23/22-23 리액트 스타터 1 2022. 11. 10. 10: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

1. 자바스크립트 배열의 map() 함수 🐳 자바스크립트 배열 객체의 내장 함수인 map함수를 사용하여 반복되는 컴포넌트를 렌더링 할 수 있다. map함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성해준다. 1) 문법 arr.map(callback, [thisArg]) callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지이다. currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index 값 array : 현재 처리하고 있는 원본 배열 thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스 ❗ map 함수 사용해보기 const numbe..

21-22/21-22 리액트 마스터 2021. 11. 1. 19:10