리액트

(리액트를 다루는 기술) 6장 컴포넌트 반복

세모이 2021. 4. 1. 18:00
반응형

컴포넌트 반복

  1. 자바스크립트 배열의 map()함수
    1. 문법
    • array.map(callback, [thisArg])
      • callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 3가지
        • currentValue : 현재 처리하고 있는 요소
        • index : 현재 요소의 index 값
        • array : 현재 처리하고 있는 원본 배열
      var numbers=[1,2,3,4,5];

number.map(function(c,i,a){
            console.log(c,i,a)})

1 0 [1, 2, 3, 4, 5]
2 1 [1, 2, 3, 4, 5]
3 2 [1, 2, 3, 4, 5]
4 3 [1, 2, 3, 4, 5]
5 4 [1, 2, 3, 4, 5]
  1. 데이터 배열을 컴포넌트 배열로 변환
import React from "react";

const IterationSample = () => {
  return (
    <div>
      <ul>
        <li>눈사람</li>
        <li>얼음</li>
        <li>눈</li>
        <li>바람</li>
      </ul>
    </div>
  );
};
export default IterationSample;

-> 반복되는 태그를 mpa()이용해서 간단하게 바꿀 수 있다

import React from "react";

const IterationSample = () => {
  const names = ["눈사람", "얼음", "눈", "바람"];
  const nameList = names.map((v) => <li>{v}</li>);
  return (
    <div>
      <ul>{nameList}</ul>
    </div>
  );
};
export default IterationSample;
  1. key
  • 리액트에서 key는 컴포넌트 배열을 렌더링 했을 때 어떤 원소에 변동이 있는지 알아내려고 사용
    1. key 설정
      • key 값을 설정 할 때는 map 함수의 인자로 전달되는 함수 내부에서 props를 설정하듯이 설정(key값은 유일하게)
    import React from "react";

const IterationSample = () => {
  const names = ["눈사람", "얼음", "눈", "바람"];
  const nameList = names.map((v, i) => <li key={i}>{v}</li>);
  return (
    <div>
      <ul>{nameList}</ul>
    </div>
  );
};
export default IterationSample;
  1. 응용
    1. 데이터 추가
    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 onChange = (e) => setInputText(e.target.value);

  const onClick = () => {
    const nextNames = names.concat({
      id: nextId,
      text: inputText,
    });
    setNextId(nextId + 1);
    setNames(nextNames);
    setInputText("");
  };

  const namesList = names.map((name) => <li key={name.id}>{name.text}</li>);
  return (
    <div>
      <input value={inputText} onChange={onChange} />
      <button onClick={onClick}>추가</button>
      <ul>{namesList} </ul>
    </div>
  );
};
export default IterationSample;
    - 배열에 항목 추가할 때 push 안쓰고 concat를 쓴 것은 push 함수는 기존 배열 자체를 변경하고, concat는 새로운 배열을 만들어 준다는 차이
-> 리액트에서는 상태를 업데이트 할 때는 기존 상태를 그대로 두면서 새로운 값을 상태로 설정해야 하기 때문에
    1. 데이터 제거
      • filter 함수를 사용하면 배열에서 특정 조건을 만족하는 원소들만 분류 가능
      const numbers = [1, 2, 3, 4, 5];
numbers.filter((e) => e > 3)[(4, 5)];
    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 onChange = (e) => setInputText(e.target.value);

  const onClick = () => {
    const nextNames = names.concat({
      id: nextId,
      text: inputText,
    });
    setNextId(nextId + 1);
    setNames(nextNames);
    setInputText("");
  };

  const onRemove = (id) => {
    const nextNames = names.filter((name) => name.id !== id);
    setNames(nextNames);
  };

  const namesList = names.map((name) => (
    <li key={name.id} onDoubleClick={() => onRemove(name.id)}>
      {name.text}
    </li>
  ));
  return (
    <div>
      <input value={inputText} onChange={onChange} />
      <button onClick={onClick}>추가</button>
      <ul>{namesList} </ul>
    </div>
  );
};
export default IterationSample;
반응형