24. 05. 20 TIL

오늘은 유튜브에서 리액트 기초, 입문 강의를 좀 찾아 듣고 리액트 베이직 줌 강의 과제를 했다.

월요일이라 너무 졸리고 피곤쓰... 

문제1) 배열과 객체 만들기

 

다음 사진과 같이 3명의 이름, 나이, 성별에 대한 정보가 존재합니다. 다음의 정보를 배열과 객체를 활용하여 하나의 변수에 담고, 해당 변수를 console.log로 출력하세요.

const 사람들 = [
  { 이름: '철수', 성별: '남', 나이: 19 },
  { 이름: '짱구', 성별: '남', 나이: 20 },
  { 이름: '유리', 성별: '여', 나이: 21 },
];

여러 객체를 만들고 이렇게 묶어주면 된다.

 

---

문제2) 문제1에서 만든 데이터를 html에 보여주기

문제1에서 만든 객체들의 배열을 이용하여 html에 다음과 같이 보여주세요.

const peopleContainer = document.querySelector('.container');

사람들.forEach((사람) => {
  let html템플릿 = `<div class="container">
  <h3 class="name">이름: ${사람.이름}</h3>
  <h3 class="gender">성별: ${사람.성별}</h3>
  <h3 class="age">나이: ${사람.나이}</h3>
</div>`;
  peopleContainer.insertAdjacentHTML('beforeend', html템플릿);
});

 

insertAdjacentHTML : 그냥 추가해준다.

innerHTML : 싹 갈아치워 준다.

 

forEach는 배열 개수만큼 실행하고, 배열 안의 데이터(요소)는 파라미터 부분에 알아서 들어간다.

---

문제3) find 메소드

 

문제1에서 만든 객체들의 배열을 활용하여 성별이 여자인 데이터를 한 명 찾아 콘솔에 출력해보세요.

const 여자 = 사람들.find((사람) => {
  return 사람.성별 === '여';
});
console.log(여자);

변수에 담아 사용하고, 조건을 만족하는 가장 먼저 발견된 것 하나만 찾을 수 있다.

---

문제4) filter 메소드

문제1에서 만든 객체들의 배열을 활용하여 성별이 남자인 데이터를 필터링하여 콘솔에 출력해보세요.

const 남자 = 사람들.filter((사람) => {
  return 사람.성별 === '남';
});
console.log(남자);

새로운 배열을 만들어 주고, 조건에 만족하는 요소만 필터링 한다.

 

---

문제5) map 연습 문제

 

 

문제1에서 만든 객체들의 배열을 활용하여 모든 데이터의 나이에 10을 더한 새로운 배열을 콘솔에 출력해보세요.

 

단, 문제1에서 만든 기존 데이터는 변경되면 안됩니다.

 

기존 데이터가 변경되지 않았는지 확인하기 위해 기존 데이터와 새로운 배열을 모두 콘솔에 출력해보세요.

const age = 사람들.map((사람) => {
  return { ...사람, 나이: 사람.나이 + 10 };
});
console.log(age);

이때 깊은 복사를 해야 하는데... 여기서 좀 애를 먹었다.

그래서 튜터님을 찾아가 여쭤본 결과...

(그래도 좀 어렵긴 했는데)

 

일단 원래 데이터와 별개의 데이터를 만들어야 한다.

 

map은 새로운 배열을 담아주므로 사용하고

사람은 사람들의 각 요소인데, 스프레드 연산자로 (...사람) 기존 객체의 속성을 복사한다.

여기서 나이 속성만 +10을 해서 덮어씌워주는 것이다.

 

 

---

문제6) sort 연습 문제

 

문제1에서 만든 객체들의 배열을 활용하여 나이순으로 정렬해보세요. (내림차순으로 정렬)

 sort는 기존의 데이터를 변경하는 함수입니다. spread operator로 복사본 생성 후 진행해보세요.

 

기존 데이터가 변경되지 않았는지 확인하기 위해 기존 데이터와 새로운 배열을 모두 콘솔에 출력해보세요.

const 나이정렬복사 = 사람들.map((사람) => ({ ...사람 }));

const 나이정렬 = 나이정렬복사.sort((a, b) => {
  return a.나이 - b.나이;
});
console.log(사람들); //기존
console.log(나이정렬);

일단 새로운 배열로 만들어주는 map을 사용해 

사람들에서 각 요소 사람을 복사한다. 

 

그 복사한 것에서 sort를 돌면서, 정렬을 해준다.

---

 

문제7) destructuring (구조 분해 할당) 문법 활용 예시

 

다음의 데이터를 활용하세요.

 

user 데이터에서 주소를 출력하기 위해선 다음과 같이 작성해야 합니다.

 

이때 위와 같이 . (점)을 사용하지 않고, destructuring (구조 분해 할당)을 활용하여 이름, 나이, 주소를 추출하고 콘솔에 출력해보세요.

 

 

const user = {
  이름: '병수',
  나이: 20,
  주소: '시골',
};

const { 이름, 나이, 주소 } = user;
console.log(이름);
console.log(나이);
console.log(주소);

배열, 객체 안의 데이터를 간단하게 뽑아쓰는 방법이다.