[Front/리액트] 프론트엔드 리액트부문 면접 질문 리스트

🐼 Java와 JavaScript의 차이점이 무엇인가요?

: 둘 다 프로그래밍 언어이지만, Java는 객체지향 프로그래밍 언어이고, JavaScript는 객체지향 스크립팅 언어이다. 따라서 Java는 가상 시스템 또는 브라우저에서 응용 프로그램을 작성하는 반면, javaScript 코드는 주로 클라이언트측 웹 개발에 사용된다.

 

🐼 call by value와 call by reference의 차이점이 무엇인가요?

: call by value는 값에 의한 호출로 인자로 받은 값을 복사하여 처리한다. 원래의 값이 보존되며, 복사하기 때문에 메모리 사용량이 늘어난다. call by reference는 참조에 의한 호출로 인자로 받은 값의 주소를 참조하여 직접 값에 영향을 준다. 복사하지 않고 직접 참조하기에 빠르며, 원래 값에 영향을 받는다.

 

🐼 객체지향 프로그래밍(OOP) 이란?

: 프로그램 구현에 필요한 객체를 파악하고 각각의 객체들의 역할이 무엇인지 정의하여 객체들간의 상호작용을 통해 프로그램을 만드는 것을 말한다.

 

🐼 DOM (Document Object Model)이란?

: HTML, XML 등의 문서를 구조화된 객체 모델로 표현하는 방법입니다. 웹 페이지의 내용, 구조 및 스타일을 프로그래밍적으로 조작하기 위해 사용한다. DOM 웹 페이지의 계층적인 구조를 나타내며, 각 요소를 노드로 표현하며, 이 노드들은 트리 구조로 연결되어 있다.

 

🐼 virtual DOM과 DOM의 차이점이 무엇인가요?

: DOM은 HTML, XML 등의 문서를 구조화된 객체 모델로 표현한 방법으로 웹 페이지를 구성하기 위해 실체화된 형태이고, virtual DOM은 실제 DOM을 모방해 메모리상에서만 존재하는 가상 DOM을 의미한다. 라이브러리와 프레임워크에서 개발자는 코드를 수정하여 데이터가 변경되면, 가상돔을 거쳐 우선 렌더링되고, 이전 가상돔과 내용을 비교하여 바뀐 부분만 실제 DOM에 적용시킨다.

 

🐼 SPA(싱글페이지 어플리케이션)에 대해 설명해보세요.

: 단일 페이지로 구성되며, 페이지 갱신을 위해 전체 페이지를 다시 로드하는 대신 동적으로 콘테네츠를 업데이트한다. 즉, 초기에 필요한 모든 리소스(HTML, XML, CSS)를 로드한 후, 사용자와의 상호 작용에 따라 필요한 데이터만 비동기적으로 로드하여 페이지를 업데이트한다.

 

🐼 useRef가 무엇인가요?

: 저장공간 또는 DOM 요소에 접근하기 위해 사용되는 React Hook이다. 함수형 컴포넌트에서 변경가능한 값을 저장하고 관리하는데 사용하며, 컴포넌트 생명주기에 관계없이 변수를 유지하고자 할 때 유용하게 사용된다.

 

🐼 useEffect의 실행 순서를 설명해주세요.

1. 컴포넌트 렌더링 출력 (return의 UI부문)
2. 컴포넌트 내 useEffect 훅 호출
3. useEffect에 전달된 첫 번째 인수인 콜백 함수 실행
4. 콜백 함수의 내부 코드 실행
5. 컴포넌트 화면이 완전히 렌더링 후, useEffect에 전달된 두 번째 인수인 의존배열 확인

 

🐼 var, let, const에 대해 설명해주세요.

• var
  • 함수 스코프 : 해당 변수는 함수 내에서만 유효하다
  • 재할당이 가능하므로 값을 변경할 수 있다
  • 호이스팅 가능 : 호이스팅은 선언 전에도 참조할 수 있으며, 그때에는 에러가 발생하지 않고, undefined로 값이 할당 된다

• let
  • 블록 스코프 : 해당 변수는 블록 내에서 유효하여 if문, for문 등이 해당된다
  • 재할당이 가능하므로 값을 변경할 수 있다
  • 호이스팅 불가능 : 선언 전에 선언하면 ReferenceError가 발생한다
