REACT (16) 썸네일형 리스트형 LifeCycle API (1) lifeCycle 은 리액트의 생명주기 입니다. 크게 3가지로 나눠집니다. 1.나타날 때 2.업데이트 될 때 3. 사라질때 -Mounting 컴포넌트가 화면에 나타날 때 -Updating 컴포넌트에 prop가 바뀌거나 state가 바뀔때 -Unmount 컴포넌트가 사라질 때 constructor 리액트가 실행될떄 가장먼저 실행되는 함수 하는 일은 State의 초기 설정 또는 컴포넌트가 만들어지는 과정에서 미리 해야되는 것들을 하는 작업들을 하는 것 getDerivedStateFromProps props로 받은 값을 state에 다가 동기화 시키고 싶을 때 또 마운팅 과정에서 나 또는 렌더 과정에서 Props가 바뀔때 사용됩니다. render 함수는 어떤 돔을 만들게 될지 내부에 있는 태그들에 어떠한 값을.. 노마드코더 useState useEffect 예제 import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; import Axios from "axios"; import "./styles.css"; function useInput(defaultValue) { const [value, setValue] = useState(defaultValue); const onChange = e => { const { target: { value } } = e; setValue(value); }; return { value, onChange }; } function useFetch(url) { const [payload, setpayload] = useState(null); .. 노마드코더 useState 예제 import React, { Component, useState } from "react"; import "./styles.css"; const App = () => { const [count, setCount] = useState(0); const [email, setEmail] = useState(""); const updateEmail = e => { const { target:{value} } = e; setEmail(value); }; return ( {count} setCount(count + 1)}>Increment setCount(count - 1)}>Decrement ); }; export default App; 노마드 코더 state 와 componentDidMount와 componentDidUpdate 예제 import React from 'react'; class App extends React.Component{ constructor(props){ super(props) console.log("hello") } state = { count: 0 }; add = () => { this.setState(current => ({ count:current.count +1 })); } minus = () => { this.setState(current => ({ count:current.count -1 })); }; componentDidMount(){ console.log("component rendered"); } componentDidUpdate(){ console.log("i just updated"); .. 노마드 코더 props , map 기본 예제 import React from 'react'; function Food({name , picture}) { return I like {name} } const foodILike = [ { name: "Kimchi", image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg" }, { name: "Samgyeopsal", image: "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg" }, { name: "Bibimbap", image: "ht.. 노마드 코더 props 기본 예제 import React from 'react'; function Food(props) { return I like {props.fav} } function App() { return ( Hellow!! ); } export default App; 내부에서 사용 할때는 아래로 import React from 'react'; function Food({ fav }) { return I like {fav} } function App() { return ( Hellow!! ); } export default App; axios 예제 useEffect (async ()=>{ const res = await axios.post("https://crunchdjango.com/recommendation/category/bestselling", { user: "user", }) setBestsell(res.data) } Grid list 예제 {bestsell && bestsell.length > 0 && bestsell.map((item, idx) => ( {item.cateNm} ))} 이전 1 2 다음
