🔆 리액트 개념과 장점, 그리고 컴포넌트란?
react의 개념
프론트앤드 개발을 위한 Javascript 오픈소스 라이브러리로 주로 SPA를 만들 때 사용된다.
장점
- virtual DOM을 사용해서 어플리케이션의 성능을 향상시킨다.
- 서버, 클라이언트 사이드 렌더링 지원이 가능하다.
- 컴포넌트의 가독성이 높고 간단하고 유지보수가 쉽다.
- 다른 프레임워크와 혼용이 가능하다.
컴포넌트란?
하나의 기능구현을 위해 CSS/JS/HTML같은 다양한 코드를 작은단위로 캡슐화 시켜 개발하는 방법이다. 여러개의 컴포넌트를 조합해 복잡한 UI를 만들 수 있다. 컴포넌트는 스스로 상태를 관리할 수 있다. 따라서 다양한 상태를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태관리가 가능하다. 캡슐화, 확장성, 결합성, 재사용성과 같은 이점이 있다.
🔆 리액트 내부 작동 원리: 재조정 (Reconciliation)의 개념
DOM을 직접 제어하지 않고 중간에 virtual DOM 두어 virtual DOM이 변경될때 실제 DOM을 변경하도록 설계한다. 이때 virtual DOM과 DOM 비교하고 DOM을 갱신하는 방법을 재조정(Reconciliation)이라한다.
DOM을 갱신하는 방법은 setState() 메서드 호출과 최상위컴포넌트의 reder()함수를 호출하는 방법으로 2가지가 있다.
이 때 virtual DOM을 갱신하는 방법은 setState() 메서드를 호출하는 방법과, Redux의 경우처럼 store가 변하면 다시 최상위 컴포넌트의 render() 함수를 호출해서 갱신하는 2가지 방법이 있습니다.
🔆 리액트에 있는 라이프사이클과 각 라이프사이클의 역할을 설명하세요.
- componentDidMount() 는 최초로 컴포넌트 객체가 생성될 때 한 번 수행
- componentDidUpdate() 는 컴포넌트의 속성 값 또는 상태값이 변경되면 호출
- componentWillUnmount() 는 이 컴포넌트가 소멸될 때 호출
- render() 는 초기에 화면에 그려줄 때, 그리고 업데이트가 될 때 호출
🔆 리액트 라우터같은 Client Side Routing 이란?
- 웹 페이지의 렌더링이 클라이언트 (브라우저) 측에서 일어나는 것이다.
- 서버와 클라이언트 간의 데이터 트래픽이 감소하고 렌더링이 한번만 있기 때문에 페이지 이동이 빠르다는 장점이 있고, SEO(검색최적화) 사용이 어렵다는 단점이 있다.
- 보안 관련해서는 쿠키에 사용자 정보를 저장해야 해서 위험 요소가 될 수 있다.
🔆 state를 직접 변경하지 않고 setState를 사용하는 이유
리액트에서 reder함수는 state와, setState를 비교해서 서로 다른 값일 경우 호출된다. 그런데 state 값을 직접 수정하게되면 setState와 비교할 수 없어 reder() 함수가 실행되지 않을 수 있다.
🔆 리액트 Hooks의 장점?
로직의 재사용이 가능하고 관리가 쉽다. 함수 안에서 다른 함수를 호출하는 것으로 새로운 hook을 만들수 있다.
기존의 class component는 여러 단계의 상속으로 인해 전반적으로 복잡성과 오류 가능성을 커졌다. 하지만 function component에 hooks이 도입되며 class component가 가지고 있는 모든 기능을 사용할수 있고, class component 복잡성, 재사용성의 단점들까지 해결했다.
🔆 virtual DOM이 무엇인가요? virtual DOM의 장점?
HTML 파일을 스크린에 보여주기 위해선 DOM 노드 트리 생성 → 랜더 트리 생성 → 레이아웃 → 페인팅 과정이 필요하다. DOM 노드는 HTML의 각 엘리먼트와 연관되어 있기때문에 각각의 변화에 모두 반응하여, 복잡한 과정을 매번 실행해야해서 변화가 잦을 경우 성능 저하의 원인이 된다. 하지만 virtual DOM을 사용하면 실제 DOM에 적용되기전 virtual DOM에 변화한 부분만 적용시키고 최종결과만 DOM에 적용시킴으로써 리랜더링을 한번만 하게 하여 성능향상에 도움이 된다.
🔆 JSX란 ?
JSX는 자바스크립트의 확장 문법으로 React 엘리먼트를 생성하는 언어입니다. 자바스크립트 코드를 HTML처럼 표현할 수 있기때문에 하나의 파일에서 HTML 자성까지 가능하고, DOM을 사용하지 않고 특정 태그에 직접적으로 접근할 수 있다. 이런점은 개발에 많은 편리함을 준다.
🔆 React 에서 상태 변화가 생겼을 때, 변화를 어떻게 알아채는가?
React는 상태를 immutable 하게 변경하기 때문에 상태 객체의 주소값이 변경되면 상태가 변화되었다고 인식한다. 그렇기 때문에 객체를 상태로 갖을때 내부에 키-값이 추가/수정/삭제되는 경우 얕은 복사를 통한 새로운 객체를 생성해서 새로운 주소값을 갖는 객체를 새로운 상태로 할당하게된다.
🔆 여러가지 상태 관리 라이브러리(Apollo, Redux, MobX 등)의 차이점은 ??
🔆 useEffect 메소드로 componentWillUnmount가 동작할 수 있는 방법은?
useEffect의 첫번째 인자인 익명함수의 실행결과로 return 되는 익명함수를 작성하면 해당 함수는 componentWillUnmount를 구현할 수 있게 된다.
