컴포넌트 관련 질문이 있어서 문의 드립니다.~

안녕하세요 성인님,

질문에 답변드립니다.

[컴포넌트 최적화]

컴포넌트 최적화와 관련해서 리액트의 shouldComponentUpdate를 언급하셨는데 구체적으로 어떠한 경우에 어떤 최적화를 원하시는 것인지 알려주셔야 정확한 답변이 가능할 것 같습니다. 일단 리액트의 shouldComponentUpdate로 불필요한 re-rendering을 방지하는 것과 뷰를 비교해보자면 Vue.js의 Reactivity는 data의 의존성이 변할 때만 re-rendering이 되므로 개발자가 일일이 최적화에 대해 고민하지 않아도 됩니다.

[Presentational and Container 부분]

컨테이너와 프리젠테이셔널 컴포넌트에 대해서 정확히 이해하고 계시네요. 뷰도 같은 컴포넌트 통신 구조를 가져가기 때문에 아무래도 리액트와 유사한 형태로 구현이 될 것 같습니다. 컴포넌트 코드 재활용 방법에 대해서는 hoc, mixins, hooks 같은 것들을 살펴보시면 좋을 것 같아요.

강의 수강해주셔서 감사합니다.

답변주셔서 감사합니다.~ 우선 추가로 질문사항을 말씀드리겠습니다.!

컴포넌트 최적화

리엑트의 shouldComponentUpdate 는 컴포넌트 생명주기 인데 컴포넌트가 업데이트 되기 전에 호출되는 영역입니다.

shouldComponentUpdate 에서 return 을 boolean 으로 받게 되는데 이때 true 일 경우 컴포넌트를 reRendering 하게 됩니다.

관련 예시로는

shouldComponentUpdate(nextProps, nextState){
   return this.props.item !== nextProps.item  // item의 값이 실제로 변경되어야만 rerender 할수 있도록
}

입니다.

그래서 보통 컴포넌트 배열이 렌더링 되는 리스트 컴포넌트 일때 이전 값과 이후 값이 실제로 바뀌어야만 렌더링 하게 최적화 설정을 해주도록 해야하는데 답변주신 내용으로 보아선 vue가 자동으로 최적화 해주는것으로 보이는군요. 아주 좋은거 같아요.!

Presentational and Container 부분

vue에서도 같은 개념을 사용하는거 같군요. 알려주셔서 감사합니다.!!

아 그리고 하나 더 질문드릴게 있어서 문의 드립니다.

React에서는 위의 Presentational and Container 부분 을 나누기 위해 폴더 구조를

• container (Container 컴포넌트 디렉토리)
• component (Presentational 컴포넌트 디렉토리)

로 권장하여 사용하고 있는데 vue에서는 혹시 이를 관리하도록 폴더 or 파일 네이밍 구조를 권장하는 사항이 있을까요?~

친절하고 명쾌한 답변 감사드립니다.!!