• const
  • 블록 스코프 : let과 마찬가지로 블록 범위 내에서 사용한다
  • 재할당이 불가능하여 상수로 사용된다. 재할당 시도시 TypeError가 발생한다
  • 호이스팅 불가능 : 선언전에 사용하면 마찬가지로 ReferenceError가 발생한다

 

🐼 Async/Await와 Promise의 차이점이 무엇인가요?

• 둘다 비동기 처리를 위한 문법인데, Promise는 '내용은 실행되었지만 결과를 아직 반환하지 않은 객체'라고 이해하며, Async/Await는 이 다음에 나온 비동기 처리 문법으로 Promise의 단점을 해소하고자 만들었다.
• Promise 활용시에는 .catch() 문을 통해 에러 핸들링이 가능하지만, async/await은 에러 핸들링 할 수 있는 기능이 없어 try-catch()문을 사용해야 한다. 
• 코드가 길어질수록 Promise의 .then() 지옥의 가능성이 빠질 수 있고, async/await를 활용하게 되면, 비교적 코드가 클린하며, 짧고 가독성이 좋기 때문에 코드 흐름을 이해하기가 쉽다.

 

🐼 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은?

: 우선 최근 글을 보여지는데에는 유리한 점이 있지만 가령 비교적 뒤쪽에 위치한 데이터를 보기 위해서는 페이지 로딩을 많이 해야하는 번거로움이 생기기 때문에 적절한 경우에 구현해야 한다. 또한 서버쪽과 주고받는 데이터 용량을 잘 설정하여 로딩시간을 길지 않도록 설계해야 한다. 로딩시간이 길어지면 사용자 경험 만족도가 떨어지며, 기다리는동안 로딩 상태바같은 UI를 구현하도록 한다.

 

🐼 CloudFront를 사용해본적이 있나요? 사용해봤다면, CloudFront로 배포하는 이유를 설명해주세요.

: AWS의 전세계적으로 분산된 콘텐츠 전송 네트워크(CDN) 서비스로서,정적 및 동적 콘텐츠를 고속으로 전달하며, 트래픽 부하를 분산하는 역할을 한다. 전 세계에 분산된 엣지 위치를 가지고 있기 때문에 사용자에게 가장 가까운 위치에서 콘텐츠를 제공함으로써 콘텐츠 제공에 있어 지연 시간을 최소화하고 빠른 응답이 가능하다.

• 가용성과 확장성 : AWS의 글로벌 인프라와 통합되어 있어 높은 확장성과 가용성을 제공한다
• 보안성 : HTTPS를 통해 암호화된 연결을 지원하며 AWS의 다양한 보안 서비스가 통합되어있어 DDoS공격에도 유용하다
• 비용 효율성 : 사용한만큼만 비용을 지불하는 Pay-as-you-go모덱을 채택하고 있어, CDN을 통해 데이터 전송 비용을 절감할 수 있으며, 캐싱 및 압축 기능을 통해 대역폭 사용량을 최소화할 수 있다

 

🐼 useEffect와 useLayoutEffect 차이에 대해 설명해주세요

: useEffect는 비동기적으로 동작하며, 컴포넌트 렌더링이 끝나고나서 특정 행동을 수행한다. 반면에 useLayoutEffect는 동기적으로 동작하며, 렌더링 전에 특정 행동을 수행한다.

 

🐼 Closure란?

:프로그래밍 언어에서 함수와 그 함수가 선언된 렉시컬(Lexical)환경의 조합이다. 클로저는 함수가 선언될 당시의 환경을 기억하고, 함수가 이 환경에 접근할 수 있는 능력을 갖게 한다.

쉽게 말하면, 외부 함수에 접근할 수 있는 내부 함수 혹은 그에 관한 개념이다. 스코프에 따라서 내부 함수 -> 외부 함수 범위의 변수에 접근이 가능하지만 반대의 경우는 불가능하다.

 

🐼 Javascript 호이스팅에 대해 설명해주세요.

: 변수 및 함수 선언이 스코프의 맨 위로 끌어올려지는 동작을 의미한다. 이로인해 선언하기 전에 사용할 수 있는 것처럼 보이지만 변수나 함수의 할당은 원래 위치에서 이루어진다. 함수 선언문은 호이스팅과 유사하게 기능동작을 하지만 함수 표현식은 호이스팅이 불가능하다.

 

🐼 프로세스 생성 과정에 대해 설명해보세요

