JMZS (1)

리액트

• React에 대해 설명해주세요.

• React의 원리, 특징, 장단점이 무엇인가요?

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

• Virtual DOM 작동 원리에 대해 설명해주세요.

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

• 답
동우
리액트
• React에 대해 설명해주세요.
• 자바스크립트 기반, (SPA)싱글 페이지 어플리케이션의 UI를 생성하는데 집중한 라이브러리이다.
• 상태값이 변경될 때마다 UI를 자동으로 업데이트해주는 JS 라이브러리
• 꼬리질문
• SPA 는 무엇인가?
• SPA을 위한 라이브러리라 부족한 부분과 해결책? 페이지 전환 기능, react-router
• React의 원리, 특징, 장단점이 무엇인가요?
• 선언형 이라 대화형 UI를 작성하기 용이하다.
• 컴포넌트를 사용해서 UI를 재사용이 가능하고 서로 독립적인 조각 여러개로 나누어 관리가 가능하다.
• 가상돔을 통해 변경된 부분만 업데이트하는 효율적인 원리를 통해 UI를 업데이트 한다.
• 장점: 재사용 가능한 컴포넌트를 사용해서 사이트가 커지거나 프로젝트가 커져도 프로젝트 유지보수가 편리하고, 가상돔을 통해 UI에서 변경 된 부분만 업데이트 해줄 수 있다.
• 단점: 데이터 모델링, 라우팅, Ajax 지원 안됨, View 이외의 기능은 직접 구현해야 함, 로딩시간이 길다.
• Virtual DOM 이 무엇인지 설명해주세요.
• 실제 DOM에 접근하여 조작하는 대신, 해당 DOM을 추상화 하여 자바스크립트 객체로 구성한 것
• 동적으로 데이터가 변화했을 떄, 직접적으로 DOM을 조작하는 것이 아니라 DOM의 복사본인 새로운 Virtual DOM을 생성하여 그것을 비교해 UI를 업데이트 해준다.
• Virtual DOM 작동 원리에 대해 설명해주세요.
• 기존의 Virtual DOM와 새로운 Virtual DOM을 비교해 변경된 부분의 DOM만을 변경합니다.
• 이 과정을 조화 과정이라고 하는데, 해당 과정에서 비교 알고리즘이 사용됩니다.
• 두 개의 트리를 비교할 떄, React는 두 엘리먼트의 루트 엘리먼트부터 비교하고, 해당 루트 엘리먼트의 타입에 따라 동작이 달라집니다.
• 그리고, 자식에 대한 재귀적 처리를 할 때, 앞에서 부터 데이터를 넣을 경우 모든 자식을 변경해야하하는 비효율 문제가 있는데 key속성으로 해당 문제를 해결한다.
• JSX에 대해 설명해주세요.
• 리액트에서 사용하는 문법으로, JS와 HTML를 동시에 사용한다. 또한 HTML에 JS 변수들이나 선언형 프로그래밍 방식들을 바로 사용할 수 있는 일종의 템플릿 언어이다. (보기 쉽고 익숙하다. )
• 차이점: js와 jsx 확장자는 기능적으로 큰 차이를 가지고 있지는 않고, convention적인 측면에서 논쟁들이 존재하는 것 같습니다.
• 브라우저가 실행하기 전에 코드 번들링 하기 전에 js로 변환해서 사용하는데 그 과정에서 바벨 사용
• View만을 관리하는데 Model 과 다른 부분은 리액트에서 어떻게 사용하나요?
• 바뀐 부분만 업데이트 하는것보다 전체를 한번에 렌더링 하는 것이 좋지 않나요?
• 디버깅에 용이하고, 상대적으로 안정적이다.
• Virtual DOM을 쓰면 항상 성능이 좋은가?
• 지연님의 대답을 들어보면 DOM을 직접 조작하는 것처럼 들렸다. 직접적으로 DOM을 조작하는 게 맞는가?
• 지금 => 삼위일체
• 다음 => 하루에 한명씩
은지
• React에 대해 설명해주세요.
• 리액트는 자바스크립트 라이브러리이며 재사용 가능한 컴포넌트 기반의 아키텍쳐입니다. 또한 Vue와 같이 다른 프레임워크와 다르게 오직 View만 관리하는 라이브러리입니다.
• React의 원리, 특징, 장단점이 무엇인가요?
• React는 SPA 방식으로 사용자의 인터렉션마다 단일 페이지의 특정 부분만을 변경하며 페이지를 구성합니다. 이 변경 사항을 웹 페이지에 적용하기 위해서, Virtual DOM을 이용합니다. 변경 사항이 발생한 UI만을 재렌더링하며, 브라우저 내 발생하는 연산이 줄어 성능이 개선된다는 특징이 있습니다.
• React의 특징
• SPA 기반이기 때문에 MPA와 다르게 페이지를 서버에서 받아올 때 다시 새로고침하지 않아 더 좋은 사용자 경험을 제공할 수 있다는 특징을 가집니다.
• 단방향 데이터 바인딩 방식으로 동작하며 데이터 흐름이 상위에서 하위 컴포넌트로 흐르기 때문에 데이터 추적과 디버깅이 쉽다는 특징을 가집니다.
• React의 장단점
• 장점 : 컴포넌트 기반으로 동작하므로 코드 재사용성과 유지 보수에 용이하다는 점과 그로 인한 최적화된 렌더링이 가능해진다.
• 단점 : React가 SPA 방식으로 동작하기 때문에 만약, 앱의 규모가 커지면 로딩 시간이 느려진다는 단점이 있습니다. 또한 MVC중 View만을 관리하는 라이브러리이기 때문에 View 이외의 기능은 다른 라이브러리를 사용하거나 직접 구현해야 하는 단점이 존재한다.(router, redux)
💡
SPA의 장점과 단점은 무엇인가요? SPA의 장점으로는 전체 페이지를 로드하지 않고 페이지의 일부만 바꾸기 때문에 웹 사용성 측면에서 좋습니다. 하지만 하나의 페이지만을 사용하므로 한 번에 해당 페이지에 관련된 모든 컴포넌트와 리소스를 불러와야하기 때문에 초기 로딩 시간이 길다는 단점이 존재합니다.
💡
단방향 데이터 바인딩 방식과 양방향 데이터 바인딩 방식의 차이를 설명해주세요. 단방향 데이터 바인딩은 데이터 변경을 감지하는 하나의 Watcher가 자바스크립트의 데이터 갱신을 감지해 자동으로 사용자의 UI 데이터를 갱신하지만, 양방향 데이터 바인딩은 사용자의 UI의 데이터 변경을 감시하는 watcher와 자바스크립트 데이터의 변경을 감시하는 watcher가 UI와 자바스크립트 데이터를 자동으로 동기화하는 방식을 말한다.
• Virtual DOM이 무엇인지 설명해주세요.
• DOM의 추상화 버전이며 html 객체에 기반한 자바스크립트 객체로 표현된다.
• Virtual DOM을 이용하면 실제 DOM에 접근해 DOM 요소를 조작하는 비효율적인 연산을 줄이기 때문에 브라우저의 성능을 개선시킬 수 있으며 Virtual DOM은 실제로 렌더링되지 않아 연산 비용이 적다는 특징을 가집니다.
• UI의 가상적인 표현을 메모리에 저장하고 ReactDOM 라이브러리에 의해 실제 DOM과 동기화하는 개념을 말한다.
• Virtual DOM 작동 원리에 대해 설명해주세요.
• 먼저 데이터를 업데이트하면 전체 UI를 DOM이 아닌 Virtual DOM에 리렌더링합니다. 그 후 이전 Virtual DOM과 현재 Virtual DOM과 비교해 변경된 부분만 실제 DOM에 적용하게 됩니다.
• DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고 페이지를 리페인트하는데 이렇게 DOM을 조작할 때마다 웹 페이지를 새로 그리는 작업을 최대한 줄이기 위해 리액트는 Virtual DOM 방식으로 동작합니다.
💡
꼬리 질문 : Virtual DOM의 성능이 항상 좋은가요?
• Virtual DOM을 조작하는 것도, 많은 컴포넌트를 조작하는 경우, 오버헤드가 발생할 습니다. 다만, Virtual DOM 제어가 DOM 제어에 비해 상대적으로 비용이 적게 들기 때문에 사용자와의 인터렉션이 많은 웹 사이트의 경우 DOM이 아닌 Virutal DOM을 사용하는 것입니다.
• 만약 정보 제공만 하는 웹 페이지라면 인터렉션이 발생하지 않기 때문에 Virtual DOM이 아닌 일반 DOM 성능이 더 좋을 수도 있습니다.
• JSX에 대해 설명해주세요.
• jsx는 자바스크립트 문법의 확장 문법이며, XML과 매우 비슷하게 생겼다.
• jsx를 이용해 컴포넌트가 반환하는 엘리먼트를 작성한다.
• jsx는 번들링 과정에서 Babel을 이용해 자바스크립트 형태로 변환된다.
💡
JSX의 장점은 무엇인가요? JSX는 HTML 코드와 비슷하기 때문에 일반 자바스크립만 사용한 코드보다 더 익숙하며 가독성이 좋다.
 
