인프런 커뮤니티 질문&답변

안녕하세요! summery님!

수업의 뒷부분까지 가시게 되면, react-hook-form과 공통컴포넌트를 학습하시게 되세요!
이를 사용하여, 공통컴포넌트를 분리하시는 연습을 하셔야 합니다!
해당 수업에서는 댓글등록과 댓글수정 등의 컴포넌트가 동일하여, 댓글등록을 하나의 거대컴포넌트로 뽑고, 이를 댓글수정에서 그대로 재사용 하였는데요!, 사실 이러한 경우는 그렇게 많이 존재하지는 않아요!

따라서, 뒷부분에서 학습하신 내용을 바탕으로 아래와 같이 진행해 보세요!^^

1. 컴포넌트는 최대한 작은 단위로 공통컴포넌트 형태로 쪼개기(레고블록)
   => react-hook-form의 props를 받을 수 있도록 만들어 주세요

2. 댓글등록컴포넌트(도화지)에, 공통컴포넌트(레고블록) 가져와서 조립하기

3. 댓글등록컴포넌트(도화지)에서 버튼 누르면 요청되는 로직들 hooks(공통기능)로 만들어서 빼기

4. 댓글수정컴포넌트(도화지)에, 공통컴포넌트(레고블록) 가져와서 조립하기

5. 댓글수정컴포넌트(도화지)에서 버튼 누르면 요청되는 로직들 hooks(공통기능)로 만들어서 빼기

    

6. 댓글수정컴포넌트(도화지)에서 초기값을 react-hook-form에 집어넣어주는 useEffect가 담긴 hooks(공통기능) 만들기

    

   이정도로 만들어 보시면 될 것 같아요!^^

    

위 내용을 간략히 정리해보면,
도화지 전체를 재사용 할 수 있는 케이스는 사실 많지 않으므로, 일반적인 방법으로 도화지에서 조립하기 방식을 많이 사용한답니다!
따라서, [블록상자, 기능상자] 이 2개를 만들어 주시고, 이들을 댓글등록도화지, 댓글수정도화지에서 불러와서 조립하여 사용하시면 됩니다!
(조립을 위해 필요한 코드는 사실상 css 몇줄이므로 이정도 투자로 전체 페이지 가독성 및 유지보수성을 많이 올리실 수 있어요)

실력을 조금 더 향상시키고 싶으시다면, 위 블록상자(공통컴포넌트)와 기능상자(공통hooks)들은 유저페이지에서만 사용되는 것이 아닌 관리자사이트, 사장님사이트 등에서도 재사용될 수 있는데요!
위 상자들을 npm에 업로드 하시고 각 프로젝트에서 다운로드 받아서 적용하는 방법을 사용하신다면 재사용성이 훨씬 더 높아지겠죠?!^^
이 방식이 실무에서 사용하는 방식이기 때문에, 꼭 npm publish까지 연습해 보시기 바래요!

안녕하세요, 인프런 AI 인턴이에요. 댓글 기능 컴포넌트 구조에 대해 고민하고 계시는 것 같네요.

각각의 댓글 생성, 수정 등의 뮤테이션과 댓글 컴포넌트를 구성하는 데이터 타입이 서로 다르고 렌더링 조건도 다르다면, 공통으로 기능을 추출하는 것이 어려울 수 있습니다. 하지만 몇 가지 조언을 드릴게요.

첫째, 각각의 댓글 컴포넌트를 만들 때, 가능한한 재사용성을 고려해보세요. 예를 들어 댓글 생성, 수정, 삭제와 같은 기능을 수행하는 부분을 모듈화한 컴포넌트를 만들고, 상황에 따라 이를 조합하여 사용할 수 있도록 구성할 수 있습니다.

둘째, 각 댓글 컴포넌트에서 공통으로 사용하는 UI 컴포넌트와 뮤테이션들을 별도의 모듈로 만들어서 재사용성을 높일 수 있을 것입니다. 이렇게 모듈화를 통해 중복된 코드를 줄이고, 코드의 가독성을 높일 수 있을 겁니다.

셋째, 데이터 타입이 서로 다르면서도 결국 댓글이라는 공통 개념으로서 사용되는 경우에는, 댓글의 최소한의 요소만을 가지는 데이터 구조를 설계하고, 필요에 따라 속성을 동적으로 추가하거나 삭제하는 방식을 고려해보세요. 이를 통해 데이터의 유연성을 확보하면서도 공통으로 활용할 수 있을 겁니다.

하지만, 계속 고민하셔도 비효율적인 구조라는 생각이 든다면, 각각의 댓글 기능 별로 개별적으로 구현하는 것이 가장 현실적일 수 있습니다. 이렇게 하여도 중복된 코드가 발생하더라도 명확하고 이해하기 쉬운 코드가 될 것입니다.

더 구체적인 도움이 필요하다면, 코드의 일부분이나 예시를 보여주시면 더 자세히 답변드릴 수 있을 것 같아요. 조언이 도움이 되었는지 확인해보세요. 다른 질문이 있으면 언제든지 물어보세요!