- Lifecycle Methods(Mount, Update, Unmount)
- useEffect
- Event Handling
- Input
- Form
Lifecycle Methods
- 모든 컴포넌트는 Mount, Update, Unmount되는 단계를 거친다.
- 각 단계에서 몇 개의 메서드들이 정해진 순서대로 호출되는데, 이때 호출되는 메서드를 Lifecycle Methods라고 한다.
- Mounting : 컴포넌트가 페이지에 렌더링되는 프로세스(컴포넌트가 화면에 나타남)
- 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입되는 단계로, Mounting은 Lifecyle이 종료될 때까지 한 번만 일어난다.
- Updating: 컴포넌트가 업데이트됨
- Unmounting : 컴포넌트가 페이지에서 제거되는 프로세스(컴포넌트가 화면에서 사라짐)
- Mounting : 컴포넌트가 페이지에 렌더링되는 프로세스(컴포넌트가 화면에 나타남)
- 컴포넌트가 페이지에 렌더링되면 componentDidMount 메서드가 호출
- 예를 들어 카운터 앱에서 componentDidMount를 사용하여 카운터의 초기 값을 설정할 수 있다.
- 아래의 코드는 컴포넌트가 렌더링될 때 카운터의 초기 값이 설정된다.
- componentDidMount는 일반적으로 DOM에 처음 마운트할 때 컴포넌트 내부의 상태를 채우는 데 사용된다.
- 컴포넌트는 Lifecyle마다 메서드를 가지고 있는데, 이 메서드를 사용하여 특정 시점에 원하는 동작을 하도록 만들 수 있다.
import React from 'react';
import ReactDOM from 'react-dom';
import './style.css';
class Counter extends React.Component {
state = {
counter: 0
}
increment = () => {
this.setState({counter: this.state.counter+1});
}
componentDidMount() {
this.setState({counter: 42});
}
render() {
return <div>
<p>{this.state.counter}</p>
<button onClick={this.increment}>Increment</button>
</div>;
}
}
const el = <Counter />;
ReactDOM.render(
el,
document.getElementById('root')
);
Mounting → componentDidMount
- 컴포넌트가 화면에 모두 그려진 이후 호출
- componentDidMount 메서드는 첫 렌더링 이후 실행
- 실행순서
- constructor(컴포넌트의 인스턴스를 새로 만들 때마다 생성자 메서드가 호출)
- render(화면에 표현될 JSX를 반환하고 화면에 그림)
- componentDidMount(컴포넌트가 화면에 모두 그려진 이후 호출)
Updating → componentDidUpdate
- DOM에서 구성 요소가 업데이트될 때 호출(props 또는 state가 변경되어 컴포넌트가 업데이트되는 단계)
- 실행순서
- render(데이터가 변경되면 자동으로 호출, 화면을 다시 그림)
- componentDidUpdate(화면이 다시 그려진 이후 호출)
Unmounting → componentWillUnmount
- 컴포넌트가 DOM 상에서 제거되는 단계
- 실행순서
- componentWillUnmount(컴포넌트가 화면에서 제거되기 전에 호출)
The useEffect Hook
- 위에서 다룬 Lifecycle Methods는 class component에만 사용할 수 있다.
- 그러나 React는 function component에서 Lifecycle Methods를 사용할 수 있도록 useEffect라는 hook을 제공한다.
- componentDidMount, componentDidUpdate 및 componentWillUnmount 메소드를 하나로 결합한다.
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import './style.css';
function Counter() {
const [counter, setCounter] = useState(0);
useEffect(() => {
alert("Number of clicks: " + counter);
});
function increment() {
setCounter(counter+1);
}
return <div>
<p>{counter}</p>
<button onClick={increment}>Increment</button>
</div>;
}
const el = <Counter />;
ReactDOM.render(
el,
document.getElementById('root')
);
- 변경 사항이 있을 때만 메소드를 호출하려면 아래의 메서드처럼 제공해야한다.
- useEffect() 메서드는 카운트가 변경되는 경우에만 실행
useEffect(() => {
//do something
}, [count]);
Event Handling
- React에서 event를 처리하는 것은 DOM에서 event를 처리하는 것과 유사하다.
- 여기서 event란 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 말한다.
- event 이름은 camelCase 구문을 사용(html에서는 onclick으로 사용된다.)
- ex. onClick={handleClick}
- event에 실행할 함수를 전달
- 위 예시에서는 handleClick이라는 함수를 전달
- DOM 요소에만 event를 설정 가능
- input, div 등의 DOM요소에는 이벤트 설정 가능
- 하지만 직접 만든 컴포넌트에는 event를 자체적으로 설정할 수 없음
onChange
- input 의 텍스트 값이 바뀔때마다 발생하는 이벤트
- text fields를 사용하여 사용자 - 웹 페이지간 상호 작용
- text fields의 onChange event를 사용 -> React에서 사용자의 input을 처리
- text fields 값이 변경되면 Event Handler가 호출되어 컴포넌트 상태의 필드 값을 업데이트
- text fields의 실제 값이 항상 state에 있게 된다.
KM을 Miles로 변환하는 앱을 만든다고 가정.(text fields에서 input으로 Km 값을 가져와 Miles값을 계산)
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './style.css';
function Converter() {
const [km, setKm] = useState(0);
function handleChange(e) {
setKm(e.target.value);
}
function convert(km) {
return (km/1.609).toFixed(2);
}
return <div>
<input type="text" value={km} onChange={handleChange} />
<p> {km} km is {convert(km)} miles </p>
</div>;
}
const el = <Converter />;
ReactDOM.render(
el,
document.getElementById('root')
);
- Converter 컴포넌트에는 값이 변경될 때 handleChange 함수를 호출하는 input 태그가 포함되어 있다.
- convert 함수를 사용하여 해당 마일값을 표시한다.
- 위와 같은 결과값을 가져오게되는데 값이 변경될때마다 실시간으로 값이 렌더링된다.
- text fields에 값을 입력할때마다 state가 변경된다.(현재 값으로 state를 업데이트하여 컴포넌트를 재렌더링)
https://www.sololearn.com/learning/1097/3376/7634/1 https://ko.reactjs.org/docs/hooks-state.html