React - 배열

배열

정의

• 같은 자료형의 데이터를 모아서 관리하는 방식의 자료 구조

• 자바 스크립트에서는 const이나 let 이용하여 배열 생성이 가능하다
• 자바 스크립트에서는 다른 언어와 다르게 다양한 자료형의 데이터를 함께 사용이 가능하다

사용 방법

• let이나 const 키워드를 사용하고 대괄호 내에 쉼표(,)를 이용하여 배열을 생성 가능함

• 사용 예시

//일반적인 배열
const array = [1,2,3]
//여러 자료형의 데이터가 섞인 배열
const data = [
    {
        id: 1,
        title: 't1',
        content: 'c1'
    },
];

배열에 접근하기

1. for문

• 다른 언어와 유사하게 초기값, 조건식, 증감값의 조합으로 사용가능 하다

  단, JSX 내의 중괄호 내부에서는 사용 불가능하므로, 함수 등을 이용해야 사용 가능하다

const arr = [1,2,3];
const arrLoop = () => {
    const newArr = [];
    for(let idx=0; idx<arr.length; idx++){
        newArr.push(<h2 key={idx}> {arr[idx]} </h2>);
    }
    return newArr;
}

return <> { arrLoop() } </>
}

2. map() 함수

• 기존 배열을 새 배열로 만들어 주는 역할을 함

• array.map(callback, [arg])의 방식으로 사용된다

Parameter 이름	설명
callback	새 배열의 요소를 생성하는 함수
currentValue	현재 처리 중인 값
index	현재 처리 중인 index의 값
array	현재 처리 중인 원본 배열
arg(선택)	callBack 함수 내부에서 사용할 레퍼런스

예시

const arr = [1,2,3];
const sqrdArr = arr.map(x => x * x);
console.log(sqrdArr);
//[1, 4, 9]

• 이 예시 코드에서 사용되는 key는 컴포넌트 배열을 렌더링 하면서 어떤 변화가 일어났는지 확인 용으로 사용된다

  • 주의) key값은 항상 유일해야 하므로, id와 같이 고유값을 key값으로 설정해야함

---

참고한 자료

리액트를 다루는 기술

[2022.07.04] 리액트 JSX 반복문