반응형 react hooks2 [REACT] 리액트 Component Life-Cycle과 React Hooks 리액트의 컴포넌트 생명주기 모든 리액트 컴포넌트는 생성(mounting) -> 업데이트(updating) -> 제거(unmounting)의 생명주기를 갖는다. 함수형과 객체 컴포넌트의 각 생명주기와 기능들을 알아보자. 1. Class Component 마운트(mount) 컴포넌트가 생성 될때 발생하는 생명주기 1) constructor 컴포넌트 생성자 메서드, 컴포넌트가 생성되면 가장 먼저 실행되는 메서드 this.props, this.state에 접근이 가능하고 리액트 요소를 반환한다. 2) getDerivedStateFromProps props로부터 파생된 state를 가져옵니다. 즉 props로 받아온 것을 state에 넣어주고 싶을때 사용한다. 3) render 컴포넌트를 렌더링하는 메서드 내부에.. 2023. 9. 10. UseEffect, Props를 사용한 시계만들기 with Example code (실습 난이도 : 하, 소요시간 : 20min±) 이번엔 useEffect Hook과 props기능을 사용해서 만들수 있는 기초적인 시계를 만들어보자. 먼저 App.js에서 기본적으로 버튼과 그 버튼으로 켜지고 꺼질 수 있는 시계기능을 코딩해보자. App.js import React,{useState} from 'react'; import Time from './components/Time' function App() { const [showTime,setShowTime] = useState(false); return {showTime && } {setShowTime(!showTime)}}>Time Toggle } export default App; 가장 먼저 button을 생성하고 useState를 사.. 2023. 1. 27. 이전 1 다음 반응형
