inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기

챗봇 어플리케이션 만들기#9 메세지 데이터를 채팅창에서 보여주기 질문있습니다

305

Dev

작성한 질문수 64

0

좋은 강의 올려주셔서 항상 감사하게 생각하고 있습니다.

    const renderOneMessage = (message, index) => {
        console.log('message', message)
    }

    const renderMessage = (messageFromRedux) => {
        if(messageFromRedux){
            messageFromRedux.map((message, index) => {
                return renderOneMessage(message, index);
            })
        }
        
    }  

해당 수업 도중, 위와 같은 코드가 있었는데 페이지를 처음 로딩하는 경우,

useEffect에서 eventQuery()에 관한 함수를 처리하는데

useEffect는 lifecycle이  DOM에 마운팅된 직후에 이 작업을 수행하겠다는 뜻으로 알고 있습니다.

그렇다면 페이지를 처음 로딩하는 경우, useselector를 통해 받아오는 state 값이 빈배열이 될것이고,

이 빈배열의 값이 map 메소드를 통해 로직이 구현되는거 아닌가요??

즉, useEffect는  DOM에 마운팅된 직후에 이 작업을 수행하니까, useEffect가 실행되기 전에 마운팅된 시점.

그 시점에서의 결과가 출력되지 않고,  useEffect가 실행된 후의 시점의 결과가 출력되는지 궁금합니다.

감사합니다 선생님

nodejs react

답변 2

0

Dev

감사합니다 선생님!!!

0

John Ahn

안녕하세요 !   
우선 리액트 lifecycle에 관한 유명한 도표하나 첨부할게요 ~ ! 

도표에 보시는 것 처럼 먼저 마운트 된 이후에 렌더링이 됩니다.   그래서 화면에 렌더링 부분이 그려지게 됩니다. 

하지만 백엔드나 API를 통해서 가져와야하는 값들은 아직 없겠죠 그래서 그러한 부분은 로딩 처리등을 통해서 보여지게 됩니다. 

그러고 난 이후에 componentDidMount  훅에서는 useEffect겠죠 ! 

챗어플리케이션에서도 같습니다 ! 
먼저 렌더링 부분 렌더링되고  그이후에 데이터들을 가져온 후에 (가져올때 useEffect를 통해서 가져오겠죠) 렌더링 부분에 뿌려주게됩니다 ! 
이 과정은 리덕스 스토어에도 똑같이적용됩니다 ! 수고하세요 ~ ! 

localhost:3000 ERR_CONNECTION_REFUSED

0

913

1

이벤트 쿼리문제입니다

0

122

1

npm install 이 안됩니다

0

1045

2

질문있어요

0

186

1

수정해보았는데 답장이 오지 않습니다.

0

273

1

postman 에 답이 오지 않습니다.(수정)

0

262

1

최신버전 부분

0

163

1

웹브라우저 실행이 안됩니다 .인스톨도 안되구요. 최신버전으로 해서 진행하고 자 하는데 어떻게 하면 될가요?

0

151

1

포스트맨에서 send를 하였을 때 오류가 납니다.

0

162

1

한국어 챗봇 만들기

0

312

1

Error: 16 UNAUTHENTICATED: Failed to retrieve auth metadata with error: invalid_grant: Invalid JWT Signature. 에러 발생

0

216

1

npm start 하고 throw e 이부분에서 에러가 뜨네요

0

299

1

dialogflow 줄바꿈

0

408

1

npm start 에러

0

529

1

npm run start 오류

0

794

2

Dialogflow ES에서 서비스 어카운트에 dialogflow client api설정 하는 법 질문

0

447

1

파이어베이스랑 연동은 어떻게 하나요?

0

539

1

npm install오류

0

627

1

invalid_grant: Invalid JWT Signature.

0

468

0

질문있어요!

0

304

0

에러

0

314

0

https://dialogflow.com/

0

339

1

Error: 7 PERMISSION_DENIED: IAM permission 오류

0

531

1

npm run start 시 cannot find module 에러

1

489

1