1. 프로세스 디스크립터 생성 : 프로세스를 나타내는 정보를 저장하기 위해 운영 체제는 디스크립터를 생성하여 프로세스의 식별자, 상태 등의 정보를 포함한다.
2. 주소 공간 할당 : 운영 체제는 새로운 프로세스를 위한 독립적인 주소 공간을 할당한다.
3. 초기화 : 프로세스의 초기 상태를 설정하기 위해 운영 체제는 프로세스의 메모리와 레지스터를 초기화한다.
4. 프로세스 실행 : 프로세스가 실행 가능한 상태로 전환되며, 운영 체제는 프로세스 스케쥴링 알고리즘을 사용하여 실행할 프로세스를 선택하고 CPU를 할당한다.
5. 종료 및 자원 회수 : 프로세스가 작업을 완료하거나 예외 또는 오류가 발생하면 프로세스는 종료된다.

🐰 HTTPS란

: Hyper Text Transfer Protocol Secure의 약자로, 인터넷을 통해 정보를 안전하게 전송하기 위한 프로토콜이다. HTTP와 달리 데이터의 암호화와 보안 인증을 제공하여 통신 과정에서 안정성과 기밀성을 보장한다. HTTP에 비해 속도는 느리지만 체감은 어렵다.

 

🐰 TCP란 무엇인가

: Transmission Control Protocol의 약자로, 네트워크 통신에서 사용되는 프로토콜이며, 전송을 제어하는 규약이다. IP 위에서 동작하며 데이터의 전달을 보증하고 보낸 순서대로 받게 해주는 연결 지향적인 특징을 가지고 있으며, 인터넷상에서 데이터를 메세지  형태로 보내기 위해 IP와 함께 사용된다. 데이터의 신뢰성과 정확성을 중요시하는 상황에서 주로 사용된다. 예를 들어, 웹 서버 간의 통신, 이메일 전송, 파일 전송 등 다양한 네트워크 애플리케이션에서 사용된다.

 

🐰 TCP와 UDP의 차이점

: UDP는 User Datagram Protocol의 약자로, 전송 계층의 비연결 지향적 프로토콜을 뜻한다. 데이터를 주고받을 때 연결 절차를 거치지 않고, 발신자가 일방적으로 데이터를 발송하는 방식을 의미한다.

• TCP는 연결형 서비스, UDP는 비연결형 서비스
• TCP는 패킷 교환 방식이 가상 회선 방식이며, UDP는 데이터그램 방식
• TCP는 전송 순서를 소장하지만, UDP는 전송 순서 변경 가능
• TCP는 수신자가 수신 여부를 확인 가능, UDP는 수신 여부 비확인
• TCP는 통신 방식이 1:1이지만, UDP는 N:N
• 속도는 TCP가 UDP보다 비교적 느리다

 

🐰 브라우저에서 주소창에 url 입력시 어떤일이 일어나는가

1. 웹 브라우저에 URL 입력
2. 웹 브라우저가 도메인명으로 IP 주소 조회
3. 웹 브라우저가 서버와의 TCP연결을 시작
4. 웹 브라우저가 서버로 HTTP 요청 전송
5. 웹 서버가 요청을 처리한 후 웹 브라우저에 응답 전송
6. 사용자에게 웹 브라우저 보여주기

 

 

🐰 JavaScript Event Loop

: 자바스크립트는 싱글스레드 언어이다. 싱글스레드의 특징은 여러 개의 작업이 있더라도 한 번에 하나의 작업만 수행할 수 있다. 자바스크립트의 메인스레드가 이벤트 루프이며, 이벤트 루프는 곧 싱글스레드이다. 이벤트 루프는 Call stack과 callback Queue의 상태를 계속 감시하며 비동기 작업을 관리하고, 자바스크립트 코드 실행을 동기적으로 처리하면서도 비동기적인 이벤트 작업을 관리하는 역할을 한다.

• Call stack(호출 스택) : 코드의 실행 순서와 관련된 정보를 저장하는 스택
• Event Queue(이벤트 큐) : 비동기적인 작업이 완료되었을 때 실행될 콜백 함수들이 저장되는 대기열

 

 

🐰 RESTFul API란

: Representational State Transfer의 약자로, 웹 서비스의 아키텍처 스타일 중 하나이다. HTTP 프로토콜을 기반으로 하며, 리소스를 고유한 URI로 식별하고 HTTP 메소드를 사용하여 리소스를 조작하는 방식이다. 주요 원칙과 특징은

• 자원 중심
• HTTP 메서드 활용
• 클라이언트와 서버 간의 통신 상태 유지하지 않음
• 표현적인 리소스
• 캐싱 가능

 

 

