# Tech/React (13) # Tech/React [번역] 리액트로 고성능 무한 스크롤 구현하기 이 게시글은 [Akshay Sharma]가 작성한 [Building High-Performance Infinite Lists in React]의 번역본입니다. 개요 인터넷은 무한 스크롤(Infinite scroll)을 적용한 제품들로 넘쳐나고 있습니다. 무한 스크롤은 정보의 소비를 매우 쉽고 중독적으로 만드는데, 트위터나 인스터그램같이 타임라인이나 피드를 소비하는 제품에 매우 적합하죠. 하지만, 자바 스크립트로 무한 스크롤을 구현하는 것은 꽤 어렵고, 특히 각각의 피드가 수천개의 구성요소로 구성되어있다면 문제는 더 복잡해집니다. 일단 문제들을 한번 나열해봅시다. 문제점 기존의 컴포넌트가 리사이징될 때, 렌더링이 매우 느려진다. 스크롤을 할 때마다 랙이 걸린다. 수천개의 컴포넌트로 가득찬 DOM은 브라우저.. 2020. 2. 14. 14:26 # Tech/React Next.JS에서 동적 세그먼트 사용하기 Dynamic Segment 동적 세그먼트란 /user/:id/:operation에서 id와 operation처럼 경로에서 사용되는 변수를 말하며, 쿼리 문자열 방식보다 경로명이 좀 더 깔끔해지는 효과를 얻을 수 있습니다. 동적 세그먼트는 여러 형태로 쓰일 수 있는데, 살펴보면 대부분 아래의 형식입니다. 1. 경로의 뒤에 쓰이는 경우. /user/:id 2. 경로의 중간에 쓰이는 경우. /user/:id/edit 3. 혼합 형태 user/:id/edit/:attr 위와 같은 동적 경로를 Next.js에서 어떻게 구현하는지 차근차근 살펴봅시다. 경로의 뒤에 쓰이는 경우 pages 폴더에서 대괄호로 감싸진 폴더나 파일은 동적 세그먼트로 취급됩니다. 즉, /user/:id를 표현하고 싶다면, 아래처럼 폴더구조.. 2020. 1. 19. 22:59 # Tech/React [Typescript React] 상태 끌어올리기 공통된 상태는 끌어올리자 어떤 컴포넌트들은 본질이 같은 데이터를 보여주어야 할 경우가 있습니다. 화씨와 섭씨 변환기가 대표적인 예시인데,둘 중 하나를 바꾸면 반대쪽도 바뀌어야 하기 때문이죠. 사실 화씨와 섭씨의 본질 데이터는 같습니다.본질 데이터를 공유할 수 있도록 제어되는 컴포넌트 기법을 활용하면 되겠군요. 공통된 상태를 공통 조상의 상태로 끌어올리는 것.이것을 상태 끌어올리기라고 합니다. 2019. 12. 7. 14:13 # Tech/React [Typescript React] 컴포넌트 제어 form 요소는 또 다른 내부 데이터를 갖는다. 리액트에서 제공하는 HTML 컴포넌트 중 form 요소는 특별하게 작동합니다.폼 요소 내부에 담긴 데이터는 this.state와는 다르기 때문이죠. 아래의 코드를 한번 살펴볼까요? interface Prop {} interface State { name: string; } class NameForm extends React.Component { constructor(prop: Prop) { super(prop); this.setState({ name: "" }); } render() { return ( ); } } 위 코드에서 this.state.name와 #name.value는 따로 놉니다.사용자가 폼의 값을 바꾸어도 컴포넌트의 상태는 변경시킬 수 없죠... 2019. 12. 7. 13:03 # Tech/React [Typescript React] 리스트 컴포넌트 컴포넌트를 배열에 담아 렌더링하자 여러개의 리액트 객체를 표시해야 할 때는, JSX 문법에 배열을 사용할 수 있습니다.각각의 컴포넌트 타입이 달라도 동작하며, 특히 리스트를 보여줘야 하는 컴포넌트를 만들 때 유용합니다. let list: ReactNode[] = [ Hello, React!, Installation, First, Download the library from the link below. ]; let element = {list}; ReactDOM.render(element, document.getElementById("app")); 이런 사용방법은 리스팅아이템li을 쉽게 출력할 수 있도록 도와줍니다.아래는 순서없는 리스트 태그ul의 예시입니다. HTML : Lorem Ipsum Dolor.. 2019. 12. 7. 02:42 # Tech/React [Typescript React] 상태 관리 라이브러리 깊숙한 곳에 숨겨진 함정 클래스 컴포넌트에 있는 setState 메소드는 주의해야 할 특징을 가지고 있습니다.쉽게 설명하자면 병렬로 처리하지만, 여러개가 묶일 때 까지 미룬다. 입니다.비동기로 작동한다. (=상태가 즉시 변경되지 않는다.)최적화를 위해 여러 setState를 묶어서 처리할 수 있다. 아래의 카운터 컴포넌트를 살펴볼까요? interface Props { delta: number; } interface State { count: number; } class Counter extends React.Component { private intervalID: any; constructor(props: Props) { super(props); this.state = { count: props.delt.. 2019. 12. 6. 15:16 # Tech/React [Typescript React] 조건부 렌더링 조건부 렌더링 이미 이전 포스트에서 조건부 렌더링에 대한 대부분의 이야기를 마쳤습니다.이 포스트는 조건부 렌더링에 대해 이야기한 부분만 모아놓은 글입니다. 1.대문자로 시작하는 변수에 컴포넌트를 담는 테크닉을 응용하면 동적으로 컴포넌트를 결정할 수 있습니다.import React from "react"; class LogoutPannel extends React.Component {} class LoginPannel extends React.Component {} let isLogin: boolean = false; let Pannel = isLogin ? LogoutPannel : LoginPannel; let element = ; 2.true, false, undefined, true는 JSX 안에서.. 2019. 12. 6. 14:32 # Tech/React [Typescript React] 이벤트 핸들링 JSX 태그에 이벤트 핸들러 달기 JSX 태그에 이벤트 핸들러를 달고싶다면, 아래의 3가지만 기억하세요.나머지는 HTML 태그처럼 사용하시면 됩니다!문자열 대신 함수를 전달합니다.이벤트 핸들러 함수의 이름은 lowerCalmelCase으로 짓습니다.이벤트 핸들러 함수의 첫 번째 인자는 this로 바운딩해야 합니다. html + js : function toggleLasers(){ ... } JSX : interface ToggleState { isToggleOn: boolean; } class Laser extends React.Component { constructor(props: ToggleState) { super(props); this.state = { isToggleOn: props.isTogg.. 2019. 12. 6. 14:16 이전 1 2 다음
