7주차 위클리 페이퍼
Q1) 리액트 생명주기(life cycle)에 대해 설명해 주세요.
리액트 컴포넌트에는 생명 주기가 있다. 이것을 라이프 사이클(Life cycle)이라고 표현한다. 라이프 사이클은 컴포넌트가 실행되거나, 업데이트 또는 제거될 때 특정한 이벤트들을 호출하는 것이다.
이러한 리액트의 라이프 사이클은 클래스 컴포넌트에서만 사용할 수 있으며, 함수 컴포넌트에서 사용하고 싶을 경우에는 리액트 훅인 useEffect를 이용하여 사용할 할 수 있다.
(1) 클래스 컴포넌트
1. 마운트 (생성단계)
1-1) constructor
컴포넌트 생성자 메서드로, 컴포넌트가 생성이 되면 제일 먼저 실행이 되는 메서드이다. state와 props를 접근하여 값을 할당할 수 있다.
1-2) getDerivedStateFromProps
getDerivedStateFromProps는 props로 받아온 것을 state에 설정하고 싶을 때 사용되며, 최초 마운트될 때와 갱실될 때, 모두에서 render 메서드를 호출하기 직전에 호출된다. 특정 객체를 반환하게 되면 해당 객체의 값이 state로 갱신이 되며, null을 반환하게 되면 아무 것도 갱신하지 않을 수 있다.
1-3) render
render()은 컴포넌트를 렌더링 해주는 메서드이다. 클래스 컴포넌트에서 반드시 구현되어야 하는 유일한 메서드이다.
1-4) componentDidMount
컴포넌트가 마운트, 첫번째 렌더링이 된 직후 호출되는 메서드이다. 이 시점에는 화면이 구현이 되어있는 상태이다. componentDidMount에서는 DOM에 접근하여 사용을 할 수가 있다. 그래서 여기에서는 주로 AJAX 요청을 하거나, DOM에 속성을 읽거나 변경을 하는 작업을 한다. (setTimeout, setIneterval 등)
(2) 업데이트
2-1) getDerivedStateFromProps
getDerivedStateFromProps는 값이 갱신되어 업데이트 시에도 render 전에 메서드가 실행된다.
2-2) shouldComponentUpdate
shouldComponentUpdate()는 컴포넌트를 다시 리렌더링 할지 말지를 결정하는 메서드이다. props 또는 state가 새로운 값으로 갱신되어서 렌더링이 발생하기 직전에 호출된다. 기본값은 true이며, return false를 하면 render을 취소할 수 있다. 주로 성능 최적화를 위해 사용된다.
2-3) render
렌더링을 한다.
2-4) getSnapshotBeforeUpdate
getSnapshotBeforeUpdate()는 가장 마지막으로 렌더링된 결과가 DOM 등에 반영되기 전에 호출된다. 이 메서드를 사용하면 DOM 상태가 변경이 되기 전의 값을 반환하여 componentDidUpdate에서 인자로 받아 사용이 가능하다.
2-5) componentDidUpdate
componentDidUpdate는 갱신이 일어난 직후에 호출된다. 이 메서드는 최초 렌더링에서는 호출되지 않는다.
(3) 언마운트 (제거단계)
3-1) componentWillUnmount
컴포넌트가 사라지기 직전에 호출을 하고, 주로 여기서는 DOM에 등록했던 이벤트들을 제거해주는 용도로 사용된다.
(2) 함수 컴포넌트
- useState
상태를 관리한다.[state, setState]순으로 반환해서 사용한다. - useEffect
화면에 렌더링이 완료된 후에 수행되며,componentDidMount와componentDidUpdate,componentWillUnmount가 합쳐진 것을 의미한다. - useContext
Context API를 통해 만들어진 Context에서 제공하는 value를 가져올 수 있다. - useReducer
useState의 대체 함수로 컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 컴포넌트 바깥에 로직을 작성할 수도 있고, 다른 파일에 작성한 후 불러와서 사용할 수도 있다. reducer는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수이다. - useRef
특정 DOM을 선택할 때 주로 사용되며,.current프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생명주기를 통해 유지된다. - useMemo
메모이제이션된 값을 반환한다. 이미 연산된 값을 리렌더링 시 다시 계산하지 않도록 한다. 의존성이 변경되었을 때만 메모이제이션된 값만 다시 계산한다. 의존성 배열이 없는 경우 렌더링 때마다 새 값을 계산한다. - useCallback
메모이제이션 된 콜백을 반환한다. useMemo와 유사하게 이용되며 '함수'에 적용한다. 의존성이 변경되었을 때만 변경된다. 때문에 특정 함수를 새로 만들지 않고 재사용이 가능하다.
Q2) 웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명해 주세요.
(1) CSR(Client-Side Rendering)
웹 브라우저에서 자바스크립트로 HTML 파일을 렌더링하는 방식을 의미한다.
장점
- JavaScript가 동적으로 페이지를 그리는 방식이기 때문에, 페이지 전환 속도도 비교적 빠르며, 부드럽게 페이지 이동이 가능하다.
- 초기 로딩 속도가 빠르다.
- 서버에 부하가 적게 발생한다.
단점
- SEO 대응이 되지 않는다. 검색 엔진은 사이트의 정보를 얻기 위해 크롤러를 사용하여 사이트를 읽는데, 크롤러는 JavaScript를 실행하지 않기 때문에 SEO 대응이 되지 않는다.
활용
- 사용자의 개인정보를 기준으로 하는 서비스 페이지에 적합하다. (사용자 프로필, 결제 창 등)
(2) SSR (Server-side Rendering)
서버에서 request에 맞는 HTML을 response로 보내주는 방식을 의미한다.
장점
- 크롤러를 사용하여 사이트를 읽기 때문에, SEO에 유리하다.
- 초기 로딩 속도가 빠르고, 사용자와의 상호작용이 매끄럽다.
단점
- 서버로 한번에 많은 request가 있을 경우 로딩 기간이 길어질 수 있다.
활용
- SEO에 유리하기 때문에, 상세보기 페이지 등에 활용된다.
(3) SSG (Static Site Generation)
만들어진 HTML 파일을 서버에 배포하고, 서버에 request가 들어오면 만들어놓은 HTML 파일을 response로 보내주는 방식을 의미한다.
장점
- 미리 HTML 파일을 만들어 놓기 때문에 렌더링 속도가 빠르다.
- SEO에 유리하다.
단점
- 빌드할 때 렌더링하기 때문에 데이터가 정적이다.
- 사용자별 정보 제공이 어렵다.
활용
- 데이터가 자주 바뀌지 않으며 SEO에 유리하기 때문에, 뉴스레터 등에 활용된다.
