6장 컴포넌트 반복
- 자바스크립트 배열 map()함수
- 문법
- callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지이다.
- currentValue : 현재 처리하고 있는 요소
- index : 현재 처리하고 있는 요소의 index값
- array : 현재 처리하고 있는 원본 배열
- thisArg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스
- callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지이다.
- arr.map(callback,[thisArg])
- 문법
- map함수를 활용한 컴포넌트 반복
- key
- key 설정key 값은 언제나 유일해야 한다.
- 단, 고유한 값이 없을 때만 index값을 key로 사용 → index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더링 불가
- key 값을 설정할 때는 map함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정하면 된다.
- 고유 id를 통한 key설정
import React, { useState } from "react"; const IterationSample = () => { const [names, setNames] = useState([ { id: 1, text: "눈사람" }, { id: 2, text: "얼음" }, { id: 3, text: "눈" }, { id: 4, text: "바람" }, ]); const [inputText, setInputText] = useState(""); const [nextId, setNextId] = useState(5); const nameList = names.map((name) => <li key={name.id}>{name.text}</li>); return <ul>{nameList}</ul>; }; export default IterationSample;
- 데이터 추가 구현
import React, { useState } from "react"; const IterationSample = () => { const [names, setNames] = useState([ { id: 1, text: "눈사람" }, { id: 2, text: "얼음" }, { id: 3, text: "눈" }, { id: 4, text: "바람" }, ]); const [inputText, setInputText] = useState(""); const [nextId, setNextId] = useState(5); const nameList = names.map((name) => <li key={name.id}>{name.text}</li>); const handleInput = (event) => setInputText(event.target.value); const handleClick = () => { let nextName = names.concat({ id: nextId, text: inputText, }); setNextId(nextId + 1); setNames(nextName); setInputText(""); }; return ( <> <ul>{nameList}</ul> <input type="text" className="listInput" onChange={handleInput} /> <button className="listBtn" onClick={handleClick}> addList </button> </> ); }; export default IterationSample;
- 배열에 새 항목을 추가할 때 push함수가 아닌 concat을 사용concat은 새로운 배열을 만들어 준다.
- pust는 기존 배열 자체를 변경
- 데이터 제거 기능 → filter함수
const onRemove = (id) => {
const nextNames = names.filter((name) => name.id !== id);
setNames(nextNames);
};
const nameList = names.map((name) => (
<li key={name.id} onDoubleClick={() => onRemove(name.id)}>
{name.text}
</li>
));
return (
<>
<ul>{nameList}</ul>
<input type="text" className="listInput" onChange={handleInput} />
<button className="listBtn" onClick={handleClick}>
addList
</button>
</>
);
};
export default IterationSample;
'Front-End > React' 카테고리의 다른 글
[리액트를 다루는 기술] Hooks_2 (useMemo, useCallback,useRef) (0) | 2022.05.09 |
---|---|
[리액트를 다루는 기술] Hooks_1 (useState, useEffect, useReducer) (0) | 2022.05.04 |
[리액트를 다루는 기술] 컴포넌트의 라이프사이클 메서드 (0) | 2022.05.03 |
[리액트를 다루는 기술] 5장 ref (0) | 2022.04.29 |
[리액트를 다루는 기술] Component (props,state) (0) | 2022.04.27 |