🐥 GET, POST 방식의 차이점

• GET
  • 주로 데이터를 요청하고 조회하는데에 사용되고, 서버의 상태를 변경하지 않는다
  • 데이터는 URL의 쿼리 파라미터에 포함되어 전송되고, 데이터의 길이에 제한이 있다
  • GET 요청은 결과를 캐싱할 수 있다
  • URL에 데이터가 노출되므로 보안적으로 민감한 데이터로는 적절하지 않다
• POST
  • 서버로 데이터를 전송할 때 사용되고, 데이터는 요청의 body에 포함되어 전송된다
  • 주로 서버의 상태를 변경하기 위해 사용되고, 데이터를 생성하거나 수정하는 용도로 주로 사용된다
  • URL에 데이터가 노출되지 않으며, 보안적 이유로 더 많은 양의 데이터를 전송가능하다
  • 캐싱되지 않으며, 서버에 데이터를 제출하고 상태를 변경하는 용도이기 대문에 재사용성에도 적합하지 않다

 

 

🐥 Webpack이 무엇이며, 써본 경험이 있는지?

: 웹에서 사용되는 모든 자원을 번들링 해주는 도구이다. 번들링은 여러 개의 파일 중에 종속성이 존재하는 파일을 하나의 파일로 묶어 패키징을 시키는 과정을 의미하며, Webpack을 사용하면 이러한 종속성 뿐만 아니라 자바스크립트 내에 필요한 css나 img같은 파일도 번들링해서 하나의 파일로 합춰주고, 네트워크 요청을 최소화 시킬 수 있다.

 

🐥 동기와 비동기의 차이점

: 동기와 비동기는 프로그래밍 작업의 실행과 제어 흐름에 관련된 방식을 나타낸다.

• 동기는 순차적으로 작업이 실행되며, 이전 작업이 안료되어야 다음 작업이 실행되고, 해당 작업이 끝날 때까지 다른 작업은 일시 중단된다.
• 비동기는 작업을 시작한 후에도 다음 작업을 즉시 실행할 수 있다. 작업이 완료되면 결과를 처리하기 위한 콜백 함수나 이벤트 핸들러를 사용해 결과를 처리한다.

🐥 Array vs LinkedList

• Array : 순차적으로 인덱스를 통해 접근할 수 있는 선형 자료 구조이다. 메모리 상에 연속적으로 배치된 요소들의 집합이며, 고유한 인덱스를 가지고 있다. 또한 배열의 크기는 미리 정해져 있으며, 크기를 조정하기에 어렵다. 요소의 추가, 삭제 시 인덱스의 재배치가 필요하며, 검색은 인덱스를 통해 빠르게 수행 가능하다.
• LinkedList : 요소들이 연결된 Node들의 집합으로 구성되어 있다. 각 노드는 데이터와 다음 노드를 가리키는 포인터로 이루어져 있고, 메모리 상에 불연속적으로 위치해있다. 또한 크기를 동적으로 조정할 수 있으며, 요소의 추가, 삭제가 쉽다. 순차적인 접근이 아닌 임의의 요소에 접근이기 때문에 검색에 시간이 더 소요된다.

 

 

🐥 서버 사이드 렌더링이란?

: 웹 어플리케이션 렌더링 방식 중 하나이다. 클라이언트와 서버 간의 협력적인 렌더링 방식으로, 서버에서 초기에 완전한 HTML을 생성하고 클라이언트에게 전달하는 방식인데, 자바스크리브 파일의 다운로드와 실행이 완료되기 전에 사용자는 기본적인 컨텐츠를 만나볼 수 있다.

 

🐥 MVC 패턴이란 무엇인가?

: model, view, controller로 구성되어 있으며, 이 구성 요소로 분리하여 소프트웨어를 개발하는 아키텍처 디자인 패턴이다. Model에서 어플리케이션의 데이터와 비지니스 로직을 처리하고, View에서 사용자 인터페이스를 표시하며, Controller에서 모델과 뷰 사이의 상호작용을 관리하고, 사용자의 입력을 처리하며, 모델 상태를 업데이트 한다.

 

🐥 아토믹 디자인 패턴에 대해 아는가?

: 컴포넌트 단위로 개발을 진행하는 프레임웤나 라이브러리에서 사용되는 패턴으로 이러한 컴포넌트들을 가장 작은 단위로 설정하고 이를 바탕으로 상위 컴포넌트를 만들어 코드 재사용을 최대화하는 방법론이다. 원자, 분자, 유기체, 템플릿, 페이지로 효과적인 인터페이스 시스템을 만든다. 

 

