23.11.07 TIL

김진주·2023년 11월 8일
0

엔트리레벨 - 특정 기능의 코드를 작성하는 법
주니어레벨 - 코드 작성 , 테스트, 개발 지원


2008 구글 크롬 브라우저 - v8 자바스크립트 엔진 등장

2009 node.js 등장

2012 제이쿼리가 유행한 배경

SPA 등장 배경 - 좋아요를 구현하고 싶어서 / SPA가 가능하게 된 필요 조건

리액트의 대표적인 특징

가상 돔

리액트는 브라우저가 가진 돔을 직접 조작하지 않음

복사본 업데이트 전후의 가상돔 2개를 비교해서 차이를 알아내서

한번에 업데이트

CSR / SSR

SSR 사이트를 빠르게 표시, SEO

SSR를 보완하는 SSG 사전에정적 파일로 생성/ 배포하는 구조

선언적 UI

단방향 데이터 전달(props)

컴포넌트 지향 / 함수 컴포넌트

플럭스 아키텍처와의 연관성


리액트는 무엇인가요?

리엑트의 컴포넌트와 그 구성요소는 무엇인가요?

props, state, 렌더링, JSX를 설명해주세요.

가상돔은 무엇이고 리액트에서 어떻게 작용하나요?

리액트 컴포넌트의 생애주기를 설명해주세요. 그리고 개발자가 왜 알아야하나요? 알면 무엇을 알 수 있나요?

리액트 컴포넌트의 생명 주기는 컴포넌트가 생성되고 업데이트를 거쳐 소멸되는 과정을 설명한다.

생성 단계에선 마운팅된다고 하는데 construtor가 컴포넌트의 생성자로 초기화 작업을 수행한다. 그 다음 render가 UI를 렌더링하고 componentDidMount는 컴포넌트가 마운트된 직후에 호출되며, 초기 데이터를 가져오거나 외부 리소스 요청등의 작업을 수행한다.

업데이트 단계에선 성능 최적화를 위해 사용되는 shouldComponentUpdate가 컴포넌트를 업데이트 할지 결정을 한다

업데이트된 컴포넌트가 있으면 render가 실행되어 UI를 업데이트하고 componentUpdate에선 컴포넌트의 업데이트가 완료된 직후에 호출되며 업데이트 이후의 작업을 수행한다.

마지막으로 소멸단계에선 언마운팅된다고 하는데 componentWillUnmount에서 컴포넌트가 제거되기 전에 호출되며, 정리 작업을 수행한다.

리소스 해제나 이벤트 핸들러 제거를 수행한다.

개발자는 컴포넌트 동작에 대해 이해하고 성능 최적화와 자원관리를 필요로 하기 때문에 필요로 하는 지식들이다.

리액트 훅은 무엇이고 왜 쓰나요?

함수형 컴포넌트에서 클래스형 컴포넌트의 라이프 사이클 메소드를 비슷하게 사용하는 방법에 대해 설명해주세요.


문서 탐색 단계

  1. 배경파악 문제인식
  2. 존재이유
  3. 해결방법→이렇게 해결한다고? 이 해결방식에 내가 동의하나?
  4. 튜토리얼 / useCase
profile
진주링딩동🎵

0개의 댓글