좋은 컴포넌트 만들기!

안녕하세요! 프론트엔드 병아리 개발자입니다! 컴포넌트에 대한 몇가지 노하우를 얻고싶어 용기내어 질문 드립니다. 요즘 좋은 컴포넌트란 어떤 것일까에 대해 많이 고민하고, 나름의 기준을 잡고자 열심히 공부도 하고 컴포넌트 연습장도 만들어서 리팩토링을 계속 해나가는 중인데요. 코드가 늘 100% 완벽할 수는 없겠지만 이런 부분에 있어서 많이 공부하고 고민을 하고 코드를 작성하면 그래도 더 좋을 것 같다는 생각이 듭니다. 그래서 질문드립니다..! 저는 최근까지는 뷰와 로직의 분리, 가독성, 불필요한 렌더링을 줄이는 것, 재사용성 등 여러가지를 고려하면서 좋은 컴포넌트에 대한 기준점을 잡고자 노력하고 있었는데요, 이 부분에 대해 다른 분들은 어떤 기준점을 갖고 계시는지, 노하우가 있으신지 궁금합니다. 컴포넌트 작성에 대한 부분이나 커스텀 훅을 만들고 나누는 방법 같은 것들이요! 아니면 참고할만한 키워드만 주셔도 열심히 공부해보겠습니다! 질문이 너무 추상적인 것 같지만.. 혹시 공유해주실 분 계신가요? 🥲

렌더링의 속도차이가 얼마나 나는지 아시는분 계실까요??

안녕하세요. react를 하다가 문득궁금해진게 있어서 질문해봅니다..! 컴포넌트를 제작하던중에 첫번째 const hello = {a: 1, b: 2, c:3} Return( <div>{hello.a}</div> <div>{hello.b}</div> <div>{hello.c}</div> ) 두번째 const hello = {a: 1, b: 2, c:3} const world = [a,b,c] return ( world.map((v) => ( <div>hello[v]</div> )) ) 두번째는 map을 사용하기때문에 O(N)이 걸린다고 생각이 듭니다. 혹시 컴포넌트가 렌더링 되는 속도도 둘이 차이가 있을까요?? 차이가 있다면 첫번째 컴포넌트 같은경우에는 O(1)의 속도를 갖는걸까요?

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

안녕하세요. 객체배열에 대해서 컴포넌트를 여러분은 어떻게 제작하고 계실까요?? 처음에는 첫번째 처럼 컴포넌트를 제작하다가 다른 곳에서도 재활용 할수있는 컴포넌트가 좋을것같아서 두번째 코드처럼 설계를 했는데 단점이 이중 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} /> </> ) }