[5주차] Thinking in React

[kyuris01]

📚 워크북 링크

https://angry-kettle-22b.notion.site/5-Thinking-in-React-1e1aee41c80e80078615e011229ba2cf

📝 변경/추가 사항 요약

• 실습진행
• product 삭제 기능 구현
• product 수정 기능 구현

✅ 리뷰 요구사항

• FilterableProductTable 컴포넌트에서 product를 추가하거나 삭제하거나 수정하는 등의 기능을 하는 함수를 구현하였는데요, 이때 저는 배열 상태의 원소 하나(객체)를 인자로 받아 로직을 처리하도록 하였는데, 이 방식이 일반적인건지 궁금합니다. 다른 방법으로는 객체의 속성 (이를테면 id)을 인자로 받아서 배열을 순회하며 id를 비교해서 특정 객체를 찾아 로직을 처리하도록하는게 더 나은 방식일까요?
• 워크북 요구사항에 구조를 리팩토링하라는 미션이 있는데, 이를테면 어떤식으로 구조를 리팩토링 하는게 현재 상태에서 더 나은 프로젝트 폴더 구조 혹은 코드를 구현하는것일까요?

📸 확인 방법 (스크린샷)

<제출 전 체크리스트>

• week00 폴더 내에 자신의 폴더를 새로 만드셨나요?
• 자신 폴더 외의 다른 사람의 폴더에서 코드를 수정하지 않았나요?

[qkrxogmla]

수고하셨습니다~

[junghyungo]

타입스크립트로 진행하셨네요 고생하셨습니다.

• 컴포넌트 분리는 잘 해주셨고, 폴더로 나누면서 리팩토링 하면 되겠습니다.

[junghyungo]

이 비교는 객체의 Reference만 비교하여 메모리 상에서 같은 객체를 가리키고 있는지만 따지고, 내용이 같은지는 따지지 않기 때문에 문제가 발생할 수 있습니다.
product type에 id를 생성하여 이 id를 기준으로 비교하는 것이 더 일반적이라고 생각합니다.

[TakioN]

오호 타입스크립트로 하셨네요! JS코드랑 비교하면서 보니까 재미지네요~ 수고하셨습니다!

[Turtle-Hwan]

FilterableProductTable 컴포넌트에서 product를 추가하거나 삭제하거나 수정하는 등의 기능을 하는 함수를 구현하였는데요, 이때 저는 배열 상태의 원소 하나(객체)를 인자로 받아 로직을 처리하도록 하였는데, 이 방식이 일반적인건지 궁금합니다. 다른 방법으로는 객체의 속성 (이를테면 id)을 인자로 받아서 배열을 순회하며 id를 비교해서 특정 객체를 찾아 로직을 처리하도록하는게 더 나은 방식일까요?
워크북 요구사항에 구조를 리팩토링하라는 미션이 있는데, 이를테면 어떤식으로 구조를 리팩토링 하는게 현재 상태에서 더 나은 프로젝트 폴더 구조 혹은 코드를 구현하는것일까요?

객체가 변경의 여지가 없고 reference 만으로 구분 가능하다면 이렇게 사용해도 큰 문제는 없을 것 같습니다.

다만 정현님 말대로 객체 안의 내용이 수정되거나 한다면, 객체에 대한 id를 만들어 두고 이를 기준으로 비교하는 것이 좋을 것 같아요

--
product.name 상태와 product.price 상태를 따로 두셨는데 같이 묶어서 두었을 때랑 따로 두었을 때랑 리랜더링 관점에서 어떤 차이가 발생할지,

ProductTable.tsx에서 본문에서 rows를 JSX.Element[]로 만들고 이를 아래에 삽입했는데 이것도 괜찮지만 함수로 분리했을 때, 다른 컴포넌트로 분리했을때 props 넘겨주는 측면에서 어떤 차이가 있을지 고민해보면 좋을 것 같아요!

이미 잘 구현하신 것 같네요