지연
 
• React에 대해 설명해주세요.
• 리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리입니다. 싱글 페이지 어플리케이션이나 모바일 애플리케이션 개발에 사용됩니다. 보통 MVC나 MVW 등과 같은 아키텍쳐의 경우에는 모델과 뷰가 함께 있기 때문에 그 규모가 커지고, 양방향 데이터 플로우일수록 더욱 복잡해져 디버깅과 코드를 이해하기 어려워집니다. 리액트는 오직 view에만 집중한 라이브러리로, 단방향 데이터 흐름을 활용합니다. 복잡하고 동적인 웹 어플리케이션에서 UI를 동적으로 나타내기 위해서 많은 상태 관리가 요구되는데, 리액트는 이때 DOM 요소 하나 하나를 직접관리 하지 않고, virtual DOM을 이용해 불필요한 연산을 줄이고 효율성을 높여 개발할 수 있습니다.
• 꼬리 질문 1 : 그냥 데이터가 바뀔 때마다 새롭게 렌더링하는 방식이 더 편하지 않나요?
⇒ 웹 브라우저에서 계속 새롭게 렌더링한다면, CPU 점유율이 증가하며 메모리도 많이 사용하게 됩니다. 또한, 사용자에게 끊김 현상을 제공할 수 있기 때문에, 성능 또한 저하될 수 있습니다.
• 꼬리 질문 2 : UI를 동적으로 나타낸다는 것이 무엇인가요?
⇒ 동적으로 웹 페이지를 변경하다 보면 element를 생성하거나 수정하고 제거하는 등 DOM을 변화시키는 수많은 연산이 생겨납니다. 이 연산 과정과 더불어 웹 페이지의 UI 의 동적인 변화가 이루어 지는 것을 말합니다.
 
• React의 원리, 특징, 장단점이 무엇인가요?
• 초기 렌더링 과정에서 render 함수를 이용해 컴포넌트를 렌더링하고, 이후에 HTML 마크업을 생성해 DOM 요소 안에 주입합니다. 이후, 조화 과정에서 데이터가 업데이트 되면 해당 컴포넌트는 render 함수를 또 다시 호출하며 virtural DOM을 활용해 이전 DOM 노드와 비교해 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트 합니다.
• 특징 & 장점 : 컴포넌트 별로 나누어 개발이 가능합니다. 이는 개발을 쉽게 하고, 유지보수에 용이하며, 생성한 컴포넌트는 재사용 또한 가능합니다. 그리고, 단방향 데이터 플로우를 가지기 때문에 단순한 데이터의 흐름으로 이해가 쉽고 편리한 구현이 가능합니다.
• 정말 뷰만 신경 쓰기 때문에 데이터 모델링, 라우팅, Ajax 등 기능 지원이 안된다. 기타 기능의 경우에는 직접 구현하거나 다른 라이브러리를 사용해야 한다는 단점이 존재합니다.
• 꼬리 질문 1 : 단방향 데이터 바인딩이 어떻게 이루어지며, 그에 대한 장점은 무엇인가요?
⇒ 리액트 내에서의 데이터 흐름은 부모에서 자식으로 이루어 집니다. 그렇기 때문에 디버깅에 용이하며, 다른 라이브러리에 비해 안정성이 높습니다.
 
• Virtual DOM 이 무엇인지 설명해주세요.
• 웹브라우저 단에서 DOM에 변화가 일어나면 엔진이 웹 페이지를 새로 그리기 때문에, 업데이트가 너무 잦게 되면 성능이 저하될 수 있습니다. Virtual DOM은 실제 DOM에 접근하여 조작하는 대신, 추상화한 DOM을 메모리에 저장하고, 실제 DOM과 동기화하는 프로그래밍 개념으로, DOM 처리 횟수를 최소화해 효율적으로 업데이트를 진행하도록 합니다.
• 꼬리 질문 1 : Virtual DOM을 사용할 때와 사용하지 않을 때의 속도 차이가 많이 난다고 생각하시나요?
⇒ Virtual DOM을 사용하는 것이 무조건 빠르지는 않습니다. 리액트를 사용하지 않고도 코드 최적화를 최대한으로 이끌어 내면 DOM 작업이 느려지는 것을 개선할 수 있으며, 정적인 페이지의 경우에는 리액트를 사용하지 않는 편이 더 나은 성능을 보이기도 합니다.
 
• Virtual DOM 작동 원리에 대해 설명해주세요.
• 데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링 하고, 이전 VirtualDOM에 있던 내용과 현재 내용을 비교합니다. 이때, 바뀐 부분이 있는 경우에만 실제 DOM에 적용하기 때문에 효율적인 업데이트를 진행할 수 있습니다.
• 꼬리 질문 1 : 일반적으로 어떤 서비스에서 virtual DOM, 즉 리액트를 통해 개발을 진행할 것이라고 생각하시나요?
⇒ 트위터나 페이스북과 같이 무한스크롤로 이루어진 웹 어플리케이션의 경우에 직접적으로 DOM에 접근해 변화를 주다보면 성능적으로 문제가 발생하게 되는 데, 이러한 대규모 어플리케이션의 개발에 리액트를 사용하면 성능 이슈를 해결할 수 있습니다.
 
