1. mount, unmount의 의미
- HTML 코드에서
<script>태그를 입력할때<body>태그의 맨 마지막 줄에 입력한다.
그 이유는 JavaScript에서 동적인 기능을 적용하기 위해서는DOM에 접근하여 그 기능을 적용할 대상을 먼저 찾아야하기 때문이다.
React도 마찬가지로 먼저 뼈대를 만들어놓고 보여주고 싶은 데이터를 나중에 채워넣어줘야한다.
따라서 React에서 필요한 데이터는component가 mount된 후 불려진다.
- mount란?
해당 component의 render가 최초에life cycle을 돌고나서 return 이 끝났을때를 의미하며, componentDidMount 함수를 이용해서 mount를 불러올 수 있다.
- componenetDidMount 함수의 특징
componenetDidMount함수는 최초 한번만 불려지고 그 이후에는state값이 변경되어도 다시 불려지지 않는다.
그렇기 때문에 뼈대를 다 만들어지고 난 후 componentDidMount 함수를 사용하여데이터 로딩(API를 호출하여 데이터를 가져오는 것) 을 하는 것이 좋다.
componentDidMount 함수를 render 함수 안에 사용하게 되면 render 함수가 실행될때마다 계속해서 실행되기 때문에 반드시 constructor 함수 안, render 함수 바깥에 작성해줘야한다.
- umount란?
해당 component가 DOM상에서 제거 될때 실행되는life cycle이다.
최종적으로 제거가 되기 전 실행이 되며,
componentWillUnmount 함수로 호출되고 component내에서 이루어지는 네트워크 요청, 타이머 이벤트 등 지속적으로 이루어지는 이벤트들을 해제하는데 유용하게 사용된다.
2. 최초 mount시 메소드 실행 순서 (React life cycle >>> 부모 컴포넌트, 자식 컴포넌트까지)
import React, { Component } from "react";
import SearchBox from "./components/SearchBox/SearchBox";
import CardList from "./components/CardList/CardList";
import "./index.css";
class App extends Component {
constructor(){
super();
this.state = {
monsters: [],
userInput: ""
};
}
componentDidMount () {
fetch ('http://jsonplaceholder.typicode.com/users')
.then ((res) => res.json())
.then ((res) => {this.setState ({
monsters : res
})});
}
// 데이터 로딩
// SearchBox에 props로 넘겨줄 handleChange 메소드 정의
handleChange = e => {
this.setState({
userInput : e.target.value
});
}
render() {
// 필터링 로직
const filtered = this.state.monsters.filter(
(monster) =>
monster.name.toLowerCase().includes
(this.state.userInput.toLowerCase()) == true);
return (
<div className="App">
<h1>컴포넌트 재사용 연습!</h1>
<SearchBox handleChange={this.handleChange} />
<CardList monsters={filtered} />
</div>
);
}
}
export default App;위의 코드에서의 life cycle을 정리해보면 아래와 같다.
- 최초에 App component의 constructor, super 함수가 불려지고 state 객체가 생성된다.
- render 함수가 불려지고 JSX 코드가 return 된다.
- SearchBox 라는 자식 컴포넌트에 handleChange 라는 이름의 props 로 handleChange 메소드가 전달된다.
(handleChange 메소드는 자식 component인 SearchBox component에 props로 전달되어 input 에onClick이벤트를 걸고 input 값의 변화가 생기게 되면 App component에 있는 userInput 이라는 state 의 value 값을 변경해주는 역할을 한다.)- componentDidMount 함수가 실행되고
데이터 로딩이 진행되면 state 값이 변경되고 이후 다시 render 함수가 실행되며 이후에는 componentDidMount 함수는 호출되지 않는다.
- handleChange 메소드가 실행되어 state 가 변경되면 render 함수가 다시 실행되고 input 값이 변경될 때마다 render 함수가 계속 반복해서 실행된다. (render 함수가 다시 실행되지 않으면 변경된 state 값이 반영되지 않기 때문에 state 가 변경될때마다 다시 실행된다.)
3. map 으로 컴포넌트 재사용 시 key가 의미하는 것은?
- map 함수는 많은 량의 데이터 배열을 return 값에 일일히 입력하지 않고 넘겨줄 수 있다는 점에서
React에서 핵심이 되는 함수라고 할 수 있다.
React에서는 데이터가 변경되어 렌더링이 될때 불필요한 렌더링을 하지 않기 위해 전체를 렌더링 하지 않고 변경되는 부분만 렌더링한다. 그렇기 때문에 어떠한 데이터가 변경되는지React에 알려주기 위해 key 값을 사용하며, key 값은 겹치지 않는 고유한 값이여야한다.
key 값은 map 함수의 두번재 인자로 넣어주고 return 값에key={}형태로 입력한다.
map 함수 인자에 넣어준 값을key={}안에 동일하게 넣어준다면 자동으로 해당 배열의 index 값을 key 값으로 사용하며, index 값을 사용하고 싶지 않다면 전달되는 데이터 배열의 요소 중 겹치지 않는 유일한 값을 key 값으로 사용할 수 있다.
프론트 앤드 개발자를 꿈꿉니다.