개발/react 생태계 썸네일형 리스트형 promise pattern in javascript, react.js javascript(react, next...)개발시 비동기는 거의 필수입니다. 그리고 콜백함수 지옥에 빠지지 않기 위해 async await 패턴을 많이 쓰죠. (callback) => { callback((callback) => { callback((callback) => { callback((callback) => { callback() }) }) }) } 오늘은 async await 사용대신, promist pattern을 이용해 비동기 함수를 직접 만들어볼까합니다. #대표적인 경우 let asyncFunc = new Promise((resolve) => { setTimeout(() => {resolve("Success!")}, 10000); //ms 단위이기에, 10초뒤 resolve를 실행합니.. 더보기 for문 error in javascript, react.js, cra(create-react-app) react는 javascript로 구성되어있습니다. 그리고 javascript는 for문을 빈번히 쓰는데요. for(let i = 0; i< max_len ; i++) { console.log(i) } for문에 대한 결과가 아예 뜨지 않을때가 있습니다. 위 경우 콘솔이 찍혀지지 않는 경우죠. 위 코드를 좀더 확장시키면 다음과 같습니다. let max_len = ob.length; //이때 ob는 객체 console.log(max_len) //undefined for(let i = 0; i< max_len ; i++) { console.log(i) } 네..... 객체의 길이를 바로 구하다니.... 바보였죠.... max_len이 정의가 undefined로 되니, for문 자체가 실행이 안되고 있었습니다.. 더보기 Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. input태그의 value를 this.state으로 지정할때가 있습니다. 하지만 수정도 안되고, 아래와 같은 에러가 뜰때가 있죠. 이는 value만 지정해주고 defaultValue나 onChange를 지정해주지 않았기 때문에 발생한다 쓰여있네요. #defaultValue 사용법 defaultValue은 위와 같이 해주면 됩니다. 하지만 화면에 대한 변화가 없으면 state은 변해도 그 값은 그대로 입니다. 가령 react-slick의 Slide에 this.state을 데이터로 사용할때 발생합니다. import React, { Component } from "react"; import Slider from "react-slick"; class test extends Component { this.stat.. 더보기 비동기 처리 in react 비동기: 요청 보내고 딴거 하다 응답오면 대답, 동기: 요청 보내고 기다리기. page이동 없이 데이터를 주고 받기 위해 주로 비동기 요청이 쓰입니다.(axios, xhr, fetch....) 오늘은 axios를 이용하는 두 형태를 보려 합니다. #callback함수 이용시 axios.post(url, data, { headers: { "Content-Type": `application/json`, }, }) .then((res)=> { console.log(res); }) console.log("응답 왔나요?") // 응답이 늦으면 "응답 왔나요?" 가 먼저 실행됩니다 응답에 대해 처리 하기 위해 callback함수를 이용한 형태입니다. 그런데 종종 res 값을 변수에 넣고 코드를 이어가고 싶을때가 있.. 더보기 비동기 처리 in react 비동기: 요청 보내고 딴거 하다 응답오면 대답, 동기: 요청 보내고 기다리기. page이동 없이 데이터를 주고 받기 위해 주로 비동기 요청이 쓰입니다.(axios, xhr, fetch....) 오늘은 axios를 이용하는 두 형태를 보려 합니다. #callback함수 이용시 axios.post(url, data, { headers: { "Content-Type": `application/json`, }, }) .then((res)=> { console.log(res); }) console.log("응답 왔나요?") // 응답이 늦으면 "응답 왔나요?" 가 먼저 실행됩니다 응답에 대해 처리 하기 위해 callback함수를 이용한 형태입니다. 그런데 종종 res 값을 변수에 넣고 코드를 이어가고 싶을때가 있.. 더보기 클래스간에 데이터 전달 (상위-> 하위, 하위-> 상위)in react react 개발시 컴포넌트간에 데이터 전송은 중요합니다. 특히 cra(create-react-app)와 같은 단일 thread에서 매우 중요합니다. 그래서 오늘은 위해 상위 -> 하위, 하위 -> 상위 컴포넌트간 데이터 전달 방식을 익혀볼까 합니다. 상위 -> 하위 class 상위 extends Component { render() { let data = 1 return( ); } } class 하위 extends Component { render() { console.log(this.props.data) // 1이 찍힙니다 return( 하위 컴포넌트 ); } } 위 코드와 같이 상위 컴포넌트에서 하위로 데이터를 전송해주려면 props를 지정해주면 됩니다.(이때 map함수를 이용해 여러 하위 컴포넌트를.. 더보기 react에서 infinite-scroll 이번 시간은 infinite-scroll을 구현할까합니다. infinite-scroll, react-infinite-scroll-component 들이 있는데 흠 구현이 안되더라고요..... react에서 window, document접근과 scroll eventlistener을 쓰기 어려워 약간 해맸는데요. 방법은 다음과 같습니다. //사용하고자 하는 component div 위치에 onScroll 이벤트를 등록시킵니다. row와 count관리를 위해 state도 등록시켜줍니다 class A extends Component { constructor(props) { super(props); this.state = { story: { count : "", data: "" } }; }; //초기값은 comp.. 더보기 this.function()와 this.function의 차이 cra(create-react-app)에서 개발시 api life cycle이외에 개별 함수를 만들때가 있습니다. class function extends Component { function() { console.log() } render () { return( hi ); } } 그리고 사용시 this.function을 이용하는데요 . (이때 this는 이 객체를 의미하고, 위 예제에서는 function을 의미합니다) this.function으로도 함수 실행과 전달?의 개념을 응용할수 있습니다. //a console.log("aa") //b () => { console.log("bb") } 위에서 a와 b경우의 차이는 무엇일까요? a는 console.log("aa")를 바로 실행하지만 b는 consol.. 더보기 이전 1 2 3 4 5 6 다음
