blueGeuni
42
2019-02-10 21:03:57 작성 2019-02-10 21:04:35 수정됨
6
192

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
  • 답변 6

  • 차오주
    371
    2019-02-10 21:08:26 작성 2019-02-10 21:31:18 수정됨

    자바스크립트는 호이스팅이란  개념이 있습니다 

    문법책을  읽으시면서 코딩 하시면 도움 되실듯요

    변수의 범위 선언 할당  , 함수형 프로그래밍 이런것을 쟐 모르셔서 그럴수도요

    구글링후 다시 한번 소스 리뷰해보세요

    this 라는게 보통 window  자체입니다.  브라우져에서 this죠.  여기에  property는 추가 가능하죠. 함수1선언하면 그  이후 context 에서는 window.함수1  이렇게 접근됨 

    0
  • blueGeuni
    42
    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
  • 아마그래머
    130
    2019-02-11 11:45:13

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

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

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

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

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