# [React] Object & Array

* 객체 사용 이유 = 코드의 재사용 성을 위해
    
* Key와 Value로 구성된 property들의 집합
    

객체 선언

```javascript
const name = 'Tom';
const user = {
    firstName: 'Harper',
    lastName: 'Kim'
};

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>
}

// 접근 방법 2가지
{user.firstName}
{user[firstName]}
```

수정하기

```javascript
//(1) 객체는 mutable
const position = { x: 0, y: 0 };
position.x = 5; 

//(2) React의 state는 immutable
const [position, setPosition] = useState({ x: 0, y: 0});
// onMove = (e) => {
//    position.x = 3;
//    position.y = 5; 
//} 이렇게 변경 불가

setPosition({
    ...position,
    y: 5
});
```

```javascript
// 객체의 복사 (spread syntax 이용하면 편함)
const [person, serPerson] = useState({
    name: 'May Park",
    artwork: {
        title: 'Blue Nana',
        city: 'Hamburg',
        image: '<https://i.imgur.com/dsdkdj.jpg>',
    }
});

// 객체 일부 수정하기 
setPerson({
    ...person,
    artwork: {
        ...person.artwork,
        city: 'New Delhi'
    }
});
```

```javascript
//배열 수정하기 
const [arr, setArr] = useState(['a', 'b', 'c', 'd']);

//새로운 배열(객체)데이터 만들기
let newArr = [...arr];
newArr[0] = 'e';
setArr(newArr);

console.log(arr); //['e', 'b', 'c', 'd']
```

map 예제

```javascript
//배열
array = [1,2,3,4,5,6,7,8];
const squared = array.map(n => n*n); //[1,4,9,16,25,36,49,64]

//객체 배열
const items = [
    {
        id: 1,
        text: 'hello'
    },
    {
        id: 2,
        text: 'bye'
    }
];
const texts = items.map(item => item.text); //['hello', 'bye']
```

map -&gt; Element에 사용시, 고유 key 값 부여!

```javascript
//map 사용시 element에 고유 key값 부여 - 안정화
const numbers = [1,2,3,4,5];
const listItems = numbers.map(number => 
    <li key={number.toString()}>
        {number}
    </li>
);

//보통 데이터의 ID를 Key로 사용
const todoItems = lists.map(item => 
    <li key={item.id}>
        {item.text}
    </li>
);

//안정적인 ID 없으면, 최후의 수단으로 index를 key로 사용 가능
const todoItems = lists.map((item, index) =>
    <li key={index}>
        {item.text}
    </li>
);
```

```javascript
function ListItem(props) {
    // 맞습니다! 여기에는 key를 지정할 필요가 없습니다.
    return <li>{props.value}</li>;
}


//방법1: 변수 선언 따로 하기 
function NumberList(props) {
    const numbers = props.number;
    const listItems = numbers.map(number => 
        // 맞습니다! 배열 안에 key를 지정해야 합니다.
        <ListItem key={number.toString()} value={number} />
    );
    return (
        <ul>
            {listItems}
        </ul>
    );
}

//방법2 : JSX 사용하면 중괄호 안에 모든 표현식 포함 시킬 수 있음. map() 함수의 결과를 인라인 처리 
function NumberList(props) {
    const numbers = props.numbers;
    return (
        <ul>
            {numbers.map(number => 
                <ListItem key={number.toString()} value={number} />
            )}
       </ul>
    );
}
```

예시:: map 중첩

```javascript
const INFO_LIST = [
  {
    title: "이용 안내 사항",
    list: [
      "친구에게 초대 링크를 공유합니다.",
      "공유한 링크를 통해 친구가 신규 회원가입 시, 내 추천코드를 입력합니다.",
      [<span>200포인트</span>, "가 적립됩니다."],
    ],
  },
  {
    title: "추가 안내 사항",
    list: [
      "친구가 신규가입자 일 경우에만 포인트 지급이 됩니다.",
      ["포인트 적립은", <b>최대 10명</b>, "까지 가능합니다."],
      [
        "10명을 초과하여 적립을 원하는 유저는 ",
        <b>
          내 추천코드와 친구의 추<br />
          천코드를 가입일 포함 3일 이내에 asdf@gmail.com
        </b>,
        "로 남겨주시면 안내해 드리겠습니다.",
      ],
      "부적절한 방법으로 포인트를 적립한 회원은 포인트 적립이 취소됩니다.",
    ],
  },
];

const Info = () => {
  return (
    <StyledContainer>
      <StyledInfo>
        {INFO_LIST.map((v, i) => (
          <div key={i}>
            <h1>{v.title}</h1>
            <ol>
              {v.list.map((listValue, listIndex) => (
                <li key={listIndex}>{listValue}</li>
              ))}
            </ol>
          </div>
        ))}
      </StyledInfo>
      <p>※ 해당 이벤트는 사전 예고 없이 조기 종료 및 취소될 수 있습니다.</p>
    </StyledContainer>
  );
};
```