DOM이 생성되어 브라우저에 나타나는 과정입니다.
컴포넌트를 만들고 브라우저에 표시되게 하는 것 까지의 시점 입니다.
메서드(method)
1. consturctor
< 형식 >
constructor(props) { ... }컴포넌트 가 만들어지는 과정에서 가장 먼저 생성되는 함수이며, 생성할 때 마다 호출이 되는 클래스 생성자 메서드 입니다.
컴포넌트가 가지고 있는 요소들 (state, props etc)의 초기 설정을 해 반환합니다.
setState를 사용할 수 없으며, DOM에 접근해선 안된다.
2. getDerivedStateFromProps
< 형식 >
getDerivedStateFromProps(props, state) { ... }props 로 전달된 값을 state 에 넣을 때 이용하는 메서드 입니다.
정적 메서드로 this 등의 접근은 불가하며, 인자(parameter)로 전달된 값을 통해서 사용합니다.
3. render
< 형식 >
render() {}
변경 사항을 나타낼 때 호출되는 함수이며, 클래스 생성자 메서드 입니다.
4. componentDidMount
< 형식 >
componentDidMount() {}컴퍼넌트가 브라우저에 생성되어 표시되면 호출되는 메서드이며, 모든 컴퍼넌트가 그려진 이후 특정 동작을 실행 시 이용됩니다.
클래스 컴퍼넌트 와 함수형 컴퍼넌트
클래스 컴포넌트 에서 componentDidMount() 메서드 안에 내용을 입력하고, 마운트가 완료된 시점에 동작을 선언할 수 있습니다.
ex) // Class Component export default class MyComponent extends Component { ... componentDidMount() { // 실행될 내용 } ... }
함수 컴포넌트에서 useEffect훅 안에 실행할 동작들을 선언하고,
두 번째 인자 배열을 비워 componentDidMount()처럼 동작하도록 할 수 있습니다.
ex) // function Component const MyComponent = () => { ... useEffect(() => { // 실행될 내용 }, []) ... }
728x90