• JSX에 대해 설명해주세요.
• 자바스크립트의 확장 문법으로, XML과 매우 유사합니다. 마크업과 로직을 하나의 파일에 넣어 관리할 수 있기 때문에, 가독성과 활용도가 높습니다. JSX로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링하는 과정에서 바벨을 사용해 일반 자바스크립트 형태의 코드로 변환됩니다.
• 꼬리 질문 1 : JSX로 작성된 코드는 어떻게 활용되나요?
⇒ 코드가 번들링되는 과정에서 바벨을 사용해 일반 자바스크립트 형태의 코드로 변환됩니다.

• 엘리먼트와 컴포넌트의 차이에 대해 설명해주세요.

• 리액트에서 컴포넌트를 어떻게 생성하나요?

• 클래스형 컴포넌트를 사용해보셨나요?

• 클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해 설명해주세요.

• 함수형 컴포넌트의 장점에 대해 설명해주세요.

• 답
동우
엘리먼트와 컴포넌트의 차이에 대해 설명해주세요.
• 엘리먼트는 React의 가장 작은 단위이고, 컴포넌트의 구성 요소이다.
• 엘리먼트는 인스턴스가 아니다. 엘리먼트는 immutable한 plain object이다.(엘리먼트가 생성되면, 절대로 변화되지 않는다.)
• 엘리먼트는 컴포넌트 인스턴스나 DOM 노드에 관한 정보를 묘사하고 있다.
//
• Element는 바로 사용되지는 않으며, Component에서 리턴받아서 사용되곤 합니다.
• 엘리먼트는 타입(type)과 속성(props) 2가지 필드로 구성된다.
• type을 보고 DOM 노드인지, 컴포넌트 인스턴스인지 알려준다.
• 그리고 props로 해당 객체가 갖고 있는 속성들, 클래스네임이나 자식 엘리먼트 등을 나타낸다.
• 위 엘리먼트는 아래처럼 단순한 HTML을 나타낸다. 컴포넌트
• 함수 컴포넌트는 데이터를 가진 props 객체인자를 받아 element를 반환한다.
• UI를 재사용 가능한 개별적인 여러 조각으로 나눈 것이다.
• 컴포넌트는 엘리먼트 트리를 캡슐화한다.
• 컴포넌트의 속성을 수정할 때 사용하는 요소다.
리액트에서 컴포넌트를 어떻게 생성하나요?
클래스로 만드는 컴포넌트
• 컴포넌트에 상태가 존재하고 그 상태에 따라 컴포넌트가 주기적으로 업데이트 되어야 한다면 클래스 컴포넌트를 사용하자. React.Component
• 컴포넌트에 상태가 없고 항상 정적으로 데이터가 표기가 된다면 함수 컴포넌트를 이용하자. JSX
• JSX를 사용하면, createElement 사용없이, 일반적으로 html을 작성하는 방식으로 코드를 작성할 수 있다. 하지만 브라우저는 jsx를 읽을 수 없으므로 babel을 사용해서, jsx문법들을 js처럼 바꿔서 사용한다. 굳이 확장자에 jsx를 안써도 괜찮다. js 파일에 jsx를 작성하고 babel 설정에서 js도 읽어 들여 변환하면 된다.
• 클래스는 멤버변수가 딱 한번 생성되는 반면에 function 컴포넌트는 매번 실행되기 때문에 계속 반복해서 생성된다. 가장 일반적으로 state와 render함수를 이용하는 클래스로 만드는 컴포넌트이다. 상태가 존재하고 상태에 변화가 생기면 render함수가 실행된다.
클래스형 컴포넌트를 사용해보셨나요?
• 특별히 사용은 안해봤다. 하지만, 공부할 때 클래스형 컴포넌트로 써있는 예시가 많아 접해보았고, 라이프 사이클 공부를 할 때 보았다.
• 라이프 사이클
• Will 접두사가 붙은 메서드: 특정 작업을 작동하기 전에 실행되는 메서드
• Did 접두사가 붙은 메서드: 특정 작업을 작동한 후 실행되는 메서드 라이프 사이클은 총 세가지(마운트, 업데이트, 언마운트) 카테고리로 나뉜다.
클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해 설명해주세요.
클래스형 컴포넌트
• 상태가 존재한다.
• 라이프사이클 메서드가 존재한다.
• 상태의 변화에 따라 렌더함수가 실행된다.
함수형 컴포넌트
• 상태가 없다.
• 라이프사이클 메서드가 없다.
• 단, 리엑트 훅을 사용하면 클래스 컴포넌트처럼 사용이가능하다. (함수 컴포넌트안에서도 상태를 가질 수 있다.)
• useState 훅으로 state를 관리할 수 있다.
• 상속대신 합성으로 컴포넌트를 만들어야 한다.
함수형 컴포넌트의 장점에 대해 설명해주세요.
• 함수형 컴포넌트는 render()함수가 필요 없다. 그래서 컴포넌트 마운트 속도가 더 빠르고, 가독성이 좋은 장점이 있다.
• 함수형 컴포넌트에서 this를 사용하지 않아 this로 야기될 수 있는 문제를 해결할 수 있다.
• this.props인데, this는 변할 수있는데 props는 불변성을 지켜야 한다.
은지
• 엘리먼트와 컴포넌트의 차이에 대해 설명해주세요.
Element는 DOM 노드에 대해 정보를 가진 객체이며, 한 번 생성되면 다시 변형되지 않는다는 특징을 가집니다.
Component는 Element를 반환하는 함수나 클래스를 의미합니다. 컴포넌트는 props를 input으로 받아 재사용이 가능한 UI를 만드는데 사용됩니다.
💡
컴포넌트의 동작 컴포넌트는 props를 input으로 받아 재사용이 가능한 UI를 만든다.
• 리액트에서 컴포넌트를 어떻게 생성하나요?
두 가지로 나누어 설명할 수 있습니다.
클래스형 컴포넌트에서는 내부의 render 메서드를 통해 반환하는 jsx로 컴포넌트를 생성하며, 함수 컴포넌트에서는 내부의 return문으로 반환한 jsx로 컴포넌트를 생성합니다. 이 때 컴포넌트가 반환한 jsx 엘리먼트는 React의 createElement를 호출해 컴포넌트 객체를 생성합니다.
이를 메모리에 저장해 ReactDOM.render 함수를 통해 Web API(document.createElement)를 이용해 실제 웹 브라우저에 보여지게 됩니다.
💡

createElement를 설명해주세요.

