[리액트를 다루는 기술] 7. 컴포넌트의 반복

만약에 반복되는 코드를 작성해야한다면???

 

import React from 'react';
import PropTypes from 'prop-types';

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

export default IterationSample;

 

 

이렇게 <li> ... </li>  반복되는 코드가있을수있다

그렇다면 파일용량도 증가되므로 낭비된다

 

그러면 어떻게 이런반복적인 내용을 효율적으로 보여줄까?

 

 

 

 

 

1. 배열의 map()함수

자바스크립트 배열 객체의 내장 함수인  map 함수를 사용해 반복되는 컴포넌트를 랜더링해줄수있다.

 

문법

const numbers = [1, 2, 3, 4, 5];
const result = numbers.map((num) => num * num);
console.log(result);	//결과 : 1,4,9,16,25

 

이렇게 사용된다

map 함수를 사용해서 컴포넌트를 랜더링해보자

 

 

 

 

 

map 함수를 사용해서 컴포넌트 만들기

import React from 'react';
import PropTypes from 'prop-types';

const IterationSample = () => {
  const names = ['눈사람', '얼음', '눈', '바람'];
  const nameList = names.map((name) => <li>{name}</li>);
  return <ul>{nameList}</ul>;
};

export default IterationSample;

IterationSample 컴포넌트를 만들고, map을 사용해서 nameList를 뽑아주었다.

하지만 콘솔창을 켜보니 오류가많았다

 

Each child in a list should have a unique "key" prop.

매 리스트는 key값을 가져야한다는 메시지이다.

 

 

 

 

 

 

2. key

 

 

리액트에서 key는 컴포넌트 배열을 렌더링햇을때 어떤 원소에 변동이있엇는지 알아낸다.

그래서 key가있을때 이값을 사용해서 리스트를 순차적으로 비교할필요없이 더욱  빠르게알아낼수있다.

원래있던 소스에서 key 설정을 해주면

 

import React from 'react';
import PropTypes from 'prop-types';

const IterationSample = () => {
  const names = ['눈사람', '얼음', '눈', '바람'];
  const nameList = names.map((name, index) => <li key={index}>{name}</li>);
  return <ul>{nameList}</ul>;
};

export default IterationSample;

 

 

이러면 더이상의 오류가 생기지않는다.

하지만 index를 key 로 사용하면 배열이 변경될때 효율적으로 리렌더링 하지 못한다.

이것을 활용해서 동적인 배열을 렌더링해보는것을 구현해보자

 

 

 

 

 

3.  초기상태 설정하기

import React from 'react';
import { useState } from 'react';

const IterationSample = () => {
  const [names, setNames] = useState([
    { id: 1, text: '눈사람' },
    { id: 2, text: '눈' },
    { id: 3, text: '얼음' },
  ]);

  const nameList = names.map((name) => <li key={names.id}>{name.text}</li>);
  return <ul>{nameList}</ul>;
};

export default IterationSample;

 

 

 

1. input 박스만들어서 값상태변경

 

input 박스를 만들어서

onChange이벤트를 발생

useState로 새로운값을 렌더링해주었다 (바뀌는값관리) ->  hook

 

import React from 'react';
import { useState } from 'react';

const IterationSample = () => {
  const [names, setNames] = useState([
    { id: 1, text: '눈사람' },
    { id: 2, text: '눈' },
    { id: 3, text: '얼음' },
  ]);

  const [inputText, setInputText] = useState('');
  const onChange = (e) => {
    setInputText(e.target.value);
    console.log(inputText);
  };

  const nameList = names.map((name) => <li key={name.id}>{name.text}</li>);
  return (
    <>
      <input value={inputText} onChange={onChange}></input>
      <ul>{nameList}</ul>
    </>
  );
};

export default IterationSample;

 

2. 데이터 추가 기능 구현하기

 

import React from 'react';
import { 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); //새로운항목을 추가할때 사용할 id

  const onClick = () => {
    const nextNames = names.concat({
      id: nextId,
      text: inputText,
    });
    setNextId(nextId + 1); //nextId값에 1을 더해준다
    setNames(nextNames); // names값을 업데이트한다
    setInputText(''); // inputText값을 비운다.
  };

  const onChange = (e) => {
    setInputText(e.target.value);
    console.log(inputText);
  };

  const nameList = names.map((name) => <li key={name.id}>{name.text}</li>);
  return (
    <>
      <input value={inputText} onChange={onChange}></input>
      <button onClick={onClick}>추가</button>
      <ul>{nameList}</ul>
    </>
  );
};

export default IterationSample;

 

 

 

1. 버튼클릭시

2. onClick 이벤트 발생

3.useState 의 현재값을 concat 으로 배열복사

4.key값증가->  고유값설정, 값을 useState 업데이트 함수로 전달

5. input 값 초기화

 

 

 

 

 

3. 데이터 제거 기능 구현하기

각 항목을 더블클릭햇을때 리스트를사라지는 기능을 구현해보겠다

배열의 특정항목을 지울때는 배열의 filter 를 사용한다

filter함수를 사용하면 배열에서 특정조건을 만족하는 원소들만 분류할수있다

 

import React from 'react';
import { 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); //새로운항목을 추가할때 사용할 id

  const onClick = () => {
    const nextNames = names.concat({
      id: nextId,
      text: inputText,
    });
    setNextId(nextId + 1); //nextId값에 1을 더해준다
    setNames(nextNames); // names값을 업데이트한다
    setInputText(''); // inputText값을 비운다.
  };

  const onChange = (e) => {
    setInputText(e.target.value);
    console.log(inputText);
  };

  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 (
    <>
      <input value={inputText} onChange={onChange}></input>
      <button onClick={onClick}>추가</button>
      <ul>{nameList}</ul>
    </>
  );
};

export default IterationSample;

1. onDoubleClick 클릭시 onRemove함수로 id  파라미터를 준다

2. id값으로 삭제하려는 특정id값으로

3. filter함수로 삭제하려는 항목만 삭제시켜준다

 

 

 

 

 

 

정리

반복되는 데이터를 map  함수로 렌더링 하는 방법을 배우고  key 값을 통해서 특정값을  

삭제 , 추가 해주는 방법을 알앗다

여기서 중요한점은  key값은 무조건 유일해야한단는 것이다.

또한 배열을 변형할때는 concat,filter의 배열 내장 함수를 사용하여 새로운 배열을 만든후

새로운 상태로 설정해주어야한다는 것을 명심해야한다.

 

 

다음장에서는 컴포넌트의 스타일링에대해서 알아보자