[TIL #20] 개인과제 리뷰

오늘 수업시간에 스탠다드 반에서 진행했던 개인과제 리뷰를 다시 정리하고자 적는다

---

느슨한 비교 vs 엄격한 비교

느슨한 비교보다는 엄격한 비교 쓰는걸 습관으로 할 것

// 느슨한 비교
console.log(5 == '5'); // true
console.log(0 == false); // true
console.log(null == undefined); // true

// 엄격한 비교
console.log(5 === '5'); // false
console.log(0 === false); // false
console.log(null === undefined); // false

둘다 가능하기는 한데 느슨한 비교를 할 경우 나중에 문제가 생길 경우가 있다.
그러니 엄격한 비교를 사용할 것.

c언어는 ==를 사용해서 가끔 나도 느슨한 비교를 쓸 때가 있는데 엄격한 비교 사용을 기본으로 해야겠다!!

const removeUser = (id) => {
    const removedUsers = users.filter((~~~))
      return user.id !== id; // 느슨한 비교 : !=  
    })
  };

---

const vs let

• 변수 선언은 항상 const

const removeUser = (id) => {
    let newUsers = users.filter(~~~));
  };

//let을 쓰는 순간 재할당이 될거 라고 예측이 됨. -> 근데 재할당 될 일이 없음 
// 변수 선언할때 무조건 const! 

• let을 쓰는 순간 재할당이 될 것이다! 라고 예측이 돈다. 근데 정작 코드에서는 재할당을 할 필요가 없는 변수들이 많이 있다. 주의하기!!!

---

제어 컴포넌트

재어컴포넌트 : Form의 입력값을 다룰때 화면에 보이는 입력값을 react 상태와 연결시킨 것

즉, input value와 상태가 연결된 경우

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>Input value: {value}</p>
    </div>
  );
}

---

early return vs if/else

early return

const addUser = (e) => {
    e.preventDefault();
    if (!name || !age) {
      alert("~~~")
      return;
    }
   setUsers([...users, { id: Date.now(), name, age }]);
};

if/else

const addUser = (e) => {
    e.preventDefault();
    if (!name || !age) {
      alert("~~~");
    } else {
	    setUsers([...users, { id: Date.now(), name, age }]);
	  }
};

---

리스트 랜더링 시 key 값은 unique 해야함

{users.map((user) => (
      <li key={{ user }}>
          이름: {user.name} 나이:{user.age}
          <button onClick={() => removeUser(user.id)}>삭제</button>
      </li>
))}

리렌더링 될 때 마다 새로운 객체를 생성해서 변하는 key값 user로 넣고 있으니 unique 하지 않는 코드!
virtual DoM 비교 단계에서 리스트 key 값을 보고 새로운 요소를 판별하기 때문에 unique 한게 좋다.

{users.map((user) => (
      <li key={{ user.id }}>
          이름: {user.name} 나이:{user.age}
          <button onClick={() => removeUser(user.id)}>삭제</button>
      </li>
))}

key 값을 user.id로 바꿔주면 unique 해진다!

---

나중에 코드를 짤때 유용하게 쓸 수 있을거 같아서 정리해놓는다! 추가할 내용이 있다면 이곳에다가 추가해놓겠다