React.createElement(
  type, // 태그 이름 문자열 | 리엑트 컴포넌트 | React.Fragment
  [props], // 리엑트 컴포넌트에 넣어주는 데이터 객체
  [...children] // 자식으로 넣어주는 요소들
);
• 클래스형 컴포넌트를 사용해보셨나요?
프로젝트에 사용해보지는 못했지만 생명 주기를 배울 때 접해본 개념입니다.
클래스 컴포넌트는 Component를 상속받아야 하며, 생성자 함수 내부에서 상태를 생성하고, render 메서드로 jsx를 랜더링하는 특징이 있습니다.
💡
클래스형 컴포넌트의 생명 주기를 설명해주세요. 생명 주기는 크게 처음 컴포넌트가 생성되어 랜더링된 경우, 컴포넌트가 업데이트된 경우, 컴포넌트가 제거되는 경우, 이 3가지로 나누어 이야기할 수 있습니다. 컴포넌트가 생성되었을 때는 componentDidMount이 호출되며, 업데이트된 경우는 componentDidUpdate, 컴포넌트가 DOM상에서 제거될 때는 componentWillUnmount 메서드가 호출됩니다.
• 클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해 설명해주세요.
클래스 컴포넌트는 생성자 내부에서 state를 초기화해 상태를 관리하며, 또한 컴포넌트 내부에서 lifeCycle 메서드를 사용할 수 있습니다. 하지만 함수형 컴포넌트는 state와 lifeCycle 메서드를 hook의 도움을 받아 처리합니다. 또한 prop의 사용에도 차이를 보입니다.
💡
클래스형 컴포넌트 대신 함수 컴포넌트 사용할까요? 함수 컴포넌트 내부에 상태나 lifeCycle 관련 로직 코드를 작성하지 않아도 되므로 클래스 컴포넌트보다 간결하게 코드를 작성할 수 있기 때문입니다. 또한 React는 합성 모델을 가지고 있어서 상속 대신 합성을 이용해 컴포넌트를 재사용하는 것이 좋습니다. 하지만 클래스 컴포넌트는 상속으로 구현해야 하며 상속은 컴포넌트의 재사용성에 효율적이지 못하기 때문에 보통 컴포넌트의 유연함을 제공하기 위해 함수형 컴포넌트를 사용합니다.
https://ko.reactjs.org/docs/composition-vs-inheritance.html#so-what-about-inheritance
• 함수형 컴포넌트의 장점에 대해 설명해주세요.
함수 컴포넌트는 클래스형 컴포넌트에 필수로 작성해야 하는 Component 상속, 생성자 함수, render 메서드를 작성하지 않기 때문에 선언이 간편합니다.
또한 클래스 컴포넌트의 여러 lifecycle 메서드를 useEffect hook 하나로 처리할 수 있다는 장점이 있습니다.
지연
• 엘리먼트와 컴포넌트의 차이에 대해 설명해주세요.
• 엘리먼트 : 리액트에서 가장 작은 단위로 화면에 표시할 내용을 말하며, 컴포넌트의 구성 요소이다. 브라우저의 DOM 엘리먼트와 달리, 리액트 엘리먼트는 일반 객체이며, 쉽게 생성할 수 있습니다.
• 컴포넌트 : UI를 재사용 가능한 개별적인 여러 조각으로 나눈 것, 자바스크립트의 함수와 유사한데, props라는 임의의 입력을 받은 후 화면에 어떻게 표시되는 지 기술하는 리액트 엘리먼트를 반환한다.
• 꼬리 질문 1 : props 가 무엇인가요?
• 컴포넌트의 속성을 설정할 때 사용하는 요소, 해당 컴포넌트의 부모 컴포넌트에서 설정
 
• 리액트에서 컴포넌트를 어떻게 생성하나요?
• 함수 컴포넌트 : props 객체 인자를 받아, 리액트 엘리먼트를 반환하는 함수를 통해 생성
• 클래스 컴포넌트 : 자바스크립트의 클래스 문법을 이용하고, 생성자 함수를 이용해 초기 상태를 지정한다. reder 함수가 반드시 필요하며, JSX를 반환하도록 생성
• 꼬리 질문 1 : 함수 컴포넌트와 클래스 컴포넌트의 차이점은?
• 함수 컴포넌트는 state와 라이프 사이클 api의 사용이 불가능하다.
• 리액트 버전 16.8 업데이트 이후 hooks 기능을 통해 비슷한 작업 가능.
• 함수 컴포넌트는 render 함수가 필요 없어, 컴포넌트 마운트 속도가 빠르고 가독성이 좋다.
• 꼬리 질문 2 : 함수 컴포넌트의 장점은 무엇인가?
• 선언하기에 편리
• 클래스형 컴포넌트보다 메모리 자원을 덜 사용
• 꼬리 질문 3 : 함수 컴포넌트의 단점은 무엇인가?
• state, 라이프 사이클 api의 사용이 불가능
• 꼬리 질문 4 : 라이프 사이클 api 가 무엇인가?
• 컴포넌트가 DOM 위에 생성되기 전, 후 또는 데이터가 변경되어 상태를 업데이트 하기 전, 후로 실행되는 메소드들
• 꼬리 질문 5 : 함수 컴포넌트와 클래스 컴포넌트의 성능 차이가 많이 나는가?
• 성능과 파일 크기 면에서는 사실상 별 차이가 없다.
• 클래스형 컴포넌트를 사용해보셨나요?
• 처음 리액트를 공부할 때 사용해봤다. 클래스형 컴포넌트의 경우에는 함수혐 컴포넌트보다 가독성이 떨어진다. 또한, props는 불변의 값이지만, this는 변경이 가능하기 때문에 요청 이후 클래스 컴포넌트가 다시 렌더링 될 때 this 또한 바뀌게 되기 때문에 이 부분의 핸들링을 위한 코드를 추가적으로 작성해야 한다.
• 꼬리 질문 1 : 클래스 컴포넌트를 사용하면서 느꼈던 단점은?
• 단점 : 가독성이 떨어지며, this의 가변성을 처리하기 위한 추가적인 코드가 필요해 코드가 길어진다.
 
• 클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해 설명해주세요.
• 함수 컴포넌트는 state와 라이프 사이클 api의 사용이 불가능하다.
• 리액트 버전 16.8 업데이트 이후 hooks 기능을 통해 비슷한 작업 가능.
 
• 함수형컴포넌트는 클래스형 컴포넌트보다 메모리 자원을 덜 사용
• 꼬리 질문 1 : 라이프 사이클 api 가 무엇인가?
• 컴포넌트가 DOM 위에 생성되기 전, 후 또는 데이터가 변경되어 상태를 업데이트 하기 전, 후로 실행되는 메소드들
• 꼬리 질문 5 : 함수 컴포넌트와 클래스 컴포넌트의 성능 차이가 많이 나는가?
• 성능과 파일 크기 면에서는 사실상 별 차이가 없다.
 
• 함수형 컴포넌트의 장점에 대해 설명해주세요.
• 선언하기에 편리
• 클래스형 컴포넌트보다 메모리 자원을 덜 사용

• ⭐ 라이프사이클 메소드에 대해 설명해주세요.

• ⭐ 라이프사이클에 대해 설명해주세요.

• ⭐ React Hooks에 대해 설명해주세요.

• ⭐ 함수형 컴포넌트에서 클래스형 컴포넌트의 라이프 사이클 메소드를 비슷하게 사용하는 방법에 대해 설명해주세요. (useEffect => ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount)

• useEffect와 useLayoutEffect의 차이점에 대해 설명해주세요.

