강의

멘토링

로드맵

Inflearn brand logo image

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

cdf313님의 프로필 이미지
cdf313

작성한 질문수

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

8.5) Read - 투두리스트 렌더링하기

List컴포넌트에서 필터링 하는 것과 App 컴포넌트에서 필터링하는 것의 차이

해결된 질문

작성

·

47

0

🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요)

  • 제목을 구체적으로 작성해 주세요

    • 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다.

    • ️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등

    • 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!

       

       

     

  • 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다.

    • 깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요

    • 직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲

       

  • 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요

    • 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!

    • 제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲

       

  • 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요

    • 더 빠른 답변이 가능합니다!

 

안녕하세요. 강사님!

8.5) Read - 투두리스트 렌더링하기

강의에서 질문이 있습니다.

검색어로 필터링하는 기능이 List.jsx에 되어있는데요, 이 부분 관련해서 질문이 있습니다.

  • 필터링이 App.jsx에서 필터링 하는 것과 어떤 차이가 있나요??

  • 어떤 이유에서 List.jsx에서 필터링하는지도 궁금합니다. (원본 데이터를 건들지않기 위함(?)일까요?)

  • 그리고 어떤 컴포넌트에서 필터링 하더라도 리렌더링이 발생하는건가요?


감사합니다!

답변 2

0

cdf313님의 프로필 이미지
cdf313
질문자

답변 감사합니다!

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.

우선 필터링 과정을 List 컴포넌트에서 수행하는 이유는 단순히 필터링 된 데이터가 오직 List 컴포넌트에서만 필요하기 때문입니다. 기능상의 차이는 없지만 만약 App 컴포넌트에서 데이터를 필터링하게 되면 해당 데이터를 또 Props로 전달해 줘야 하는 불편함이 생깁니다.

추가로 필터링 과정과 리렌더링은 큰 연관이 있지 않습니다. 리렌더링은 새로운 일기를 추가하거나 수정, 삭제 했을 때에 App 컴포넌트의 data State가 변경되어 App 컴포넌트가 리렌더링되면서 발생하게 됩니다.

cdf313님의 프로필 이미지
cdf313

작성한 질문수

질문하기