🐥 웹 스토리지의 차이점

: 서버가 아닌 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML의 기능으로 로컬 스토리지와 세션 스토리지로 나눌 수 있다. Local Storage는 브라우저를 종료해도 데이터를 지우지 않는 한 영구적으로 보관이 가능하고, Session Storage는 브라우저가 종료되면 데이터도 함께 삭제된다.

 

🐻 웹 프로토콜이란

:  Web Protocol은 웹 서비스에서 클라이언트와 서버 간의 통신을 위한 규칙과 약속을 의미한다. 웹의 기본 동작과 데이터 교환 방식을 지원한다. 가장 일반적인 웹 프로토콜은 HTTP이다.

 

🐻 AJAX란 무엇인가

: Asynchronous JavaScript XML의 약자로, 자바스크립트의 라이브러리이며 비동기적으로 서버와 데이터를 교환하기 위한 웹 개발 기술이다. Ajax를 사용하면 웹 페이지의 일부분을 새로 고치지 않고도 데이터를 서버와 주고받을 수 있다.

 

🐻 Promise와 Callback의 차이점은

: 비동기적인 작업을 다룰 때 사용되는 두 가지 패턴이다.

Callback은 비동기 작업의 결과를 처리하기 위해 사용되는 함수이며, 비동기 함수의 인자로 인자로 콜백 함수가 전달되고, 작업이 완료되면 콜백 함수가 호출되고, 에러 처리와 결과 처리를 함께 다룬다.

Promise는 비동기 작업의 결과를 나타내는 객체이다.  성공과 실패를 나타내는 상태를 가지며 콜백지옥을 피하고 가독성을 향상시키는 장점을 가지며, async/await를 함께 사용할 수 있어 비동기 코드 작성에 용이하다.

 

🐻 자바스크립트와 타언어의 차이점

• 자바스크립트는 주로 웹 브라우저에서 클라이언트 측 스크립팅 언어로 사용되지만, 최근에는 서버 측 런타임 환경에서도 자바스크립트가 실행되기도 한다
• C나 Java와 유사한 구조적 문법을 가지고 있지만 몇 가지 차이점으로 세미콜론(;)을 선택적으로 사용하고, 함수를 일급 객체로 다루는 기능을 제공한다
• 다른 언어들도 비동기 작업을 처리할 수 있지만 자바스크립트는 콜백, 프로미스, async/await와 같은 특별한 기능을 내장한다

 

 

🐻 ES6의 호환성 해결방법은?

: ES6는 브라우저와 런타임 환경에 따라 지원이 안되는 경우가 있고, 일부 라이브러리 및 프레임워크 등 다양한 환경적 요인으로 호환이 어려울 수 있기 때문에 여러가지 해결방법을 지원할 수 있다.

• Babel : 트랜스파일링으로서 ES6+ 코드를 이전 버전의 자바스크립트 코드로 변환해주는 도구이다
• Polyfill : 자바스크립트 라이브러리로 ES6 이전 버전의 코드에서도 작동할 수 있도록 해주며, 브라우저에 로드되어 지원되지 않는 기능을 채워준다
• 브라우저의 지원 범위를 확인한다

 

🐻 babel은 컴파일러인가 ? 트랜스파일러인가?

: 바벨은 빌드 단계에서 자바스크립트를 다른 언어로 변환하는 것이 아니라 어플리케이션에서 설정된 환경에 맞게 또는 현재 사용되고 있는 대중적인 브라우저 스펙 또는 호환성에 맞는 하위 버전의 자바스크립트로 변환핝다는 의미에서 트랜스파일러라고 할 수 있다.

• 컴파일러 : 한 언어에서 작성된 코드를 다른 언어로 변환하는 것
• 트랜스파일러 : 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 언어로 변환하는 것

 

🐻 ES6에 추가된 것은 무엇인가?

