2021 리액트 스터디 1주차

• 2021/04/04 리액트 스터디 - 사용 언어 : JAVASCRIPT

  **- 해결 방법** :
  
      - mergeObject : 처음에 object를 합칠 때 assign 함수를 사용하였는데, { ...objA, ...objB }의 형태로
      props의 값들을 다 받아와 새 object를 생성하는 형태로 간단하게 표현이 가능했다.
      - removePassword : 처음에 password라는 prop를 제거할 때 delete라는 함수를 사용했는데,
      앞의 merge헀던 object에도 영향을 끼치게 되었다. 그래서 새 오브젝트를 만들어 반환하되,
      인자로 받은 user object의 props에서 password를 제외한 나머지 props를 가져와 props를 다
      풀지 않고 object의 값을 가져왔다.
      - getOnlyValues/getOnlyKeys : 각각 values와 keys라는 함수로 각 object의 value만, key값 만을
      뽑아내었다.
      - freezObj : freeze 함수로 object에 대한 변경권한을 삭제한다.
      - 또한 static getOnluValues = (user) => Object.values(user);의 형태는 return문을 쓰지 않아도
      return됨을 배웠다.
  
  
  - 코드
  
  ```javascript
  class ObjectFunctions {
  static mergeObjects(objA, objB) {
      return { ...objA, ...objB };
  }
  static removePassword(user) {
      //props를 다 풀지 않고 object의 값을 다 가져옴
      const { name, favFood, job } = user;
      return { name, favFood, job };
  }
  static getOnlyValues(user) {
      return Object.values(user);
  }
  //위와 동일한 함수, return문을 꼭 쓰지 않아도 return됨.
  //static getOnluValues = (user) => Object.values(user);
  
  static getOnlyProperties(user) {
      return Object.keys(user);
  }
  static freezeObj(user) {
      Object.freeze(user);
      console.log(user);
      return user;
  }
  }
  
  /* 이 밑으로는 아무것도 작성하면 안됩니다. */
  
  const objA = {
  name: "Kyeongdoo",
  favFood: "Soju"
  };
  
  const objB = {
  password: "12345",
  job: "Student"
  };
  
  const user = ObjectFunctions.mergeObjects(objA, objB);
  console.log(user);
  
  const rmPwUser = ObjectFunctions.removePassword(user);
  console.log(rmPwUser);
  
  const onlyValues = ObjectFunctions.getOnlyValues(user);
  console.log(onlyValues);
  
  const onlyProperties = ObjectFunctions.getOnlyProperties(user);
  console.log(onlyProperties);
  
  const frozenUser = ObjectFunctions.freezeObj(user);
  
  frozenUser.favFood = "beer"; // 여기서 에러가 발생해야 합니다.
  
  console.log(frozenUser); //변경되지 않은 모습을 볼 수 있음
  
  ```