개발자

객체 배열에 대해서 컴포넌트를 어떻게 설계하시나요??

2023년 01월 20일조회 178

안녕하세요. 객체배열에 대해서 컴포넌트를 여러분은 어떻게 제작하고 계실까요?? 처음에는 첫번째 처럼 컴포넌트를 제작하다가 다른 곳에서도 재활용 할수있는 컴포넌트가 좋을것같아서 두번째 코드처럼 설계를 했는데 단점이 이중 for문을 쓰게 되는것 입니다… 제머리로는 더 깊게는 생각이 안나서 혹시 다른방법을 사용하고 계신분이 계실까요?? 첫번째(정적인 설계) function example() { const object = [ { id: 1, age: 17, name: 'strict' }, { id: 2, age: 16, name: '"love"' } ] return ( <> {object.map((item, index) => ( <div key={item.id}> {item.age} {item.name} </div> ))} </> ) } 두번째(동적인 설계) function example() { const object = [ { id: 1, number: 17, title: 'strict' }, { id: 2, number: 16, title: 'love' } ] const object2 = [ { id: 1, age: 17, name: 'strict' }, { id: 2, age: 16, name: 'love' } ] const value1 = ['number', 'title'] const value2 = ['age', 'name'] const TwoFor = ({obj, value}) => obj.map((item) => value.map((v) => { return <div>{item[v]}</div> }) ) return ( <> <TwoFor obj={object} value={value1} /> <TwoFor obj={object2} value={value2} /> </> ) }

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

인기 답변

Gorilla.Kim님의 프로필 사진

구조를 보고나니 테이블 형태 컴포넌트가 떠오르네요 ㅎㅎ 얼마만큼 내부 로직을 추상화 할것인가에 따라 달라질것 같습니다. 저는 보통 객체 배열을 UI로 그려낼때에는 a.map... 처럼 해당 코드가 순환로직임을 있는 그대로 드러내는 편입니다. 굳이 숨겨야할 이유가 없거나, 해당 배열을 순회하기전 반드시 해야하는 전처리 작업등이 없다면 말이죠. 그 이유는, 해당 코드를 읽을 다른 개발자를 위한 가독성 때문입니다. 추상화 라는 것이 보여지는 코드를 간결하게 압축해주어 좋을수도 있지만, 추상화 범위를 어디까지 잡냐에 따라 추상화 이전보다 더 로직이 복잡해질 수 있기 때문이에요. 이러한것을 고려했을때 간단한 단순 반복 작업은 추상화 하지 않고 있는 그대로를 보여주는게 다른 개발자들에게 이 구문이 반복 구문이구나를 쉽게 이해시켜줄 수 있다 생각합니다 : ) 질문자님께서 작성주신 코드 형태가 반복적으로 자주 사용되는 구조라면, 이럴때도 편의성을 위해 별도의 컴포넌트로 추상화를 하는 편이기도 합니다. 이때 항상 주의하는건 추상화 하되, 만들어내는 컴포넌트가 정확히 무엇을 해야하는지를 고민하고 최소한의 역할만 갖도록 하는것이에요. 예시로 주신 코드로 보면 - 배열데이터를 받아 반복적으로 데이터를 화면에 구성하는 컴포넌트 - 특정 오브젝트 안에서 원하는 데이터만 보여주는 컴포넌트 정도로 분리할 수 있을것 같아요, 그래서 만약 저였다면, 오브젝트 배열이 순환하면서 내뱉는 각 단일개의 오브젝트만 받아서 UI를 구성하는 컴포넌트만 따로 만들것 같아요. 그리고 질문자님께서 작성하신것 처럼 보여지길 원하는 키값만 따로 배열로 받아 화면을 구성하도록 할것 같습니다. 객체배열 정보를 이용해서 UI그리는 좋은 방법이 무엇이 있을까 개발하면서 저도 항상 고민되는 문제에요. 보통 저는 아래 두가지 문제 때문에 고민을 하곤합니다 1. 객체 배열을 이용해서 리스트 정보를 보여주는데, 너무 잦은 추가 및 변경이 일어난다. 2. 객체 배열의 크기(내부요소 양)이 너무 많다. 이러한 경우에는 객체 배열형태가 아닌 객체 혹은 ES6에서 추가된 Map 자료구조를 활용해서 해결하곤 합니다. 위에 제가 작성드린 문제상황도 왕왕 자주 발생해서 훌륭하신 분들이 블로그로 정리를 잘 해두셨습니다 ㅎㅎ. 검색해보시며 위 문제들에 대해서도 고민해보시고 공부해보시면 좋을것 같아서 추가로 첨언 드렸어요! 즐거운 리팩토링하는 시간 되시길 바랍니다!

profile picture

익명

작성자

2023년 01월 20일

좋은글 감사합니다:)

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!