Next.js: ComponentWillMount vs. getInitialProps
리액트 어플리케이션에는 서버측 렌더링이 있기 때문에 Next.js를 사용하고 있습니다.로그로 확인한 결과, 두 방법 모두ComponentWillMount그리고.getInitialProps둘 다 서버 측에서 실행됩니다.그 방법들 사이에 어떤 차이가 있나요?
언제 뛰어들어야 합니까?ComponentWillMount그리고 내가 언제 뛰어들어야 할까?getInitialProps?
Next.js가 이것에 대해 언급하는 것은 보이지 않습니다.
경고
정답의 50%가 틀렸습니다.그 이유는 이렇습니다.답변을 두 섹션으로 나누겠습니다.
파트 1:
GetInitialProps는 일반적으로 서버에서의 비동기 조작에 적합한 비동기 함수이며 데이터를 소품으로 페이지에 전달합니다.
Next.js에서는 항상 서버에서 실행됩니다.Link를 사용하여 페이지를 호출하면 클라이언트 측에서만 호출됩니다.
틀렸습니다.GetInitialProps는 서버와 브라우저 모두에서 실행됩니다(Next.js의 목적은 범용 JavaScript를 만드는 것입니다).이 메뉴얼에서는, 다음과 같이 기술하고 있습니다.
파트 2:
두 번째 섹션은 실제 질문에 더 정확하게 대답하는 것입니다.OP가 ComponentDidMount와 ComponentWillMount를 혼동한 것은 분명합니다.Next.js의 경우 GetInitialProps와 GetInitialProps를 비교하는 것이 더 적절하기 때문입니다.ComponentDidMount는 둘 다 데이터를 가져오기 위해 비동기 호출을 할 수 있기 때문에 둘 다 이후 렌더링을 허용합니다(ComponentWillMount의 경우 불가능).
어느 경우든 사용할 때는 몇 가지 차이가 있습니다.
GetInitialProps:는 Next.js에서 제공되며 항상 트리거되는 것은 아니므로 주의하시기 바랍니다.컴포넌트를 다른 컴포넌트 안에 랩할 때 발생합니다.상위 구성 요소에 GetInitialProps가 있으면 하위 구성 요소의 GetInitialProps가 트리거되지 않습니다.자세한 내용은 이 스레드를 참조하십시오.
Component Did Mount:는 리액트 구현으로 항상 브라우저에서 트리거됩니다.
당신은 이렇게 물을지도 모른다. "그래서 나는 언제 이걸 사용해야 할까, 아니면 저걸 사용해야 할까?"사실 그것은 매우 혼란스럽고 동시에 매우 간단하다.다음은 경험칙입니다.
- GetInitialProps를 사용하여 컴포넌트가 페이지 역할을 하고 데이터를 Propes로 제공할 때 데이터를 가져옵니다.
- 자녀 컴포넌트(페이지가 아님) 또는 Ajax 콜 시 상태를 갱신하는 경우 ComponentDidMount를 사용합니다.
GetInitial Props(초기 프로프)
GetInitialProps는 보통 비동기 함수로 서버의 비동기 작업에 적합하며 데이터를 소품으로 페이지에 전달합니다.
Next.js에서는 항상 서버에서 실행됩니다.Link를 사용하여 페이지를 호출하면 클라이언트 측에서만 호출됩니다.
컴포넌트가 아닌 페이지에서만 사용할 수 있습니다.
컴포넌트 마운트
이것은 구명 고리입니다.렌더 메서드가 호출되기 직전에 호출됩니다.가져온 데이터는 소품으로 전달할 수 없습니다.
페이지뿐만 아니라 구성 요소에서도 호출할 수 있습니다.비동기 조작이 완료될 때까지 대기하지 않기 때문에 비동기 콜을 발신하기에 적합하지 않습니다.따라서 서버에서 실행되고 비동기 조작이 기록되면 완료되지 않고 데이터를 가져오지 않고 클라이언트에 도달합니다.
componentWillMount는 컴포넌트 라이프 사이클 방식입니다.
문서에 따라
componentWillMount()는 마운트 발생 직전에 호출됩니다.에서는 이렇게 .render() 콜(콜)setState()이 메서드에서 동기화된 경우 추가 렌더링이 트리거되지 않습니다.'사용할 수 있는 방법'을 사용하는 이 좋습니다.constructor() 합니다.이 방법에서는 부작용이나 구독이 발생하지 않도록 합니다.예에서는, 「」를 사용해 .componentDidMount() 시 호출되는 입니다.이것은 서버 렌더링에서 호출되는 유일한 라이프 사이클 후크입니다.
언급URL : https://stackoverflow.com/questions/47461803/next-js-componentwillmount-vs-getinitialprops
'codememo' 카테고리의 다른 글
| Angular를 사용하는 방법선행 0을 가지도록 숫자를 포맷하는 JS 필터? (0) | 2023.02.27 |
|---|---|
| 디렉티브 스코프 인수를 사용한 디렉티브 부모 스코프의 콜 함수 (0) | 2023.02.27 |
| Postgres JSON 어레이에 문자열이 포함되어 있는지 확인합니다. (0) | 2023.02.27 |
| 외국 열쇠가 몽고에 있다고? (0) | 2023.02.27 |
| mongodb가 strict JSON을 출력하도록 강제합니다. (0) | 2023.02.27 |