• 답
동우
⭐ 라이프사이클 메소드에 대해 설명해주세요.
• 컴포넌트가 브라우저상에 나타나고 (mount), 업데이트(update)되고, 사라지게 (Unmount)될 때 호출되는 메소드들을 말한다. 클래스형 컴포넌트서만 사용된다.
• 접두사 did와 will로 특정 시점을 나타내서 해당시점에 어떤 동작을 하고 싶을 때
• mount 메서드에는 constructor, getDerivedStateFromProps(props를 staet에 넣어줄 때,), render, componentDidMount가 있다.
• componentDidMount는 첫 렌더링 이후에 호출되는 메서드로 해당 시점에 어떤 동작을 하고싶을 때, 해당 메서드를 사용해서
• componentDidUpdate 는 리렌더링 되었을 때 어떤 동작을 하고싶으면 해당 메서드 안에 그 동작을 명시하면 된다.
• componentWillUnmount는 컴포넌트가 사라지기 직전에 어떤 동작을 하고싶으면 해당 메서드에 동작을 명시하고 실행시킵니다.
• 타이머, 네트워크
⭐ 라이프사이클에 대해 설명해주세요.
• 리액트 컴포넌트에는 생명주기라는 게 있는데, 이것을 라이프 사이클이라고 합니다. 라이프사이클은 컴포넌트가 실행되거나, 업데이트되거나, 제거될 때 특정한 이벤트들이 발생하는데요. 해당 이벤트로 특정 시점에 컴포넌트에서 원하는 동작을 하게 할 수 있다.
• 써보셨나요? 좋은점은?
⭐ React Hooks에 대해 설명해주세요.
• Class형 컴포넌트에서 this와 같은 수많은 단점들을 극복하기 위해, 함수형 컴포넌트로 Class없이 React 의 기능들을 사용할 수 있게 하는 방법을 제시했다.
• 다른 단점들 Class 컴포넌트 를 사용해 상태를 사용하게 되면 상태 추적이어렵다.
⭐ 함수형 컴포넌트에서 클래스형 컴포넌트의 라이프 사이클 메소드를 비슷하게 사용하는 방법에 대해 설명해주세요. (useEffect => ComponentDidMount, ### ComponentDidUpdate, ComponentWillUnmount)
• useEffect 는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook 입니다. 클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate 를 합친 형태로 보아도 무방합니다
• ComponentDidMount를 사용하려면, useEffect의 두번째 파라미터로 비어있는 배열을 넣으면 같은 동작을 합니다.
• ComponentDidUpdate를 사용하려면, useEffect의 두번째 파라미터에 관찰하고 싶은 요소를 넣고, 코드를 작성하면 같은 동작을 할 수 있다.
• ComponentWillUnmount를 사용하려면, useEffect에 return문을 넣어서
useEffect와 useLayoutEffect의 차이점에 대해 설명해주세요.
두 코드의 가장 큰 차이점은 실행 시점입니다. - useEffect는 컴포넌트들이 render와 paint 된 후 비동기적(asynchronous) 으로 실행됩니다. paint 된 후 실행되기 때문에, useEffect 내부에 dom에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게됩니다. - useLayoutEffect는 컴포넌트들이 render 된 후 실행되며, 그 이후에 paint 가 됩니다. 이 작업은 동기적(synchronous)으로 실행됩니다. paint 가 되기 전에 실행되기 때문에 dom을 조작하는 코드가 존재하더라도 사용자는 깜빡임을 경험하지 않습니다.
은지
• 라이프사이클 메소드에 대해 설명해주세요.
1. componentDidMount() : 컴포넌트가 마운트 직후에 호출된다. 즉, 컴포넌트가 평가되고 DOM에 랜더링 될 때 호출된다. DOM 노드가 있어야 하는 초기화 작업은 이 메서드에서 이루어지면 됩니다.
2. componentDidUpdate() : 컴포넌트가 갱신된 직후에 호출되며 최초 렌더링에는 호출되지 않습니다. 즉, 상태가 변경되어 컴포넌트가 재평가, 재랜더링되면 호출된다. 이전과 현재의 props을 비교해 네트워크 요청을 보내는 작업은 이 메서드에 작성한다.
3. componentWillUnmount() : 컴포넌트가 마운트 해제되어 제거되기 직전에 호출됩니다. 즉, 컴포넌트가 DOM에서 삭제되기 직전에 호출된다. 이 메서드 내에 타이머 제거, 네트워크 요청 취소, componentDidUpdate에서 설정한 구독 해제 작업을 작성한다.
💡
만약 타이머(setTimeout, setInterval)를 설정하거나 네트워크 요청을 보내는 코드를 작성해야 한다면 어떤 메서드에 작성하는 것이 좋을까요? componentDidMount() 메서드는 컴포넌트 출력물이 DOM에 렌더링 된 후에 실행됩니다. 이 장소가 타이머를 설정하기에 좋은 장소입니다. 또한 반드시 componentWillUnmount()에서 구독 해제 작업을 수행해야 한다. https://ko.reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class
• 라이프사이클에 대해 설명해주세요.
각 컴포넌트들은 생명 주기를 가집니다. 라이프사이클은 컴포넌트가 DOM에 추가되거나 업데이트 되거나 제거되는 과정을 말합니다. 라이프 사이클 메서드를 통해 각 과정에서 컴포넌트에게 일을 정의할 수 있습니다. 클래스형 컴포넌트에서는 라이프 사이클 메서드를 통해 컴포넌트를 조작할 수 있으며 함수형 컴포넌트에서는 따로 라이프 사이클 메서드가 없기 때문에 useEffect 훅을 이용해 구현할 수 있습니다.
• React Hooks에 대해 설명해주세요.
https://ko.reactjs.org/docs/hooks-intro.html#motivation
hook은 이전의 클래스형 컴포넌트의 문제를 해결하기 위해 등장했으며 react 버전 16.8부터 React에 새롭게 추가된 기능입니다. 함수형 컴포넌트에서 useState 훅을 이용해 상태를 구현하고 useEffect 훅을 이용해 라이프사이클을 구현할 수 있게 되었고 이전의 클래스형 컴포넌트보다 가독성이 향상되는 이점이 있습니다.
💡
React가 Hook을 도입한 이유에 대해 설명해주세요. 1. 기존에 클래스 컴포넌트를 이용해 상태 로직을 재사용하기 어려웠습니다. 그래서 render props나 고차 컴포넌트 패턴을 통해 상태 로직을 재사용해왔지만 이는 코드의 추적이 힘들다는 단점이 있었습니다. 이를 해결하고자 hook을 도입하게 되었고 hook을 통해 컴포넌트 간의 상태 관련 로직을 재사용할 수 있게 되었습니다. 2. 클래스 컴포넌트를 사용하기 위해서는 this를 사용해야 하는데, 하지만 this는 변할 수 있고, 런타임 시점에 결정되기 때문에 코드의 재사용성에 좋지 못했습니다. 이러한 문제를 해결하기 위해 hook은 class 없이 react를 사용할 수 있도록 합니다.
• 함수형 컴포넌트에서 클래스형 컴포넌트의 라이프 사이클 메소드를 비슷하게 사용하는 방법에 대해 설명해주세요. (useEffect => ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount)
클래스 컴포넌트는 라이프사이클이 컴포넌트에 중심이 맞춰져 있었습니다. 반면에 함수 컴포넌트에서는 특정 데이터에 대해서 라이프사이클이 진행됩니다. 만약 데이터는 여러 개인 경우, 클래스 컴포넌트에서는 각 라이프사이클 메서드를 컴포넌트 당 한 번씩만 사용해야 했다면 useEffect는 데이터의 개수에 따라 여러 번 사용할 수 있습니다.
1. 빈 의존성 배열을 작성 ⇒ componentDidMount()

useEffect(..., []);

2. 의존성 배열에 라이프 사이클에 의존할 데이터를 작성, 이는 컴포넌트가 첫 렌더링될 때 한 번 실행된다. ⇒ componentDidMount(), componentDidUpdate()

useEffect(..., [someValue]);

3. 리턴으로 cleanUp 함수를 작성 ⇒ componentWillUnmount()
• 이는 useEffect의 cleanUp 함수와 같다.
• cleanUp 함수는 effect 함수(useEffect 함수의 첫 번째 매개변수)가 다시 실행되기 직전에 호출된다.
• 항상 DOM으로부터 삭제되기 전에 다시 호출된다.

useEffect(() => { return () => {...} }, [])
• useEffect와 useLayoutEffect의 차이점에 대해 설명해주세요.
가장 큰 차이점은 실행 시점이다.
• useEffect: 컴포넌트들이 render와 paint된 후에 실행되며 비동기적으로 실행됩니다. paint 이후에 실행되므로 DOM을 조작하는 로직이 포함되었더라면 유저는 화면의 깜빡임을 경험하게 됩니다.
• useLayoutEffect: 컴포넌트들이 render된 후에 실행되며 그 이후에 paint가 실행된다. 이는 동기적으로 실행됩니다. 즉, paint 이전에 실행되기 때문에 DOM을 조작하는 로직이 포함되었더라도 유저는 화면의 깜빡임을 경험하지 않습니다. 만약 함수 로직이 복잡한 경우, 로딩 시간이 너무 느려져서 사용자에게 좋지 않은 웹 경험을 제공할 수 있습니다.
지연
• ⭐ 라이프사이클 메소드에 대해 설명해주세요.
• 컴포넌트 상태에 변화가 있을 때마다 실행하는 메소드
• 컴포넌트를 처음 렌더링할 때나 컴포넌트를 업데이트 하기 전 후, 불필요한 업데이트를 방지해야 할 때 사용하는 메서드
• 서드파티 라이브러리를 사용하거나 DOM을 직접 건드려야 하는 상황에서 유용
• 꼬리 질문 1 : 서드 파티 라이브러리는 무엇인가요?
⇒ 편하고 효율적인 개발을 위해 사용하는 플러그인, 라이브러리, 프레임워크 등을 말한다.
• 꼬리 질문 2 : 라이프 사이클 메소드의 종류에 대해 간단히 설명해주세요.
⇒ 총 9가지 존재, will 접두사가 붙은 작업 작동 전 실행되는 메소드와 did 접두사가 붙은 어떤 작업을 작동한 후 실행되는 메소드로 나뉨
render, constructor, getDerivedStateFromProps, componentDidMount, shouldComponentUpdate, getSnapshotBeforeUpdate, componentDidUpdate, componentWillUnmount, componentDidCatch
 
• ⭐ 라이프사이클에 대해 설명해주세요.
• 모든 리액트 컴포넌트에 존재하는 수명 주기
• 컴포넌트가 페이지에 렌더링되기 전인 준비 과정에서 시작해서 페이지에서 사라질 때 끝남
• 크게 마운트, 업데이트, 언마운트 카테고리로 나뉨
• 마운트 : DOM이 생성되고 웹 브라우저 상에 나타나는 것
• 업데이트 : 컴포넌트의 업데이트 (props, state, 부모 컴포넌트 리렌더링, 강제 렌더링 트리거)
• 언마운트 : 컴포넌트를 DOM에서 제거하는 것
 
• ⭐ React Hooks에 대해 설명해주세요.
• 리액트 버전 16.8 이후에 새로 도입된 기능
• 함수 컴포넌트에서 react state와 생명 주기 기능을 연동할 수 있게 해주는 함수
• class 안에서는 동작하지 않지만, 대신 class 없이 react를 사용할 수 있게 해줌
• 꼬리 질문 1 : useState, useEffect에 대해 설명해주세요.
⇒ useState: 가장 기본적인 훅으로, 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줌
useEffect: 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있음
 
• ⭐ 함수형 컴포넌트에서 클래스형 컴포넌트의 라이프 사이클 메소드를 비슷하게 사용하는 방법에 대해 설명해주세요. (useEffect => ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount)
• 라이프 사이클 메소드는 컴포넌트가 생성되고, 제거될 때까지의 라이프 사이클 과정을 세세하게 나누어 컨트롤 할 수 있다.
• useEffect : componentDidMount, componentDidUpdate, componentWillUnmount 세 가지의 역할을 수행할 수 있는데, 첫 번째 파라미터에 실행할 함수, 두 번째 파라미터의 값에 따라 변화한다. 빈 배열로 존재하는 경우(컴포넌트 초기 렌더링 시에만 실행), 값을 채우는 경우(업데이트), 리턴 값을 작성하는 경우(언마운트) 로 사용할 수 있다.
 
 
• useEffect와 useLayoutEffect의 차이점에 대해 설명해주세요.
• useEffect : 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 훅
레이아웃 배치와 그리기를 완료한 후 이펙트 함수를 호출해, 상태값이 이펙트에 의존할 경우 약간 불편한 사용자 경험으로 이어질 수 있음
특히, 화면이 복잡해지면 체감할 수 있을 정도로 렌더링 시간이 증가
• useLayoutEffect : 브라우저가 화면에 DOM을 그리기 전에 이펙트를 수행
따라서, 렌더링할 상태가 이펙트 내에서 초기화되어야 할 경우, 사용자 경험을 위해 useLayoutEffect를 사용해야 한다.
• 꼬리 질문 1 : useLayoutEffect의 단점은 무엇인가요?
⇒ 이펙트 내부 로직이 복잡한 경우에는 사용자가 레이아웃을 보는 데까지 시간이 오래 걸릴 수 있다는 단점이 존재한다.
• 꼬리 질문 2 : 언제 useLayoutEffect를 사용해야 하나요?
⇒ 일반적인 경우에는 useEffect를 사용하되, state가 조건에 따라 첫 페인팅 시 다르게 렌더링되어야 할 때 useLayoutEffect를 사용해야 한다.
 

• Pure Component에 대해 설명해주세요.

• shouldComponentUpdate에 대해 설명해주세요.

• State에 대해 설명해주세요.

• React에서 State를 어떻게 관리하나요?

• Props에 대해 설명해주세요.
• ⭐ Props Drilling에 대해 설명해주세요.
• ⭐ Props Drilling을 어떻게 해결할 수 있나요?

- 렌더링 될 컴포넌트를 **불필요하게 여러 컴포넌트로** 나누지 않는다.
- **defaultProps**를 필수 컴포넌트에 사용하지 않는다.
- 가능한 **관련성이 높은 곳에 state**를 위치 시킨다.
- **상태관리 도구**를 사용한다.

• 데이터를 자식에서 부모로도 전달할 수 있나요?

• Props와 State의 차이에 대해 설명해주세요.

• 왜 state를 직접 바꾸지 않고 setState (useState)를 사용해야 하나요?

• React 에서 상태 변화가 생겼을 때, 변화를 어떻게 알아채는지에 대해 설명해주세요.

• React에서 State의 불변성은 어떻게 유지할 수 있나요?

• setState는 동기적으로 동작하나요? 아니면 비동기적으로 동작하나요?
• 왜 비동기적으로 동작하나요?

• HTML과 React의 이벤트 처리 차이점에 대해 설명해주세요. ⇒ 좋지 않은 질문

• ⭐ Key Props를 사용하는 이유에 대해 설명해주세요.

• Ref의 용도에 대해 설명해주세요.

• 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요.

동우

setState는 동기적으로 동작하나요? 아니면 비동기적으로 동작하나요?

• 비동기적으로 작동합니다.

왜 비동기적으로 동작하나요?

• 리액트에서는 state는 값이 변경되면 리렌더링이 발생하는데요.

• 변경이 하나라면 리렌더링이 한번만 발생하지만 수십 개, 수백 개의 값이 계속 변경된다면 리액트는 매번 렌더링만 하다가 생을 마감하고 말 것입니다. 속도는 말할 것도 없구요.

HTML과 React의 이벤트 처리 차이점에 대해 설명해주세요.

• 합성 이벤트를 염두에 두고한 게 아닐까 리액트의 이벤트는 순수 html 이벤트가 아니에요 SyntheticEvent이라는 걸로 브라우저 이벤트가 래핑되어 있거든요 그래서 리액트 이벤트에 nativeEvent 속성에 따로 html 이벤트가 들어간다.

⭐ Key Props를 사용하는 이유에 대해 설명해주세요.

• 리액트에서 요소의 변경 여부를 확인할 때, 비교 알고리즘을 쓰는데, 리스트의 경우 key Prop을 사용하지 않으면 어떤 아이템이 바뀌었는지 정확히 확인할 수 없기 때문에, 전체 리스트를 전부 리렌더링 할 수도 있다. 그러므로 고유한 문자열인 key prop을 넣어주어 해당 list의 요소들을 비교할 때 바뀐 부분만 리렌더링 할 수 있다.

Ref의 용도에 대해 설명해주세요.

• 일반적으로 자식을 수정하려면 새로운 props를 전달하여, 자식 컴포넌트를 리렌더링 시키지만, 예외적으로 벗어나 직접적으로 자식을 수정해야 하는 경우에 사용한다.

• 수정할 자식은 React 컴포넌트의 인스턴스 일수도 있고, DOM의 엘리먼트일수도 있는데,React는 두가지를 위한 해결책을 모두 제공한다.

• ref는 일반 객체 인데,createRef로 생성한 ref 객체를 React Element에 props로 전달하면, 함수가 반환한 current 객체의 current 프로퍼티로 해당 React Element 의 DOM 요소에 직접적으로 접근이 가능하다.

• 사용되는 곳의 예제
• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
• 애니메이션을 직접적으로 실행시킬 때.
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. => 비제어 컴포넌트를 제어할 때 (리액트의 재조정과 같은 것들을 활용하지 않는 요소들 )

• 추가질문
• current 를 사용하는 이유는? 우리가 ref의 접근할 수 있는 시점은 React node가 DOM에 다 그려지고 난 이후인데, 그 이전엔 null 이 담긴다. React에서 ref.current 프로퍼티에 값을 할당하는 시점은 mount 된 이후입니다. 이렇게 값이 유동적이기 때문에, React에서 관리해주는 ref.current 프로퍼티를 사용하여 DOM요소를 받아야 합니다.
• 그냥 DOM API를 사용하면 안되나? => ref로 특정 DOM요소를 받는게 더 신뢰할만하다. DOM API도 쓸 수 있지만, 대개 라이프 사이클의 흐름을 예측하지 못하여 DOM 요소를 가져오지 못할 수도 있다. 그러므로 ref를 쓰자.
• 함수형 컴포넌트에서 ref는 어떻게 전달 받아서 사용할 수 있는지 ? useRef로 받아서 사용한다.
• createRef를 사용하지 않는 이유는 ? 함수형 컴포넌트는 state가 바뀌면 re-rendering을 진행하는데, createRef는 상태가 바뀔 때마다 계속해서 호출되기에 ref가 가리키는 DOM 요소가 re-render 되는 것과 상관없이 새로운 ref 객체가 계속 만들어지게 됩니다.
• createRef를 사용하면 컴포넌트의 변경점이 없을 때, 새로운 ref 객체가 만들어질 필요가 없는데, 계속 만들어지게 되니 useRef를 사용해서, 함수와 관계없이 state를 유지시킨다.
• 상위 컴포넌트에서 ref값을 받아서 하위 컴포넌트로 전달해주려면 어떻게 해야 할까요 ? => 상위 컴포넌트에서 forwarRef ref값을 넘겨서 하위에서 받아 쓴다. => return React.forwardRef(() => ..)

제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요

• 제어 컴포넌트: 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트 한다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트된다.

• 비제어 컴포넌트: 직접 요소 내부의 값을 가져와서 사용하고 업데이트 한다. 사용자가 직접 트리거 하기 전까지는 리렌더링을 발생시키지도 않고 값을 동기화 시키지도 않는다.

• 추가 질문
• 왜 리렌더링을 발생시키지 않는가?
1. useRef() 는 heap영역에 저장되는 일반적인 자바스크립트 객체이다.
2. 매번 렌더링할 때 동일한 객체를 제공한다. heap에 저장되어 있기 때문에 어플리케이션이 종료되거나 가비지 컬렉팅될 때 까지, 참조할때마다 같은 메모리 값을 가진다고 할 수 있다.
3. 값이 변경되어도 리렌더링이 되지 않는다. 같은 메모리 주소를 갖고있기 때문에 자바스크립트의 === 연산이 항상 true 를 반환한다. 즉 변경사항을 감지할 수 없어서 리렌더링을 하지 않는다는 뜻이다.

React ref 톺아보기

React로 웹프론트엔드 개발을 하다보면 React만으로는 DOM을 조작하기 어려울 때가 있습니다. 가장 흔하게는 어떤 엘리먼트를 focus 해야 할 때 말이죠. React의 ref는 무엇이고, ref를 사용하는 이유에 대해 이야기해보는 시간을 가져보려고 합니다. ref는 reference의 준말입니다. 한국말로는 참고, 참조 정도가 React ref의 의미를 잘 나타냅니다. ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다.

https://tecoble.techcourse.co.kr/post/2021-05-15-react-ref/

React: 제어 컴포넌트와 비제어 컴포넌트의 차이점

제어 컴포넌트에 대한 공식문서의 설명은 아래와 같다. 제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. (중략) 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 "제어 컴포넌트 (controlled component)"라고 합니다.

https://velog.io/@yukyung/React-%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%99%80-%EB%B9%84%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-%ED%86%BA%EC%95%84%EB%B3%B4%EA%B8%B0

• HOC (Higher-Order Components)에 대해 설명해주세요.

• Context API에 대해 설명해주세요.

• React.Fragment에 대해 설명해주세요.

• Portal에 대해 설명해주세요.

• 에러 바운더리에 대해 설명해주세요.

- 컴포넌트를 개발하는 패턴 중 하나로, 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수를 말한다.
- 하나의 로직을 다양한 컴포넌트에 적용시켜야 할 때 유용하게 사용할 수 있다.
- 대표적인 예로 redux에서의 connect가 있다.
- 대개 클래스형 컴포넌트에서 생명주기 메서드를 고려해 재사용 가능한 로직을 만들 때 사용했는데, 함수형 컴포넌트에서는 hooks로 거의 다 대체가 되어서 잘 사용하지 않는다고 한다.

- Props가 아닌 방법으로 컴포넌트 간 데이터를 주고 받을 수 있는 방법 중 하나이다.
- 컴포넌트의 depth가 깊어졌을 때, props drilling 이 진행되는 데에서 props를 추적하기 힘들어지거나, 관련된 모든 컴포넌트가 리렌더링될 수 있는 단점을 해결하기 위해 주로 사용된다.

- React는 하나의 컴포넌트만을 리턴할 수 있기 떄문에, JSX의 문법에서 return 문 안에는 반드시 최상위 태그가 있어야 한다.
- 이렇게 되면 쓸데 없는 div 태그가 추가되어야 할 수 있는데, 이러한 경우를 피하기 위해 Fragment가 사용된다.
- Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 때에 사용된다.

- 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공한다.
- 즉, 최상위 root 노드가 아닌 다른 돔 노드에 자식을 렌더링 한다는 것이다.
- 외부에 존재하는 DOM 노드가 React App DOM 계층 안에 존재하는 것처럼 연결을 해주는 포탈 기능을 제공
- DOM 트리에서의 위치에 상관없이 portal은 여전히 React 트리에 존재하기 때문에, 이벤트 버블링은 잘 됨

- 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 것.

• 메모이제이션에 대해 설명해주세요.

• ⭐ 리액트에서 메모이제이션을 어떤 방식으로 활용할 수 있나요?
• ⭐ useMemo와 useCallback에 대해 설명해주세요.
• React.memo와 useMemo의 차이에 대해 설명해주세요.

• 리액트 관련 패키지 중에 제일 좋다고 생각한 것은 무엇인가요?

• 리액트의 렌더링 성능 향상을 위해 어떻게 해야 하나요?

• CSS in JS를 사용해 본 적이 있나요? 있다면 소감을 말해주세요.

• React 18 버전 업데이트 내용에 대해 말씀해주세요.

• Client Side Routing에 대해 설명해주세요.

• Next.js 에 대해 설명해주세요.

• React에서 Form 이벤트는 어떻게 제어하셨나요?
• React Hook Form 를 사용해보셨나요?
• 기억나는 Hook에 대해 전부 설명해주세요.

• React에서 컴포넌트 A가 사용하는 CSS파일과 컴포넌트 B가 사용하는 CSS파일의 선택자가 겹치는 이유가 뭘까요?

• ⭐ Redux에 대해 설명해주세요.
• ⭐ Redux를 사용하는 이유에 대해 설명해주세요.
• ⭐ Redux의 장단점에 대해 설명해주세요.
• Flux 패턴에 대해 설명해주세요.
• Context API와 Redux를 비교해주세요.
• Redux의 3대 원칙에 대해 설명해주세요.

• React-Query를 사용해보셨나요?
• React-Query에 대해 설명해주세요.
• React-Query의 등장 배경과 장점에 대해 설명해주세요.

• Recoil을 사용해보셨나요?
• Recoil에 대해 설명해주세요.
• Recoil에서 Loadable의 개념에 대해 설명해주세요.
• Recoil에서 비동기로 데이터를 받아올 때 State를 어떻게 관리하셨나요?
• Recoil에서 로딩, 성공, 에러와 관련된 처리를 어떻게 하셨나요?
• ⭐ Redux와 Recoil에 대해 비교 설명해주세요. (개념, 장단점)

자바스크립트

• 생성자에 대해 설명해주세요.

• ⭐ this에 대해 설명해주세요.
• call, apply, bind에 대해 설명해주세요.

• ⭐ 콜백 함수에 대해 설명해주세요.
• ⭐ 콜백 지옥을 해결하는 방법을 설명해주세요.

---

• ⭐ Promise에 대해 설명해주세요.
• Promise.all() 에 대해 설명해주세요.

• ⭐ Promise와 Callback를 비교 설명해주세요.

• ⭐ Async, Await이 뭔지 그리고 사용 방법을 설명해주세요.

• ⭐ Promise와 Async, Await의 차이를 설명해주세요.

• AJAX에 대해 설명해주세요.

• ⭐ var, let, const 차이를 설명해주세요.
• TDZ에 대해 설명해주세요.

• 함수 선언형과 함수 표현식의 차이에 대해 설명해주세요.

• ⭐ 이벤트 버블링과 캡처링에 대해 설명해주세요.
• ⭐ 이벤트 위임에 대해서 설명해주세요.
• 이벤트 위임의 동작 방식에 대해서 설명해주세요.

• ⭐ 호이스팅과 발생하는 이유에 대해 설명해주세요.

• ⭐스코프 (Scope)에 대해 설명해주세요.
• 스코프 체인에 대해 설명해주세요.

• ⭐ 클로져(Closure)에 대해 설명해주세요.

• ⭐ 실행 컨텍스트에 대해 설명해주세요.
• 렉시컬 환경(Lexical Environment)에 대해 설명해주세요.

• 자바스크립트에서 일어나는 데이터 형변환에 대해 설명해주세요.

• 자바스크립트가 동적 언어인 이유는 무엇인가요?

• 프로토타입에 대해 설명해주세요.

• 깊은 복사와 얕은 복사에 대해 설명해주세요.

• 불변성을 유지하려면 어떻게 해야하나요?

• ES6에서 새로 생긴 기능을 아는대로 말씀해주세요.

• Blocking과 Non-Blocking에 대해 설명해주세요.

• ⭐ 동기와 비동기에 대해 설명해주세요.

• undefined, null, undeclared를 비교해주세요.

• 콜 스택 (Call Stack)과 힙 (Heap)에 대해 설명해주세요.

• ⭐ 자바스크립트를 멀티 쓰레드처럼 사용하는 방법이 뭔가요? / 자바스크립트에서 비동기 로직이 어떻게 동작하는지 설명해주세요. (이벤트 루프)
• 태스크 큐와 마이크로 태스트 큐에는 어떤 함수가 들어가나요?
• requestAnimationFrame에 대해 설명해주세요.

• 비동기적으로 실행되는 것을 동기적으로 코딩하는 방법이 있나요?

• map과 forEach, reduce에 대해 설명해주세요.

• 자바스크립트의 메모리 관리에 대해 아는 대로 설명해주세요

• 클래스에 대해 설명해주세요.

• 즉시 실행 함수 (IIFE)에 대해 설명해주세요.

• 엄격 모드에 대해 설명해주세요.

• Rest 연산자와 Spread 연산자에 대해 설명해주세요.

• 제너레이터에 대해 설명해주세요.

• 이터러블과 이터레이터 프로토콜에 대해 설명해주세요.

지금까지 받았던 신입 프론트엔드 면접 질문들

새로운 회사에서 최종 합격 결과를 받게 되었다. 그동안 면접에서 받았던 질문들을 공유해보려고 한다. 짧게 돌아보자면... 나는 경영정보학과 출신 비전공자이고, 22년 1월 즈음 항해 99 부트캠프를 수료했다. 그리고 약 7 ~ 8개월 정도 혼자서 더 공부했다. 22년 8월에 학교를 최종 졸업하면서 동시에 본격적인 입사 지원을 시작했다.

https://velog.io/@arthur/%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80-%EB%B0%9B%EC%95%98%EB%8D%98-%EC%8B%A0%EC%9E%85-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%A9%B4%EC%A0%91-%EC%A7%88%EB%AC%B8%EB%93%A4