1. 화살표 함수 : 간결한 문법으로 함수를 선언하며, this 컨텍스트를 자동으로 바인딩
2. class : 프로토타입 기반 상속을 보다 직관적이고 구조화된 방식으로 작성할 수 있는 클래스 문법 추가
3. 모듈 : export, import를 사용해 모듈을 정의하고 불러올 수 있다
4. 템플릿 리터럴 : 백틱(`)으로 둘러싸인 문자열을 사용해 보간 표현식을 쉽게 포함한다
5. 구조 분해 할당 : 객체나 배열의 속성을 추출하여 변수에 할당할 수 있다
6. let과 const : 블록 스코프 변수인 let과 const가 추가되어 var보다 유연하고 안전한 변수 선언이 가능하다

 

🐻 Context API란?

: React에서 상태 관리를 하기 위한 기능을 제공하는 API이다. 리액트에 내장된 기능으로 Props를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유할 수 있게 해준다. 주로 프로젝트에서 전역상태를 관리할 때 많이 사용된다.

 

🐻 react 클래스형과 함수형의 차이

• 클래스형 컴포넌트에서는 화면에 표시하기 위한 render() 메서드가 반드시 필요하고, 함수형 컴포넌트에서는 자체에 렌더 함수가 내포되어 있기 때문에 render() 메서드가 필요하지 않다.
• 클래스형 컴포넌트는 LifeCycle API를 사용하며, 함수형 컴포넌트에서는 Hook을 사용하여 라이프사이클을 관리한다
• 메모리 자원을 함수형 컴포넌트보다 덜 사용한다
• 컴포넌트 코드 사용이 클래스형보다 최신화되어 활용하기 편하다

 

 

🐧 타입스크립트란?

: Microsoft에서 개발한 오픈 소스 프로그래밍 언어이고, 자바스크립트의 상위 집합 언어로 정적 타입을 지원하며 자바스크립트 코드와의 호환성을 가지고 있다. 자바스크립트보다 선호되는 이유는 정적 타입으로서, 모든 변수나 객체의 타입을 지정하고 컴파일을 통해 이로부터 발생하는 버그 예방을 할 수 있다는 점이다.

 

🐧 Angular와 React의 차이점

: 우선적으로 Angular는 프레임워크고, React는 라이브러리이다. 그렇기 때문에 리액트는 자체적으로 필요한 모든 요소들을 제공하지 않고 제대로 활용하기 위해선 추가적인 구성이 필요하다. Angular는 양방향 바인딩의 기능을 갖고 있어 모델이 변경되면 뷰가 함께 변경되는 MVC패턴이고, 이에 반해 React는 가상돔을 활용한 단방향 바인딩을 지향하고 있다.

 

🐧 SEO란?

: 검색 엔진 최적화로 웹 사이트 또는 웹 페이지가 검색 엔진에서 노출되고 검색 결과에서 상위에 노출될 수 있도록 최적화하는 과정 및 전략

 

🐧 이벤트 위임이란?

: 웹 개발에서 사용되는 기법으로, 하위 요소들이 동적으로 생성되는 상황에서 이벤트 핸들링을 효율적으로 관리하기 위해 사용한다. 즉, 하위 요소들이 이벤트를 발생시켰을 때, 이벤트는 상위 요소로 위임되어 상위 요소의 이벤트 핸들러에서 처리된다.

 

🐧 메모이제이션이란?

: 함수의 실행 결과값을 캐싱하고 이후 동일한 인자에 대한 호출 시 다시 계산하지 않고 캐시된 결과를 반환하여 재사용하는 것을 의미한다. React.memo(), useCallback(), useMemo() 메서드들이 있다.

 

🐧 이벤트 버블링이란?

: 하위 요소에서 상위 요소로의 이벤트 전파 방식으로 말그대로 HTML 구조상 자식 요소에 발생한 이벤트가 상위의 부모요소에까지 영향을 미치는 것이다.

 

🐧 부모에서 자식으로 이벤트상속방법

: 이벤트 캡처링이 있다. 이벤트 버블링과 반대 방향으로 이벤트를 전파하는 방식이며, 특정 이벤트 발생 시 최상위 요소에서 이벤트를 전달받은 후, 해당 태그를 찾아 내려가는 방식이다.

 

🐧 이벤트버블링을 막는 방법

: 이벤트 객체의 메서드인 event.stopPropagation()을 사용한다. 이 메서드를 사용하면 요소에 할당된 특정 이벤트를 처리하는 핸들러 모두가 동작하지 않는다. 꼭 필요한 경우를 제외하고는 버블링을 막지 않도록 한다.

 

🐧 이벤트버블링 활용 방법

: 이벤트 위임이 있다. 상위 요소에 이벤트 핸들러를 등록하여 하위 요소들의 이벤트를 처리하는 방식이다.

 

🐧 React, 왜 사용하시나요?