리액트 컴포넌트 쉽게 만들기 ES7 extension 설치해주고 파일 생성 후 rfce + 탭 눌려주면 함수형 컴포넌트를 바로 만들어준다😃 rce : class componet rafce : allow function component rfce : function component

useState 항상 두개의 vlaue return 첫번째는 item이라고 이름 아무렇게 주고, 두번째는 값을 변경하게 하자 const [item, setItem] = useState(1); initial state를 1이라고 해둠 두가지 value모두 아무 이름 해도됨 일단 이렇게 쓰면 useState를 부른 곳에 값을 return해 줄 수있음 useState hook을 사용해 클래스형에서 this.state를 사용하는것보다 훨씬 간단하고 깔끔하게 만들 수 있다. useEffect는 componentDidmount역할도하고 componentWillUnmount, componentDidUpdate역할도 한다.

yarn add axios // import axios import axios from "axios"; componentDidMount에서 api url을 불러와준다. 네트워크에서 잘 들어와있는 것을 확인할 수 있다. 이젠 axios가 주는 이 데이터를 잡아야한다. 하지만 axios.get은 느리기때문에 자바스크립트에게 componentDidMount함수가 끝날 때까지 약간 시간이 걸릴 수 있다고 말해야한다. 방법1. componentDidMount앞에 async을 추가해준다. 방법2. 함수를 만들어준다. 1. isLoading: true 2. true이기때문에 Loading... render해준다. 3. application이 mount된 후, getmovies function호출 (componentD..

- Mount = born constructor(): 자바스크립트에서 클래스를 만들때 호출 render(): componentDidMount(): 랜더링 후 - Updating state를 변경할때 componentDidMount() { - Unmounting = component dies(change page, replace component using state..등) componentWillUnmount() -> when component goes away 렌더링 후 Loading...이라고 뜨고 componentDidMount에 6초후에 isLoading:false로 바뀐다. 그러고 다시 isLoading이 False이기때문에 렌더링되면 화면은 We are ready로 바뀐다.

state는 보통 동적데이터(dynamic data)와 함께 작업할때 만들어진다. 변하는 데이터, 존재하지않는 데이터, 생겨나고 사라지는 데이터... state에 변할 데이터를 넣어주고 렌더링할땐 {this.state._______}를 해준다. 이제 이 데이터를 어떻게 변화를 줄것인가.. add, minus함수를 만들고 onClick에 심어준다. 콘솔로 확인하면 잘 찍혀있다. 이제 이 state를 업데이트 시켜주자 useState를 사용해준다!! 이제 Add버튼을 누르면 0이었던 count는 1이되고, minus버튼을 누르면 -1이된다. setState를 사용하지않으면 새 state와 함께 render function이 호출되지않는다. 더 스마트한 방법으로는, current.state를 사용하면 현재의 ..