안녕하세요! 컴포넌트 설계 방법 질문드립니다!

Question

지금까지 부모 컴포넌트에서 비동기처리후 데이터를 자식컴포넌트에 props로 전달하는 방법으로 구현을 했었는데  ListItem 컴포넌트처럼 ListItem에 쓰이는 모든 데이터는  그자체 컴포넌트에서 관리(비동기처리)하는게 더 옳은 방법인거 같기도하고.. 분기로직을 짜는게 영 불편하기도하고..   이 두 방법에 차이점이 있을까요?

캡틴판교 · Answer

안녕하세요 태웅님, 말씀하신 것도 좋은 방법입니다. 컴포넌트 설계는 컴포넌트를 함수로 바라보시면 설계하시기가 수월하실거에요. 부모에 데이터를 놓고 자식에 데이터를 내려주는 것은 함수의 파라미터와 같은 구조이고, 자식에서 데이터를 놓고 관리하는 것은 함수의 내부에 분기문을 치는 것과 느낌이 비슷합니다. // 부모에서 자식으로 프롭스를 내리는 것을 함수로 빗댄 구조 function hello(data) {   if  (data === 1) {     // ...   } } // 자식에서 데이터를 선언하고 컴포넌트를 사용하는 곳에 따라 내부 로직을 분기하는 모습을 빗댄 구조 funciton hello() {   var data;   if (data === 1) {     // ...   } }