오늘 2차 기술면접을 본 후 내가 부족한 부분을 바로 알고 설명해주신 점을 참고하여 기록해보겠다. 면접을 보는 과정에서 DOM에 대해 물으셨는데 추상적으로만 알고 정확히 어떻게 설명해야할지 잘 모르겠었다. 그래서 먼저 DOM에 대해 다시한번 짚고 본격적인 HOC, 상속과 합성에 대한 부분을 공부해보겠다.
DOM
DOM(돔)이란 Document Object Model의 약자로 문서 객체 모델이라고 직역할 수 있다. 문서 객체라는 것은 html이나 body같은 html 문서 태그들을 자바스크립트가 이용할 수 있는 객체로 만드는 것을 문서 객체라고 하는데, 이 문서 객체와 관련된 객체의 집합을 의미한다. 즉 한마디로 정의하면 브라우저가 HTML 웹 페이지를 인식하는 방식을 계층화시켜 트리구조로 만든 객체 모델인 것이다.
라이브러리와 프레임워크
리액트는 라이브러리? 프레임워크?
리액트에 관련한 질문을 받으면서 리액트가 무엇이냐에 대한 질문에 답을 했다. 이 과정에서 라이브러리와 프레임워크의 차이, 리액트는 그럼 과연 무엇인가에 대한 질문을 받았는데 코드 작성 시의 주도권을 개발자가 가지고 있느냐, 프레임이 가지고 있느냐가 두가지의 차이라고 알고 있었다.
그래서 리액트는 자유도가 높고 원하는대로 사용하기 좋은 라이브러리라고 생각했기에 라이브러리인 것 같다고 대답했는데, 어떻게 보면 모호한 대답이었다. 그래서 리액트 공식문서를 살펴보니 리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리라고 나와있다!
구글에 돌아다니는 수많은 블로그 글을보면 어떤 사람은 라이브러리라고 표현하고, 어떤 사람은 프레임워크라고 표현하는 경우 있어 항상 헷갈렸는데 공식문서에 자바스크립트 라이브러리라고 나와있으니 이건 누가 뭐래도 라이브러리인 것이다!
구글링을 하는 것도 좋지만 정확한 정보를 파악하기 위해서는 공식문서를 참고하는 것이 가장 정확한 방법이라는 것을 다시 한 번 깨달았다.
HOC(Higher Order Component) / 고차 컴포넌트
면접을 보며 리액트에서 HOC라는 것을 알고 있냐는 질문을 주셨는데, 정말 HOC라는 것은 처음 들어봤다. 그래서 리액트 공식문서를 참고했는데 HOC는 고차 컴포넌트로 컴포넌트 로직을 재사용하기 위한 React의 고급기술이라고 나와있었다.
즉, 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트로 반환하는 함수라고 한다.
const EnhancedComponent = higherOrderComponent(WrappedComponent);사용법은 리액트를 추가적으로 더 공부하며 차차 살펴보려고 한다.
리액트에서는 상속보다는 합성을 사용하는 것이 좋다?
리액트를 사용하면서 이 말 역시 처음 들어봤다. 그래서 또 공식문서를 참고하여 읽어봤다.
리액트는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋습니다.
컴포넌트에서 다른 컴포넌트를 담기(합성)
어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없는 경우가 있기 때문에 이러한 컴포넌트에서는 특수한 children prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달하는게 좋다.
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}이러한 방식으로 다른 컴포넌트에서 JSX를 중첨하여 임의의 자식을 전달할 수 있게 되는데
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
Welcome
</h1>
<p className="Dialog-message">
Thank you for visiting our spacecraft!
</p>
</FancyBorder>
);
}<FancyBorder> JSX 태그 안에 있는 것들이 FancyBorder 컴포넌트의 children prop으로 전달되어 출력된다.
상속이란 것은?
다른 부모클래스를 먼저 만들어 자식 클래스는 이 부모 클래스를 상속 받아서 구현하는 것을 말한다. 상속의 경우에는 기능이 변경되거나 추가도리 때마다 상속이 깊어지고 많아져서, 깊이가 깊어질 수록 더 복잡해진다는 단점이 있어 결론적으로 상속보다는 합성을 사용하는 것이 좋다고 표현하는 것 같다.
기술면접을 보면서 내가 몰랐던 부분을 다시한번 짚어볼 수 있었고, 모르거나 애매하게 알고 있는 것들을 다시한번 확실하게 짚어 알게되었다. 아직 리액트 고급 부분에 대해 잘 알지 못하기 때문에 공식문서를 보며 공부하는 것이 필요할 것 같다고 느꼈다.
