230117 React 컴포넌트 반복

컴포넌트 반복

1.목록 요소들을 반복처리 할때는 map함수를 이용한다.
2.반복 컴포넌트에는 반드시 key props를 전달해야 한다.

map함수는 실행한 결과를 가지고 새로운 배열을 만들 때 사용

array.map(callbackFunction(currenValue,index,array),thisArg);

• currenValue:현재값
• index:현재인덱스
• array:현재배열
• thisArg:callbackFunction내에서 this로 사용될 값.

 

map을 통해, 태그를 리턴하는 것도 가능하다!
리액트에서 key는 배열을 렌더링 시킬 때 빠르게 변화를 감지하기 위해 사용하는 속성이다.
key는 index대신 고유한 값을 넣어주도록 권유된다.(key를 넣지 않으면 props에러가 발생된다.)
태그별로 고유한 값을 넣어줘야 함. 정말 넣을게 없으면 인덱스를 넣는다.

 

const IterationComponent = () => {

    //1. 반복처리
    const arr = [1, 2, 3, 4, 5];
    // const newArr=arr.map((item,index,arr)=>item*10);
    // console.log(newArr);

    //2. 반복처리(태그)
    // 리액트에서 태그반복처리시 key를 태그에 작성합니다.(key는 고유한 값입니다.)
    // key는 화면에서 렌더링할 때 변화를 감지하기 위해 참조하는 값입니다. 
    // 키는 화면에 나타나지 않는다. html이나 개발자도구에 나오지 않음.
    const newArr = arr.map((item, index) => <li key={index}>{item}</li>)
    return (
        <>
            <ul>
                {newArr}
                {/*
                {arr.map((item,index)=><li key={index}>{item}</li>)}
                 이렇게 한번에 넣기도 한다. */}
            </ul>

        </>
    )
}

export default IterationComponent;

변수를 선언하여 변수에 담아서 넣어도 되고, return문 안에 한번에 넣을 수도 있다.