인프런 커뮤니티 질문&답변
작성한 질문수
컴포넌트 관련 질문이 있어서 문의 드립니다.~
작성
·
166
0
안녕하세요. 리엑트 에서 vue 로 전향중인 개발자 입니다.
몇가지 질문 드리고 싶은게 있어 문의글을 올립니다.!
컴포넌트 최적화
리엑트에서는 shouldComponentUpdate 라는 생명주기 에서 컴포넌트의 렌더링 여부를 결정하게 해서 랜더링 부분에서 최적화를 하는 부분이 있는데 vue에서는 아무리 찾아봐도 이런 컴포넌트 최적화 전략이 보이지 않아서 궁금해서 문의드립니다. 개발 코드에서 작성을 안해도 vue 자체에서 자동으로 최적화를 시켜주는 것일까요???
- Presentational and Container 부분
리엑트에서는 비즈니스 로직을 담당하는 컴포넌트들을 Container 디렉토리에 넣어서 담당하고 나머지 컴포넌트 들은 전부 내부에 비지니스 로직이 없이 단순 값만 노출하는 Presentational 컴포넌트로 구성해서 사용하고 있는데요. 이를 vue에서는 보통 이러한 부분을 어떻게 나누어서 구성하는지 너무 궁금합니다.ㅠ
답변 2
1
안녕하세요 성인님,
질문에 답변드립니다.
[컴포넌트 최적화]
컴포넌트 최적화와 관련해서 리액트의 shouldComponentUpdate를 언급하셨는데 구체적으로 어떠한 경우에 어떤 최적화를 원하시는 것인지 알려주셔야 정확한 답변이 가능할 것 같습니다. 일단 리액트의 shouldComponentUpdate로 불필요한 re-rendering을 방지하는 것과 뷰를 비교해보자면 Vue.js의 Reactivity는 data의 의존성이 변할 때만 re-rendering이 되므로 개발자가 일일이 최적화에 대해 고민하지 않아도 됩니다.
[Presentational and Container 부분]
컨테이너와 프리젠테이셔널 컴포넌트에 대해서 정확히 이해하고 계시네요. 뷰도 같은 컴포넌트 통신 구조를 가져가기 때문에 아무래도 리액트와 유사한 형태로 구현이 될 것 같습니다. 컴포넌트 코드 재활용 방법에 대해서는 hoc, mixins, hooks 같은 것들을 살펴보시면 좋을 것 같아요.
강의 수강해주셔서 감사합니다.
0
답변주셔서 감사합니다.~ 우선 추가로 질문사항을 말씀드리겠습니다.!
컴포넌트 최적화
리엑트의 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 파일 네이밍 구조를 권장하는 사항이 있을까요?~
친절하고 명쾌한 답변 감사드립니다.!!