React (6) 함수형 컴포넌트의 생명주기 분류 클래스형 컴포넌트 함수형 컴포넌트 Mounting constructor() 함수형 컴포넌트 내부 Mounting render() return() Mounting ComponenDidMount() useEffect() Updating componentDidUpdate() useEffect() UnMounting componentWillUnmount() useEffect() useEffect useEffect(() => { //코드 }) : 모든 컴포넌트가 리렌더링 될 때마다 실행 componentDidMount() useEffect(() => { //코드 },[]) : 한번만 실행 componentDidUpdate() & getDerivedStateFromProps() useEffect(() => {.. 5. Create import {useState} from 'react'; //훅 function Header(props) { return { event.preventDefault(); props.onChangeMode(); }}>{props.title} } function Nav(props) { const lis = []; for(let i=0; i{t.title} ); } return {lis} } function Article(props) { return {props.title} {props.body} } function Create(props) { return Create { event.preventDefault(); const title = event.target.title.value; const body = e.. 4. useState import {useState} from 'react'; //훅 function Header(props) { return { event.preventDefault(); props.onChangeMode(); }}>{props.title} } function Nav(props) { const lis = []; for(let i=0; i{t.title} ); } return {lis} } function Article(props) { return {props.title} {props.body} } function App() { /* const _mode = useState{'WELCOME'}; //초기값 const mode = _mode[0]; //상태값 const setMode = _mode[1]; //값.. 3. 이벤트 props 를 이용하여 onClick, onChangeMode 등 이벤트를 적용하기 function Header(props) { return { event.preventDefault(); props.onChangeMode(); }}>{props.title} } function Nav(props) { const lis = []; for(let i=0; i{t.title} ); } return {lis} } function Article(props) { return {props.title} {props.body} } function App() { const topics = [ {id:1, title:'html', body:'html is ...'}, {id:2, title:'css', body:'css is.. 2. props (속성) props(속성)을 html 태그 안에서 사용하려면 { } 안에 props를 넣어준다. function Header(props) { return {props.title} } function Nav() { return html css javascript } function Article(props) { return {props.title} {props.body} } function App() { return ( ); } export default App; props 를 이용하여 동적태그 생성하기 function Header(props) { return {props.title} } function Nav(props) { const lis = []; for(let i=0; i 1. 컴포넌트 만들기 function App() { return ( WEB html css javascript Welcome Hello, WEB ); } export default App; 위의 코드를 아래와 같이 컴포넌트로 만들어서 사용할 수 있다! 컴포넌트를 만들 때 이름은 꼭 대문자로 시작해야한다. function Header() { return WEB } function Nav() { return html css javascript } function Article() { return Welcome Hello, WEB } function App() { return ( ); } export default App; 리액트의 본질은 컴포넌트 !!!!!!! 출처 - https://www.youtube.com/watch?v=W.. 이전 1 다음