[기술면접 스터디] 리액트

❓Virtual DOM 이 무엇인지 설명해주세요.

📎 버츄얼돔은 돔요소를 좀 더 효율적으로 조작하기 위해서 만들어진, 돔요소의 복사본과 같은 것입니다. 사용자와 상호작용하는 웹페이지의 필요성이 늘어나면서 좀 더 효율적이고 빠르게 돔 요소를 조작할 필요가 생겨났고, 이런 배경에서 버추얼돔이 생겨났습니다. 버츄얼돔과 리얼 돔은 변경사항이 있을 때 그것을 업데이트하는 방식에서 차이가 납니다. 리얼돔은 새로운 요소를 추가할 때 전체 돔을 다시 렌더링하지만, 버츄얼돔은 새로운 요소가 추가될 때마다 업데이트된 버전의 버추얼 돔과 이전의 버추얼돔을 비교해서 달라진 부분만을 리얼 돔에 업데이트합니다. 이런 과정을 재조정이라고 부릅니다.
버추얼돔을 사용하지 않을 경우 리얼돔을 직접 조작해서 UI를 변경할 수 있습니다. 만약 정보 제공이 목적인 단순한 웹페이지를 만든다면 리얼 돔을 조작하는 것이 더 효율적일 수 있습니다. 버추얼돔 자체가 돔 조작을 효율적으로 하기 위해 추가적인 연산을 감수하는 것이므로, 사용자와의 상호작용에 따른 돔 조작이 없는 웹페이지라면 리얼 돔의 성능이 더 좋을 수 있습니다. 따라서 웹페이지의 목적과 용도에 따라서 리얼돔과 버추얼 돔 중에서 선택해 활용할 수 있습니다.

 

❓JSX에 대해 설명해주세요.

 📎 JSX란 자바스크립트의 확장문법으로, 자바스크립트 문서 내에서 html 문법처럼 친숙하게 코드를 작성하게 해줍니다. 리액트에서 JSX를 사용하는 것의 장점은 렌더링하는 로직과 마크업이 한 공간, 즉 컴포넌트 내에서 공존할 수 있다는 것입니다. 웹이 사용자와 상호작용하도록 발전함에 따라서 자바스크립트로 html요소들을 조작하는 일이 많아졌기 때문에, 이처럼 렌더링 로직과 마크업이 공존하면 좀 더 간결하고 직관적으로 코드를 작성할 수 있습니다. 예를 들어, 회원가입 페이지에서 비밀번호의 유효성에 따라 보여줘야 할 메시지가 다른 경우 html과 자바스크립트를 따로 작성하면 일단 html 파일에 모든 메시지를 넣어 두고 조건에 따라서 display:none을 하는 클래스를 넣어줘야 하겠지만, 리액트상에서 JSX문법을 활용하면 자바스크립트의 삼항연산자로 조건을 걸고 각 항에 html요소들을 넣기만 하면 된다. 이런 식으로 렌더링 로직과 마크업이 공존하게 된 결과, 리액트상에서의 관심은 좀 더 개별 컴포넌트들이 할 일을 나누는 것으로 옮겨갈 수 있었다고 볼 수 있다. 리액트의 핵심 특징인 컴포넌트화가 가능하게 해주는 중요한 문법이라고 할 수 있다. 삼항연산자를 사용할 수 있고 논리 AND 연산자(&&)를 사용할 수 있다. 마지막으로, 조건부 렌더링을 위해 if문을 사용할 수도 있지만, JSX에서는 if문을 사용할 수 없으므로, if문을 사용할 때는 JSX 밖에서 사용해야 합니다.
모든 JSX 엘리먼트는 닫히는 태그가 있어야 합니다.
JSX에서 컴포넌트 이름은 대문자로 시작해야 합니다.
JSX에서는 속성 이름은 camelCase로 작성해야 합니다.
JSX에서는 class 대신 className을 사용해야 합니다
JSX에서는 렌더링할 엘리먼트가 하나의 최상위 엘리먼트로 둘러싸여 있어야 합니다.

 

❓React Hooks에 대해 설명해주세요.

📎 React Hooks는 클래스형 컴포넌트에서 사용하던 기능들을 함수형 컴포넌트를 사용하면서도 사용할 수 있도록 해줍니다. 훅을 이용하면 함수형 컴포넌트에서도 클래스형 컴포넌트의 state와 라이프사이클메서드와 비슷한 기능들을 수행할 수 있습니다. useState와 useEffect 같은 대표적인 훅들이 있습니다.
함수형 컴포넌트와 클래스형 컴포넌트 클래스형 컴포넌트는 React.Component클래스를 상속받아서 생성됩니다. 이 클래스는 render() 메서드를 필수로 구현해야 하며, this.state를 사용하여 컴포넌트의 상태를 저장하고, this.setState()를 사용하여 상태를 업데이트합니다. 반면에 함수형 컴포넌트는 함수로 작성됩니다. 함수형 컴포넌트에서는 상태를 관리하기 위해 useState() Hook을 사용하고, 렌더링을 위해 JSX를 반환합니다 함수형 컴포넌트는 클래스형 컴포넌트에 비해 간결하고 가독성이 좋으며, Hooks를 사용하면 클래스형 컴포넌트에서만 사용할 수 있었던 기능들을 함수형 컴포넌트에서도 사용할 수 있게 됩니다. 
라이프사이클 메서드 생명주기 메서드(Lifecycle method)는 컴포넌트의 각각의 단계에서 실행되는 커스텀 기능입니다. 컴포넌트가 만들어지고 DOM에 삽입될 때(마운트), 컴포넌트가 업데이트될 때, 및 컴포넌트가 DOM에서 마운트 해제될 때(언마운트) 혹은 제거될 때 사용할 수 있는 기능을 제공합니다.
React의 useEffect Hook은 함수형 컴포넌트에서 side-effect를 관리하기 위한 기능입니다.
클래스형 컴포넌트에서는 상태를 관리하기 위해 state 객체를 사용하지만, 함수형 컴포넌트는 state를 직접 가질 수 없으므로 useState Hook을 사용합니다.React의 useState Hook은 함수형 컴포넌트에서 상태(state)를 관리하기 위한 기능입니다.useState Hook은 배열을 반환합니다. 이 배열의 첫 번째 요소는 상태의 초기값이고, 두 번째 요소는 상태를 업데이트하기 위한 함수입니다. 이 함수를 호출하면 컴포넌트가 리렌더링되고, 새로운 상태가 적용됩니다.side-effect란, 컴포넌트 내부에서 발생하는 부작용이나 외부에 영향을 주는 작업을 말합니다. 예를 들어, API 호출, 데이터 가져오기, DOM 조작, 타이머 설정 등이 side-effect의 예시입니다.
useEffect의 첫 번째 인자로 전달하는 함수는 side-effect를 수행하고, 두 번째 인자로 전달하는 배열은 어떤 값이 변경될 때마다 useEffect를 실행할지를 결정합니다.

 

