개발새발

import React, { useEffect, useState } from "react"; // KUCC 리액트 세션: 7.무한스크롤(클래스 컴포넌트 ver.)(https://infpidealistdeveloper.tistory.com/54)의 코드를 함수형 컴포넌트로 다시 짠 코드입니다. const Allitem = () => { const [state, setState] = useState({ productList: [], //상품의 배열 items: 10, //요청하는 상품의 끝 인덱스 preItems: 0, //요청하는 상품의 첫 인덱스 }); // state의 초기값 설정 useEffect(() => { //생명주기에서 componentDidMount, componentDidUpdate(mou..

출처: https://velog.io/@hyounglee/TIL-56 TIL 56 | React로 무한스크롤 구현 참고 자료 : React에서 Infinite Scroll 구현하기무한스크롤은 화면의 맨 아래까지 스크롤을 하면 새로운 컴포넌트가 랜더되는 형태이다. 페이스북, 인스타그램 등 다양한 사이트가 이러한 무한 스크 velog.io 무한스크롤: 화면의 맨 아래까지 스크롤을 하면 새로운 컴포넌트가 랜더되는 형태이다. ex. 페이스북, 인스타그램 등 => 불필요하게 수많은 데이터를 긁어오기보다는, 한번에 10-20개 정도의 포스트만 가져와서 스크롤 될 때마다 업데이트 되는 형식이다. => 물론 백엔드에서 정보를 받아와야 구현이 가능하지만 이분은 mock.json을 사용하셨다 [방법 #1. Class Co..

https://www.zerocho.com/category/React/post/579b5ec26958781500ed9955 (React) React의 생명 주기(Life Cycle) - 라이프사이클 안녕하세요. 이번 시간에는 React의 생명 주기에 대해서 알아보겠습니다. 갑자기 웬 생명 주기냐고요? React 컴포넌트는 생명 주기가 있습니다. 생애 주기 또는 라이프사이클(Life cycle)이라고도 많 www.zerocho.com 오늘 내용은 제로초님의 블로그에서 인용합니다. 더 원활한 이해를 위해 블로그에 있는 mount, update, unmount에 대해 한눈에 볼 수 있는 도표를 참고하시길 바랍니다. 1. Mounting 컴포넌트가 처음 실행되어 화면상에 나타나는 것을 Mount라고 표현합니다...

나중에 component를 사용할 때 name = ""로 property를 넣기 위해 사용 클래스 컴포넌트는 this.props.name 함수 컴포넌트는 props.name

1. React 설치 - node.js 설치 - 터미널에 아래 두 명령어 입력 - $npm install -g create-react-app : 처음에 react를 설치하는 방법 - $ create-react-app . : 다른 파일에서 react를 시작할 때는 $ 없이(내 터미널 환경 설정이 달라서 그런 걸수도 있다) create-react-app 폴더 안에 만들 react파일 이름 을 적어주면 된다 - $ npm start : 설치된 react를 브라우저와 연결하기 위해 사용한다 - src에 있는 html, js, css를 수정해서 사용하면 된다 cf. 2. app.js 수정하기 - class App extends Component{ render() { return ( 안에 내용만 수정하면 화면을 원..

react앱의 구성 블록 element component JS의 라이브러리 JS튜토리얼 살펴보기 1. JSX const element = Hello, world! 변수 html태그 => 문자열도 html도 아님 => JSX: JS를 확장한 문법 UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것 권장 React element를 생성한다 JSX란? React에선 이벤트(사용자가 화면에 하는 모든 행동)가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들인다 React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트"라..