도찐개찐

컴포넌트 생명주기(lifecycle)란 컴포넌트가 페이지에 렌더링 되기 위해 준비하는 과정에서부터 제거될 때까지의 기간을 말하며, 클래스형 컴포넌트는 이러한 생명주기 중 특정 시점에 대하여 원하는 구문을 실행할 수 있도록 생명주기 메소드를 지원합니다. 생명주기와 생명주기 메소드는 위 도표와 같은 타임라인을 가지며, 크게 세 가지 경우로 나누어 볼 수 있습니다. 참고로 각 메소드에서 Did는 해당 시점이 끝난 후 메소드 내용을 실행하겠다는 것을 뜻하며, Will은 해당 시점 직전에 메소드 내용을 실행하겠다는 것을 뜻합니다. 이제 세 가지 경우 각각에 실행되는 생명주기 메소드에 대해 살펴보고 각 메소드의 역할에 대해 알아보겠습니다. 첫 번째, 컴포넌트 인스턴스가 생성(마운트)되고 DOM에 삽입될 때는 아래와..

위와 같이 console.log() 로 값을 찍어보면 두번씩 출력 되는 현상이 나타났습니다. 렌더링 두번 발생 됬는지 추측해 볼 수 있습니다. 결론은 때문 입니다. index.js 소스를 확인해 보면 해당 태그로 둘러 쌓여 있는 것을 확인 할 수 있습니다. root.render( ); Strict 모드는 Fragment와 같이 동작하며 (단순히 감싸는 것), child까지 모두 엄격하게 검사 한다고 생각 하면 됩니다. Strict 모드가 자동으로 부작용을 찾아 주는 것은 불가능 합니다. 하지만, 조금 더 예측할 수 있게끔 만들어서 문제가 되는 부분을 발견할 수 있게 도와 줍니다. 이는 아래의 함수를 의도적으로 이중으로 호출하여 찾을 수 있습니다. 클래스 컴포넌트의 constructor , render 그..