❓Props와 State에 대해 설명해주세요

📎 props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용됩니다. props는 컴포넌트에 전달되는 읽기 전용 데이터입니다. 즉, 컴포넌트 내부에서 props를 직접 변경할 수 없습니다. props는 함수의 매개변수와 비슷하게 작동하며, 컴포넌트를 호출할 때 전달됩니다. 이러한 props는 변경되지 않으므로 컴포넌트가 렌더링될 때마다 같은 결과를 반환합니다.
state는 컴포넌트 내부에서 선언되는 컴포넌트의 상태다. props와 가장 큰 차이점은 변경할 수 있다는 점이다. state를 변경할 때는 setState 메서드를 사용해야 합니다. 이 메서드를 사용하지 않고 직접 state를 변경하면, React에서 예기치 않은 동작이 발생할 수 있습니다. 또, setState를 사용하지 않고 state를 직접 변경하면 리액트가 state의 변경을 감지하지 못하고 재렌더링을 하지 않게 됩니다.
또한, props는 컴포넌트 간에 데이터를 전달하는 데 사용되고, state는 컴포넌트 내부에서 상태를 관리하는 데 사용됩니다.
props drilling props drilling이란 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정입니다.
React에서 컴포넌트가 많아지면 상위 컴포넌트에서 하위 컴포넌트에게 props를 넘겨줄때 많은 컴포넌트들을 거치게된다. 만약 props의 전달이 10개, 100개 등 많은 과정을 거치게 된다면 상당히 비효율적이고 유지보수도 어려워지게된다.
context API는 이런 props drilling의 문제를 해결했다. 위에서 아래로 props를 전달하지않아도 provider을 이용해 중간 엘리먼트들에게 props를 넘겨주지 않고 주고자 하는 하위 엘리먼트에게 바로 접근이 가능하다.
Context API는 React에서 상태를 전역으로 관리하기 위한 방법 중 하나입니다.
Context API를 사용하면, 부모 컴포넌트에서 자식 컴포넌트로 상태를 전달할 필요 없이, 어떤 컴포넌트에서든지 전역 상태를 사용할 수 있습니다. Context API를 사용하기 위해서는, createContext 함수를 사용하여 전역 상태를 생성하고, useContext hook을 사용하여 해당 상태를 사용하면 됩니다.
그밖에도 리덕스, 리코일 등의 라이브러리를 활용해서 상태관리를 할 수 있는 것으로 알고 있다.prop는 읽기 전용 데이터로, 자식 컴포넌트 내에서 props를 변경할 수 없다. 다만, 부모 컴포넌트의 state를 props로 전달했을 경우 부모 컴포넌트 내에서 state가 변경되면 자동으로 자식 컴포넌트도 재렌더링되고, 따라서 props가 변경된 것처럼 보일 수 있다.React에서 state가 객체나 배열인 경우, 이를 변경하려면 state를 직접 수정하는 것이 아니라, 기존의 state를 변경하지 않고 새로운 객체나 배열을 생성하여 적용해야 합니다.setState는 비동기적으로 작동한다. 여러 개의 state 업데이트를 한데 묶어서 업데이트하는 배칭이라는 기능을 구현하고 있기 때문이다. 이 점 때문에 state가 최신의 값이 아닌 이전의 값을 참조하고 있을 수 있다. 이 문제를 해결하기 위해서는 setState 함수 내에서 이전값을 받아서 조작을 하도록 하거나 useEffect를 활용해 setState가 동기적으로 작동하게 만들 수 있다.

 

답변 못한 질문

리액트의 state 변화 감지 기준은 무엇인가요? 콜스택의 주소값

React 내부의 Update queue는 얼마의 주기로 실행되는지와 왜 그 주기로 실행되는지 설명해주실수있나요. 16ms/일반적인 윈도우 기기는 60프레임율을 유지하기 때문에.

웹팩과 바벨이 무엇인지 설명해주실수있나요?

웹팩은 자바스크립트 애플리케이션을 위한 정적 모듈 번들러이고, 바벨은 자바스크립트 코드를 다양한 브라우저와 환경에서 호환되는 버전으로 변환해주는 도구입니다.

컴포넌트는 언제 업데이트되나요? props가 바뀔 때/state가 바뀔 때/부모 컴포넌트가 리렌더링될 때/this.forceUpdate()를 실행할 때