숭어 개발 블로그

마운트컴포넌트가 처음 실행이 될때 생성단계를 마운트(Mount)라고 표현을 합니다.마운트에 해당되는 생명주기에는 다음과 같은 메서드들이 있습니다.constructorgetDerivedStateFromPropsrendercomponentDidMountconstructorconstructor(props) { super(props); this.state = { counter: 0 }; // this.setState() 호출은 X}컴포넌트 생성자 메서드로, 컴포넌트가 생성이 되면 제일 먼저 실행이 되는 메서드입니다.state와 props를 접근하여 값을 할당 할 수 있습니다.getDerivedStateFromPropsstatic getDerivedStateFromProps(props, state)getDe..

Flux 패턴이란? - Flux 패턴은 2014년 페이스북 F8 컨퍼런스에서 발표된 아키텍처로, Client-Side 웹 애플리케이션을 만들기 위해 사용하는 디자인 패턴 Flux는 사용자 입력을 기반으로 Action을 만들고 Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 단방향의 흐름으로 애플리케이션을 만드는 아키텍처입니다. 구조는 다음의 그림과 같습니다 . MVC는 Model, View, Controller의 약자입니다. Model에 데이터를 저장하고, Controller를 이용하여 Model의 데이터를 관리(CRUD)합니다. Model의 데이터가 변경되면 View로 전달되어 사용자에게 보여집니다. 또한 중요한 점은 사용자가 View를 통해..

1-1. 리액트가 마운트 시에 하는 작업들props로 받은 값을 컴포넌트의 로컬 상태로 설정외부 API 요청(REST API 등)라이브러리 사용 (D3, Video.js 등...)setInterval을 통한 반복작업 혹은 setTimeout을 통한 작업 예약💥 참고로 리액트 컴포넌트는 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트 또한 리렌더링 된다 (바뀐 내용이 없다 할지라도!)1-2. 리액트가 언마운트 시에 하는 작업들setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout)라이브러리 인스턴스 제거1-3. Hook 컴포넌트를 작성할때 유의할점return문이 hook보다 위에 있으면 안된다👉 컴..