개발 썸네일형 리스트형 클래스간에 데이터 전달 (상위-> 하위, 하위-> 상위)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.. 더보기 Uncaught SyntaxError: Unexpected identifier 개발하다보면 다양한 이유로 발행하는 에러 문구들이 있습니다. 예상치못한 토큰, 예상치못한 식별자. 저또한 node로 개발하던 중에, 함수 확인을 위해 개발자 도구를 이용했는데요. 혹시 위 에러가 왜 발생하신거 같나요?? 참 어이없었습니다. 에디터에 작성하는 버릇때문에 " ; "를 빼먹었더군요. 개발자 도구로 진행시 ; 잊지마세요;; 더보기 axios 비동기 post 전송 react, next모두 비동기 처리가 필수입니다. xhr, fetch로도 가능하지만 오늘은 axios에서 json데이터를 전송하는 방식을 익혀볼까 합니다. axios.post(url, formData, { headers: { "Content-Type": `application/json`} } ).then((res) => { console.log(res); }); post전송시 보내는 url, 데이터, req.header를 parameter로 넣어주면 됩니다.(get을 보낼시 데이터가 없을 경우 두번째 parameter를 null로 해주시면 됩니다.) 이때 여기서 주의해야할게 'formData' 형식입니다. 이미지, 영상들은 'event.target.files[0] '와 같이 파일을 넣고 header를 .. 더보기 fs.readFile error in compress-image, imagemagic cra(create-react-app)로 작업하던중 이미지와 영상을 압축하기 위해 compress-image, imagemagic같은 모듈들을 사용했습니다. 그런데 항상 뜨는 문구는 ``` fs.readFile is not a function ``` fs를 아예 인식못한다는 에러만 뜨니...이게....뭐하자는건지... 그러던중 깨달은 사실 '파일을 읽고 써야하는 fs는 브라우저에서 작동이 안된다!' 결론, node와 같은 벡단에서만 사용이 가능하다. 저처럼 CRA에서 사용하시려는 분이 계신다면.... 얼른 스킵하세요. 모듈들을 모두 컴파일하고 돌아가는 cra에서는 fs사용이 불가합니다!! 더보기 Uncaught TypeError: func is not a function at b (<anonymous>:11:6) at <anonymous>:1:1 const b =(a, func) => { func(a); } b(1, console.log(123)); 위 경우에서 b(a())을 실행할 경우 아래 에러가 발생합니다. ``` Uncaught TypeError: func is not a function at b (:11:6) at :1:1 ``` 이는 console.log()를 인자로 전달해야하는데, 실행을 했기때문에 발생하는 오류입니다. 수정 코드는 아래와 같습니다. const b =(a, func) => { func(a); } b(1, () => { console.log(123) }); 함수를 파라미터로 넘겨줄때, 실행하면 안된다는 점 잊지마세요~ 더보기 multi export in cra(create-react-app) export {}, export default, react에서 모듈을 export하는 방법은 많습니다. 다양하게 쓰여 처음에 저에게도 매우 어려웠는데요. 제가 느낀바로, export는 import와 상응하는구나 였습니다. export {Module} => import * a from "...path", 사용시 a.Module export default Module=> import Module from "...path" 본론으로 넘어가, 프로젝트를 더 진행하다보면 모듈의 갯수가 많아집니다. 하지만 늘어나는 모듈만큼 js파일을 늘리는건 미래 유지보수가 힘들어집니다. 그래서 한페이지 안에서 여러 모듈을 export하는 방법을 소개할까 합니다. 사실 정답은 위에 있었습니다. export {module1, mod.. 더보기 이전 1 ··· 14 15 16 17 18 다음
