2주차
- 개념과 장점, 그리고 컴포넌트란 무엇인가요?
- 웹페이지에서 UI를 만들기위한 자바스크립트 라이브러리
- 장점
- 화면을 업데이트할 때 속도가 빠르다 → virtual dom
- virtual dom → 사용자와의 상호작용으로 인해 페이지의 업데이트가 수시로 이루어짐 → 바뀐부분만 리렌더링 함.
- 컴포넌트 단위로 개발해서 가독성이 좋고 유지보수가 쉽습니다.(재사용성)
- 화면을 업데이트할 때 속도가 빠르다 → virtual dom
✅ 리액트는 웹페이지에서 뷰를 만들기 위한 자바스크립트 라이브러리입니다. 장점으로는 virtual dom을 이용해서 화면을 업데이트할 때 속도가 빠르고, 컴포넌트 단위로 관리하기 때문에 가독성과 유지보수하기에 좋습니다.
- 리액트의 내부 작동 원리를 설명하세요.
✅ 리액트는 DOM 엘리먼트를 직접 조작하지 않고 대신 가상 DOM을 다루어서 리액트가 가상 DOM을 생성하고 브라우저가 이를 렌더링하도록 하는 방식을 따릅니다. 이 가상 DOM을 리액트 엘리먼트라고 하는데 리액트 엘리먼트는 개념상 HTML 엘리먼트와 비슷하지만 실제로는 자바스크립트 객체입니다. 따라서 HTML의 DOM API를 직접 다루는 것이 아니라 자바스크립트 객체인 리액트 엘리먼트를 직접 다루어서 동작합니다.
- 재조정 (Reconciliation) 개념에 대해서 설명하세요.
✅ 리액트는 실제 DOM을 바로 조작하지않고 가상돔을 이용하는데요. 이전의 가상돔과 현재 가상돔내용을 비교해서 변경된 부분만 실제 돔에 렌더링 합니다. 이것을 재조정이라고 합니다.
- 리액트에 있는 라이프사이클과 각 라이프사이클의 역할을 설명하세요.
✅ 리액트의 모든 컴포넌트는 초기화, 업데이트, 소멸 이 세 단계를 거칩니다. 이러한 흐름을 라이프사이클이라고 하는데, 먼저 초기화단계는 최초 컴포넌트 객체가 생성 될 때 한번 수행되는 과정이고, 업데이트 단계는 컴포넌트가 마운트된 후 컴포넌트의 속성이나 상태값이 변경되면 업데이트가 실행됩니다. 마지막 소멸단계는 컴포넌트 소멸될 때의 과정입니다.
- Class Component의 생명주기 메소드에 대해서 설명하세요.
✅ 컴포넌트 생명주기는 크게 Mount될 때, 업데이트할 때, UnMount할 때로 분류할 수 있습니다.
대표적인 메서드로는 첫째로 compontDidmount()라는 메서드가 있는데 이는 컴포넌트가 마운트 된 직후에 호출이 됩니다. 다음으로 componentDidUpdate()는 render가 일어난 직후에 호출됩니다. componentWillUnmount()는 말그대로 컴포넌트가 마운트 해제되어 제거되기 직전에 호출이 됩니다.
- 리액트 라우터같은 Client Side Routing 에 대해서 설명하세요.
✅ 클라이언트 사이드 라우팅은 Client에서 주소창의 엔드포인트를 바꾸는 방식으로 서버에 실존하지 않습니다. 서버사이드 라우팅과 비교하면 서버사이드 라우팅은 서버에 HTTP요청을 보내서 직접적으로 엔드포인트를 바꾸는 방식으로 가상의 엔드포인트를 이용하는 클라이언트 사이드라우팅과의 차이가 있습니다.
- state를 직접 변경하지 않고 setState를 사용하는 이유에 대해서 설명하세요.
✅ state객체를 직접 변경하게되면 컴포넌트가 변경된 것을 알지 못하기 때문에 변경된 부분이 있더라도 다시 렌더링되지 않아 state의 변경이 적용되지 않습니다. 그래서 setState를 통해 재할당 하여 변경합니다.
- Props Drilling 이란 무엇인가요?
✅ Props Drilling은 리액트의 컴포넌트 트리에서 데이터를 전달하기 위해 필요한 과정을 의미합니다.
부모에서 자식의 자식의 자식이 연결되어있 때 props를 전달해 주어야한다면 props의 추적이 힘들고 관리또한 어려워집니다. 그래서 redux와 같이 전역상태 라이브러리를 활용하여 해결할 수 있습니다.
- 리액트 Hooks의 장점은 무엇인가요?
✅ 리액트 Hooks의 장점은 기존 class component의 기능을 모두 사용할 수 있고, 코드가 간결해져서 가독성과 재사용성이 좋습니다. 예를들어 기존 class component에서는 라이프 사이클을 이용할 때 componentDidMount, DidUpdate, WillUnmount 등 모두 다르게 처리해야하지만 react hooks을 사용하면 useEffect 안에서 모두 처리가 가능해집니다.
- Class Component와 Function Component의 차이점에 대해서 설명하세요.
✅ 클래스형 컴포넌트와 함수형 컴포넌트의 역할은 동일합니다. 차이점이 있다면 클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용할 수 있으며 임의 메서드를 정의할 수 있다는 점이 있습니다. 그리고 render사용해서 그 안에서 보여 주어야 할 JSX를 반환해야 합니다.
- virtual DOM이 무엇인가요? virtual DOM이 좋은 이유에 대해서 설명하세요.
✅ Virtual DOM은 실제 DOM을 기반으로 만든 가상의 DOM입니다. View에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달합니다. 그렇기 때문에 Virtual DOM은 실제 DOM 변화를 최소화하여 불필요한 렌더링을 줄여주는 역할을 하여 효율적인 렌더링을 가능하게 해줍니다.
- JSX가 무엇인가요?
✅ JavaScript XML의 약어로 React Element를 생성하는 언어입니다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 DOM을 사용하지 않고 태그에 접근할 수 있어 더 편리한 개발이 가능합니다.
- 웹 성능 향상을 위해 최적화를 해 본 경험이 있나요? 혹은 useMemo와 useCallback 메소드를 활용해 최적화하는 원리에 대해서 설명하세요.
✅ useMemo나 useCallback은 렌더링 할 때마다 메모리가 많이 소모되는 값은 계산하지 않고 최적화하는데 도움을 줍니다. dependency 리스트를 생성해서 그 중 하나가 변경되면 바로 로직을 실행시킵니다. useMemo는 값을 기억하는 대신 useCallback은 함수를 기억하는 차이가 있습니다.
- React 에서 상태 변화가 생겼을 때, 변화를 어떻게 알아채는지에 대해서 설명하세요.
✅ React는 상태를 immutable 하게 변경하기 때문에 상태 객체의 주소값이 변경되면 상태가 변화되었다고 인식합니다. 그렇기 때문에 객체를 상태로 갖을 때 내부에 키-값이 추가/수정/삭제되는 경우 얕은 복사를 통한 새로운 객체를 생성해서 새로운 주소값을 갖는 객체를 새로운 상태로 할당하게됩니다
- 여러가지 상태 관리 라이브러리(Apollo, Redux, MobX 등)의 차이점에 대해서 설명하세요.
- 리덕스 - 함수형 프로그래밍, 구조상 Store와 컴포넌트 연결을 위해 코드를 따로 작성해주어야함
- MobX - 객체지향 프로그래밍, 이러한 코드를 데코레이터로 깔끔하게 작성할 수 있음.
- Redux는 Store의 상태를 Immutable하게 변경하기 때문에 항상 새로운 상태를 반환해야한다(Read Only). MobX는 Mutable하게 변경이 가능하다(Read and Write)
✅ 우선 리덕스는 함수형 프로그래밍에서 영향을 받은 라이브러리이고 MobX는 객체지향 프로그래밍을 권장합니다. 또한 리덕스는 구조상 Store와 컴포넌트 연결을 위해 코드를 계속 따로 작성해주어야하지만 MobX는 이러한 코드를 데코레이터로 간단하게 작성할 수 있습니다. Redux는 Store의 상태를 Immutable하게 변경하기 때문에 항상 새로운 상태를 반환해야하지만(Read Only), MobX는 Mutable하게 변경이 가능한(Read and Write) 차이가 있습니다.
- useEffect 메소드로 componentWillUnmount 가 동작할 수 있는 방법에 대해서 설명하세요.
✅ useEffect 내부에 return 하는 arrow function을 작성하여 componentWillUnmount를 구현할 수 있습니다.
2022.08.29 Daily 회고
오늘 한 일
- React 기본 학습, 모의면접
- 기업과제 진행
느낀 점
- 리액트 많이 사용해서 잘안다고 생각했는데 말로 설명하려니 어려움
