[React] LifeCycleAPI

[React] LifeCycleAPI

https://ko.reactjs.org/docs/react-component.html

- 거의 이거 보고 정리했다.

LifeCycleAPI는 컴포넌트가 우리 브라우저에서 나타날 때, 사라질 때, 업데이트될 때 , 호출되는 API이다.

컴포넌트 초기 생성(마운트)

마운트 : DOM 객체가 생성되고 브라우저에 나타나는 것을 의미.

constructor

컴포넌트 생성자 함수. 컴포넌트가 새로 만들어질 때마다 이 함수가 호출된다.

constructor(props){ super(props); // 여기서 this.setState()를 호출하면 안된다! this.state { counter: 0 }; this.handleClick = this.handleClick.bind(this); }

constructor() 내부에서 setState()를 호출하면 안된다.

render()

이 메서드가 호출되면 this.props 와 this.state 의 값을 활용하여 아래의 것 중 하나를 반환해야 한다.

render() 함수는 컴포넌트의 state를 변경하지 않고, 호출될 때 마다 동일한 결과를 반환해야 하며, 브라우저와 직접적으로 상호작용을 하지 않는다.

shouldComponentUpdate()가 false를 반환하면 render()는 호출되지 않는다.

React 엘리먼트 보통 JSX를 사용하여 생성된다. 예를들어, 와 는 React가 DOM 노드 또는 사용자가 정의한 컴포넌트를 만들도록 지시하는 React 엘리먼트 이다.

배열, Fragment render()를 통해 여러개의 엘리먼트를 반환한다. Fragment = DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화 할 수 있다.

Portal 별도의 DOM 하위 트리에 자식 엘리먼트를 렌더링 한다. 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법 portal의 전형적인 유스케이스는 부모 컴포넌트에 overflow: hidden, z-index가 있는 경우지만, 시각적으로 "튀어나오도록" ( 다이얼로그, 호버카드, 툴팁 등) 보여야 하는 경우도 있다. render(){ // React는 새로운 div를 마운트하고 그 안에 자식을 렌더링한다. return ( {this.props.children} ); } -------- // 그런데 가끔 DOM의 다른 위치에 자식을 삽입하는 것이 유용할 수 있다. render() { // React는 새로운 div를 생성하지 *않고* 'domNode' 안에 자식을 렌더링한다. // 'domNode'는 DOM 노드라면 어떠한 것이든 유효하고, 그것은 DOM 내부의 어디에 있든지 상관없다. return ReactDOM.createPortal( this.props.children, domNode ); }​

문자열과 숫자 이 값들은 DOM 상에 텍스트 노드로서 렌더링 된다.

Boolean 또는 null 아무것도 렌더링 하지 않는다.

componenetDidMount()

componenetDidMount(){ // 외부 라이브러리 연동: D3, masonry, etc // 컴포넌트에서 필요한 데이터 요청: Ajax, GraphQL, etc // DOM에 관련된 작업: 스크롤 설정, 크기 읽어오기 등 }

컴포넌트가 화면에 나타나게 됐을 때 호출된다.

호출된다. DOM을 사용해야하는 외부 라이브러리 연동을 하거나, 해당 컴포넌트에서 필요로 하는 데이터를 요청하기 위해 axios, fetch 등을 통하여 ajax를 요청하거나, DOM의 속성을 읽거나 직접 변경하는 작업을 진행한다.

컴포넌트 업데이트

컴포넌트 업데이트는 props의 변화, state의 변화에 따라 결정 된다.

render() 는 위의 render() 설명과 동일하다.

componentDidUpdate()

componentDidUpdate()는 갱신이 일어난 직후에 호출 된다.

된다. 컴포넌트가 갱신되었을 때 DOM을 조작하기 위해 이 메서드를 활용하면 좋다.

이 메서드를 활용하면 좋다. 또한, 이전과 현재의 props를 비교하여 네트워크 요청을 보내는 작업 도 이 메서드에서 이뤄진다. ( props가 변하지 않았다면 네트워크 요청을 보낼 필요가 없다.)

componentDidUpdate(prevProps) { // 전형적인 사용 사례 (props 비교 잊지 말기!) if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); } }

setState() 를 즉시 호출할 수도 있지만, 위의 예시처럼 조건문으로 감싸지 않으면 무한 반복이 발생할 수 있다는 점 주의!

컴포넌트 제거(마운트 해제/언마운트)

componentWillMount()

컴포넌트가 마운트 해제되어 제거되기 직전에 호출

메서드 내에서 타이머 제거, 네트워크 요청 취소, componentDidMount() 내에서 생성된 구독 해제 등 필요한 모든 정리작업을 수행

이제 컴포넌트는 다시 렌더링 되지 않으므로, componentWillMount() 내에서 setState()를 호출하면 안된다. 컴포넌트 인스턴트가 마운트 해제되고 나면, 절대 다시 마운트 되지 않는다.

*사진출처

https://lktprogrammer.tistory.com/130

from http://nxxrxx.tistory.com/59 by ccl(A) rewrite - 2021-11-06 12:01:03