배운 것/react & reacthooks (6) 썸네일형 리스트형 훅스에서 setState는 비동기다 제로초님 강의 - 웹 게임을 만들며 배우는 React 2-2 일반 클래스 컴포넌트로 사용했던 setState this.setState((prevState) => { return { result: '정답! ' + prevState.result, firstNumber: Math.ceil(Math.random() * 9), secondNumber: Math.ceil(Math.random() * 9), value: '', beforeValue: this.state.value } }); 리액트에서 state 상태 변화가 일어날 때 setState 함수를 사용하는데 이 함수는 비동기식이라 카운트 함수와 같이 이전 값에 변화를 줘야 하는 경우 부작용이 일어날 수 있다. 그래서 setState 함수 안에 preveSt.. 리액트 커스텀 훅 사용하기 => useTab const contentAPI = [ { tab: "section 1", content: "i am the content of the section1" }, { tab: "section 2", content: "i am the content of the section2" } ]; const useTab = (initialTab, allTabs) => { // allTabs 이 배열이 아닐 때 함수 종료 if (!allTabs || !Array.isArray(allTabs)) { return; } const [currentIndex, setCurrentIndex] = useState(initialTab); return { currentItem: allTabs[currentIndex], changeItem:.. 리액트 커스텀 훅 사용하기 => useInput 리액트 훅으로 나만의 커스텀 함수를 만들 수 있다. import React, { useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; // mr.라는 값이 기본으로 들어가고, // 인풋값 변화시 event.target이 콘솔에 찍히는 커스텀훅 const useInput = initialValue => { const [value, setValue] = useState(initialValue); const onChange1 = event => { console.log(event.target); }; return { value, onChange1 }; }; const App = () => { // useInput 이라.. 리액트 훅 (Reack Hooks) 간단 소개 리액트 훅이란? 훅은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 해주는 기능이다. 즉, 기존에 훅스가 생기기전에 우리는 state를 함수형 컴포넌트에서 사용할 수 없어서 state를 가지고 작업하고 싶으면 클래스 컴포넌트에서 사용했다. 그럼... 함수형 컴포넌트와 클래스 컴포넌트의 차이는? 생김새부터 찾아봤다. 함수형 컴포넌트 const App = () => { return ( ... ) } 클래스형 컴포넌트 class App extends React.Component { render () { return ( ... ) } } 위의 코드만 봐도 함수형 컴포넌트가 훨씬 직관적이고 짧다. 버튼을 누르면 숫자가 증가하는 예제를 통해 조금 더 자세히 알아보자. class App extend.. [react] axios, yts api 목표: yts api 가 제공하는 최신 영화 데이터를 axios로 받아 화면에 그려줄 것이다. import React from "react"; import './App.css'; class App extends React.Component { state = { isLoading : true, movies : [] }; componentDidMount(){ }; render(){ const {isLoading } = this.state; return {isLoading ? "Loading..." : "we are reay"} }; }; export default App; 이전 게시글 소스에 이어서 yts api 가 제공하는 최신 영화 데이터를 axios로 받아 화면에 그려줄 것이다. (*https://yt.. [react] state, componentDidMount 목표: loading 텍스트가 3초 뒤에 we are ready 로 바뀌는 화면 리액트를 시작할 때 보이는 기본적인 코드 구조는 아래와 같다. import React, { Component } from 'react'; import './App.css'; class App extends Component { render(){ return {isLoading ? "Loading..." : "we are ready"} } } export default App; 리액트는 자바스크립트 기반의 모듈이기에 div 속 { } 에 함수를 넣어줄 수 있다. { isLoading ? "Loading..." : "we are ready" } isLoading 이 true 이면 Loading... 을 화면에 찍어주고, fals.. 이전 1 다음
