Programming/React (6) 썸네일형 리스트형 [REACT] useEffect 에서 axios 사용 (async 에러 발생) 문제 : uesEffect 에서 async로 axios 사용 시 error 발생 아래와 같이 useEffect에 asycn로 사용 시 에러 발생 useEffect(async(e) =>{ const result = await axios.get('https://url.url'); console.log(result.data); } },[]); Warning: An effect function must not return anything besides a function, which is used for clean-up. It looks like you wrote useEffect(async () => ...) or returned a Promise. Instead, write the async function.. [React] Hooks에서 state 변경 시 re-render 방법 문제 출발점 : react 부모 component 밑에 child component간 데이터를 주고 받은 후 re-render 하려면 어떻게 해야하나? 기본 이해 : Class 기반 React JS Life Cycle constructor ▼ componentWillMount ▼ componentDidMount ▼ componentWillUnmount Import React from "react"; class example extends React.Component{ constructor(){ super(); console.log("constructor"); } componentWillMount(){ console.log("componentWillMount"); } componentDidMount(){ .. React - 4. Component 와 props/state 개요. 1. 컴포넌트 종류 (클래스/함수) 2. 컴포넌트를 다루기 위한 props와 state 1. 클래스형 컴포넌트 import React, { Component } from 'react'; class myName extends Component { render(){ return { My name is {this.props.name}. } } } export default myName; 1.1 props - props 는 부모 컴포넌트가 자식(하위) 컴포넌트에게 넘겨주는 값 - App.js 예) import React, { Component }from 'react' import myName from './myName'; class App extends Component{ render(){ return(.. React - 3. 프로젝트 기본 구조 및 hello world! 개요. 1. Index.html에서 최종화면 출력 2. APP.js (Component)를 통해 원하는 동작 수행 1. 기본구조 Index.html ... ... - Main 화면을 출력해주는 위치 Index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( , document.getElementById('root') ); - ReactDOM.render() + React Component (예, App.js)를 출력하기 위해서 사용하는 함수.. React - 2. react 프로젝트 생성 및 오픈 요약. 1. react 앱 생성 2. react 프로그램 실행 3. 프로젝트 오픈 1. Create react app - 시작 - 실행 - Windows PoweShell create-react-app hello-react - react 앱 생성, "create-react-acpp [App name]" 2. Execute React App. - 시작 - 실행 - Windows PoweShell cd hello-react yarn start - 생성된 폴더로 이동 - yarn으로 앱 실행 3. Open Project - Visual studio code 실행 - File - open folders ... - hello_react 폴더 오픈 (\user\hello_react) React - 1. Dev. Enviroment Setup 개요. React 설치를 위한 환경 셋업 1. 네트워크 애플리케이션 개발을 위한 Node.js 설치 2. 패키지 관리 모듈인 Yarn 설치 3. 코드 편집기인 Code Editor 설치 4. React PKG 설치 1. Install - Node.js - Download : nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org + LTS(Long Term Support)로 다운로드 - Node.js란? + 확장성 있는 네트워크 애플리케이션(특히 Server side) 개발에 사용되는 소프트웨어 플랫폼 + 작성 언어로 자바 스크립트를 활용하며 Non-blocking I/.. 이전 1 다음
