221130 TIL

변수가 저장되는 방식

[1,2,3]이라는 배열이 RAM에 저장되고, arr이라는 변수는 그 공간을 통하는 길을 담는다.
따라서 얕은 복사를 하게되면 통하는 길이 같기 때문에, 배열, 객체의 요소를 우리가 바꿨다고 생각하더라도,
그 길은 변하지 않아서 컴퓨터는 State값이 변하지 않았다고 판단하여 리렌더링하지 않는다.

<div className="list-wrapper">
  {works
    .map((work) => {
      if(work.isDone === false) {
          return (
            <Working
              handleRemove={removeWorkHandler}
              handleChange={changeWorkHandler}
              work={work}
              key={work.id}
            />
          );
      } else { return null }
    })}
</div>

이 코드에서 오류가 발생했을 때, 아마 isDone을 변경하는 함수인 changeWorkHandler에서
얕은 복사를 하고 isDone을 변경하는 형식으로 작성했던 것 같다.
정확히 어느부분에서 State의 변경을 인식하지 못한 것인지는 모르겠지만, 변경방식이 문제였음을 깨닫게 되었다.

 javascript reference data type

 

function Modal() {
  return (
    <>
      <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
      <div>쓸모없는 div추가</div>
    </>
  );
}

<> </> fragment문법을 사용해서 div병렬로 쓸 수 있다. (하던대로 <div></div>로 묶어도 됨)