React (6) 썸네일형 리스트형 React Infinite Scroll (무한 스크롤) 구현하기 🍀 Infinite Scroll ? infinite scroll은 브라우저의 하단으로 스크롤을 하면 사용자가 어떠한 액션(클릭)을 하지 않아도 알아서 이미지가 나오도록 처리하는 것 입니다. 이러한 것이 가능하게 하려면 스크롤이 하단부에 왔음을 감지할 수 있어야하고, 감지 했을 때 다음 page의 사진을 불러오는 작업(pagination)을 수행하는 함수를 실행해야 합니다. 크게 두가지 방식이 있습니다. (덜 효율적인) 기존 방식 웹 브라우저에서 제공하는 api에는 스크롤(event)을 할 때 어떤 함수를 실행되게하는 addEventListener와 어떠한 element의 content가 수직으로 얼마나 스크롤되었는지를 픽셀 단위의 수로 나타내주는 Element.scrollTop 프로퍼티가 있습니다. 그렇.. [번역] Why Not To Modify React State Directly 왜 state를 직접 수정하지 않는 이유 모든 사람들이 `state`를 절대로 직접 바꾸지 말고 언제나 `setState`를 호출하라고 합니다. 하지만 왜 그렇게 말하는 것일까요? 벌써 시도해보셨다면 아마 아무런 나쁜일이 생기지 않는다는 것을 눈치채셨을겁니다. 만약 `state`를 직접 수정하고 `this.setState({})` 혹은 `this.forceUpdate()`를 호출한다면 모든것이 괜찮아 보일겁니다. this.state.cart.push(item.id); this.setState({ cart: this.state.cart }); // renders like normal! maybe? 두가지 이유에 있어서 이것은 나쁜 생각입니다. (이것이 실제로 해당 예시에서 그리고 다른 상황에서 작동이 하더라도 말입니다.) (`this.state... [React 기초 문법] #4 event handling(이벤트 핸들링) 이벤트란? 사용자가 웹에서 DOM 요소들과 상호 작용하는 것을 event라고 한다. 사용법은 HTML에서 이벤트를 작성한것과 유사하나 몇가지 차이점이 있다. 이벤트 이름은 카멜케이스로 작성함. DOM요소에만 이벤트를 설정할 수 있음.(component에 직접적으로 이벤트를 설정 할 수 없음.) 자주 쓰는 이벤트 핸들링(input tag와 onChange) 클래스형 component ver. import React, { Component } from "react"; class App extends Component { state = { name: "", }; render() { return ( { this.setState({ name: e.target.value, }); }} /> ); } } export.. [React 기초 문법] #3 state와 props props와 state의 의미 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값으로 컴포넌트 내에서 읽을 수만 있다. 따라서 props를 바꾸려면 부모 컴포넌트에서 바꾸어야만 한다 . 공식문서에 의하면 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다. 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수함수 (입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 함수)처럼 동작해야한다. 라는 말이 있다. 사용자의 액션, 네트워크의 응답 및 다른 요소에 대한 응답으로 시간에 따라 props가 컴포넌트 내에서 바뀌어야만 하는 상황이 있는데 이때 사용하는 것.. [React 기초 문법] #2 클래스형 컴포넌트 + props 컴포넌트의 기능 데이터를 바탕으로 UI를 만들어 줌. 라이프사이클 API를 이용하여 컴포넌트가 화면에 렌더링 될 때(didmount), 사라질 때(unmount), 업데이트 될 때(didupdate) 주어진 작업을 처리할 수 있음. legacy가 되어버린, 하지만 배워야하는 클래스형 컴포넌트 현재 코드스테이츠에서는 함수형 컴포넌트를 알려주고, 이를 바탕으로 스프린트를 진행한다. 하지만 리액트관련하여 검색해보면 대부분의 자료가... 클래스형이다! 특히 stackoverflow에서는! 취업을 하려면 둘 다 할 줄 알아야할 것이다. 분명. 아무튼 클래스형은 아래와 같은 형태로 되어있는데... import React, {Component} from 'react'; class App extends Componen.. [React 기초 문법] #1 intro + JSX 몇 가지 규칙 Intro 리액트가 참 재밌는데, 구현해보고 싶은게 많은데 뜻대로 움직이지 않는 그리고 예측하지 않은 결과가 반복되면서 내가 원하는 기능과 모습을 구현하기 위해서는(재밌는 것을 만들기 위해서는...) 기초 문법을 반드시 잘 다져야겠다라고 생각하여 새로운 카테고리를 팠다. 모래 위의 성보다는 튼튼한 반석위에서 리액트라는 성을 지으리라 JSX 몇 가지 규칙 컴포넌트의 여러 요소들은 반드시 하나의 부모 요소로 감싸여져 있어야 한다. 여기서 하나의 부모 요소는 반드시 태그가 아니어도 좋다. import React, {Fragment} from "react"; 한 후 를 사용해도 된다. 대신 을 사용할 수도 있다. 참고로 는 import를 안해도 되었기에 나는 이것을 더 많이 사용한 것 같다. 자바스크립트 표현식.. 이전 1 다음
