blueGeuni
63
2019-02-10 21:03:57 작성 2019-02-10 21:04:35 수정됨
5
323

javascript의 console 관련되서 여쭤볼게 있습니다..!


문제를 제대로 이해하지 못해서 질문이 조금 이상할 수 있습니다.. 죄송합니다..

다름이 아니라 react에서 api 통신 후 response를 자식 컴포넌트에 props로 넘겨주는 과정에서

자식 컴포넌트의 props의 response 값이 예상과 다르게 전달되어서? 질문 드립니다!

자식 컴포넌트의 render 라이프 사이클에서 console을 출력해보니 아래와 같이 동작해서 제가 예상하는 동작은 최초 시점에서 console.log(this);의 결과는 디버그 모드가 종료되더라도 그 시점의 자식 컴포넌트를 참조하고, props 또한 최초 시점의 자식 컴포넌트에 props일 줄 알았는데 디버그 모드가 끝나고 다시 해당 console.group을 열어서 확인해보니 최초 시점에 디버그 모드로 확인한 결과랑 달라서 놀랐네요... 

제가 잘못 이해하고 있는걸까요??

render() {
	console.group('TEST');
	// 최초 시점
	console.log(this); // 결과: 출력된 this의 props 프로퍼티에 response값이 존재하지 않음.
	.
	.
	.
	.
	// API 통신이 끝난 후 response값이 존재할 때
	console.log(this); // 결과: 출력된 this의 props 프로퍼티에 response값이 존재함.
	console.groupEnd();
	.
	.
	.
	.
	// 디버그 모드 종료 후
	// 최초 시점의 console.log(this); 를 확인해보니 this의 props 프로퍼티에 response값이 존재함.
}


0
0
  • 답변 5

  • blueGeuni
    63
    2019-02-11 10:52:35

    @차오주님
    호이스팅이 할당되기전 시점의 conosle의 결과도 바꿀 수 있나요??

    this.props프로퍼티에 데이터가 할당되기전 시점에 console을 찍었는데 출력된 console의 결과가 이후에 프로퍼티가 추가된다 해서 달라질 수 있는것인가요?? 

    window.a 프로퍼티에 1 이라는 값을 할당하기 전 시점의 console.log(window.a) -> undefined 이고

    window.a 프로퍼티에 1 이 할당된 후의 console.log(window.a) -> 1 인데 

    위에 제가 올린것은 window.a 프로퍼티에 1 이 없는 시점의 console임에도 1이 할당되어 있어서 질문 드렸어요


    0
  • 아마그래머
    157
    2019-02-11 11:45:13

    https://www.zerocho.com/category/JavaScript/post/5b2b45cf1350f9001b662ba6

    몇일 전에 본건데 이거랑 같은 거 아닐까 싶네요.

    console.log()에서 객체를 로깅할 때는 객체의 내용의 변경사항이 실시간으로 업데이트 된다고 합니다.

    디버깅 모드로 했을 시에는 source에서 break걸고 하나하나 단계별로 찍으시면서 보아서 처음 최초시점에 response 프로퍼티가 없었어도 디버그 모드 종료후에는 최초시점에도 위와같은 이유로 response값이 있지 않나 싶네요

    1
  • blueGeuni
    63
    2019-02-11 12:03:10 작성 2019-02-11 12:07:20 수정됨
    @아마그래머님
    아... 
    감사합니다ㅠㅠㅠㅠ
    맞아요 단계별로 찍었을때는 없었는데...
    정말 감사합니다ㅠㅠ
    그럼 참조 자료형 데이터는 console 시점 마다 같은 참조의 데이터여서 
    시점이 의미가 없었던거군요..
    0
  • blueGeuni
    63
    2019-02-11 12:09:05
    deepClone 해서 다시 확인해보니 디버그 모드랑 동일하게 동작하네요!
    감사합니다~
    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.