렌더링 이전에 브라우저 렌더링 과정에 대해서 배운적이 있는데 리액트에서도 이와 유사하게 렌더링이 이루어지곤 한다. 리액트에서 렌더링(Rendering)은 컴포넌트가 state와 props의 값을 기반으로 UI를 생성하고 DOM에 결과를 업데이트하는 과정이다. 리액트에선 크게 3가지 방법으로 렌더링이 발생하곤 한다.1. 초기 렌더링 : 컴포넌트가 처음 화면에 나타날 때 발생 2. 업데이트 렌더링 : 상태(state)나 속성(props)가 변경될 때 발생- setState가 실행되는 경우- useState의 setter가 실행되는 경우- useReducer의 dispatch가 실행되는 경우- 컴포넌트의 keyprops가 변경되는 경우 따라서 key를 임시의 index로 지정하면 안되는경우가 이 경우에 해당된..

함수형 컴포넌트이전 시간에 배운 클래스형 컴포넌트와 달리 함수 형태로 정의되며, 더 간결하고 직관적인 방식으로 UI를 표현이 가능함 특징생명주기 메서드의 부재 : props를 받아 단순히 리액트 요소만 반환하는 함수임함수형 컴포넌트와 렌더링된 값 : 클래스형 컴포넌트의 props는 this로부터 가져오고 this가 가리키는 객체의 경우 변경이 가능하기에 변경된 값을 읽어 render을 비롯한 다른 메서드가 실행된다. 반면 함수형 컴포넌트의 경우 this에 바인딩된 props가 아닌 props자체를 받기에 값이 변경 불가하고, 해당 값을 그대로 사용하게 된다.함수 형태로 정의 :함수형 컴포넌트는 단순한 JavaScript 함수로 정의됩니다. JSX를 반환하며, 반드시 return 문 안에 UI 요소를 포함..

현재는 비교적 함수형 컴포넌트가 많이 사용되지만서도 아직까지 클래스형 컴포넌트 형태를 사용하거나 기존 만들어진 클래스형 컴포넌트 형태를 유지하는 곳도 많다 클래스형 컴포넌트는 ES6의 클래스를 사용하여 정의되며, 생명주기 메소드를 사용할 수 있으며 내부 상태를 가질 수 있어 데이터 변경에 따른 렌더링을 감지 및 관리할 수 있다 클래스형 컴포넌트의 구조 1. 클래스를 선언하고 만들고 싶은 컴포넌트를 extends한다.(React.Component 또는 React.PureComponenet)import React from 'react'class Samplecomponent extends React.Component { render() { return Sample Component }} 2. p..

Infinite Scroll 무한스크롤화면을 아래로 스크롤 할 때 콘텐츠가 지속적으로 로드되어야 하는경우 페이지네이션 대신 무한스크롤이 사용된다 장단점으로는 다음과 같다 장점1. 새로운 콘텐츠 조회의 편리함 : 다음, 더 보기와 같은 상호작용 없이 바로바로 로드가 가능 2. 모바일 기기에 적합 : PC에서도 마찬가지로 작은 뷰 구성엔 적합한 경우가 빈번 단점1. 특정 콘텐츠 조회의 어려움 : 특정 위치의 콘텐츠를 조회 및 기억하기가 어려움 2. 페이지 속도의 감소 : 콘텐츠가 방대할 수록 로드하는데에 더 많은 시간이 소요됨 3. 푸터가 fixed가 아닌 경우 조회 지연 장단점이 명확한 만큼 내가 구현하려는 곳의 성질에 맞게 체계적이고 조건에 맞는 컨텐츠가 조회되어야하는 경우엔 페이지 네이션, 단순히 무한..