자바스크립트 deep dive - week 2

9~10 장 까지의 내용 중 활용법을 생각해 적었습니다.

논리곱 연산자 와 React JSX

• data가 있는 경우에만 Data를 보여주고 싶어서 이렇게 짰다면..?

const test = () => {
  return <div>{data.length && <Data />}</div>;
};

• data의 length가 0이 된다면 Data 컴포넌트는 나오지 않겠지만 div 0 div 이 되므로 div태그 에 0이 보이게 되거나 data가 undefined일 경우 에러를 일으킨다.

• 삼항 연산자나 비교식으로 만들어서 사용하자.

참고 - 논리연산자 && 사용해 렌더링할 때 주의할 점

객체 키 백틱으로 동적 생성

• 목업 데이터를 만들거나 데이터 정렬이 필요할 때 reduce를 사용하게 되는데 이 때 동적으로 키를 만들 때 유용하게 쓰일듯 하다

var people = [
  { name: "Alice", age: 21 },
  { name: "Max", age: 20 },
  { name: "Jane", age: 20 },
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    const key = `${property}_${obj[property]}`
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

var groupedPeople = groupBy(people, "age");
// groupedPeople is:
// {
//   age_20: [
//     { name: 'Max', age: 20 },
//     { name: 'Jane', age: 20 }
//   ],
//   age_21: [{ name: 'Alice', age: 21 }]
// }