React-virtual? React-virtual 라이브러리는 Tanstack 이라는 단체에서 관리되는 DOM 가상화 라이브러리이다. 리액트의 옛 공식문서에서 확인할 수 있 듯, 거대한 크기의 리스트를 화면에 랜더링할 경우, "가상화" 라는 방법을 통해 최적화 하는것을 권한다. 사용 필요성 모든 SNS 에 필수적으로 들어가는 기능인 무한 스크롤 (Infinite scroll) 은 무한 스크롤은 웹 페이지에서 사용자가 스크롤을 내릴 때 자동으로 추가 콘텐츠를 로드하여 페이지를 끊임없이 확장하는 기술로, 스크롤을 끝까지 내리면 새로운 콘텐츠가 동적으로 로드되어 사용자 경험을 향상시킨다. 또한 페이지 이동 없이 사용자가 머무는 시간을 늘려 사용자 유지율을 향상시킬 수 있어 웹 어플리케이션에 자주 사용되는 기..

리액트에서 컴포넌트의 상태를 관리하기위해 useState라는 훅을 사용한다. 사용법 1. Import import {useState} from "react" 먼저 상단에 위와같은 코드를 사용해서 useState라는 Hook을 사용할 수 있게 import한다. 2. 정의 const [state,Setstate] = useState("") 컴포넌트의 상태를 만들어주려면 위와같은 형태로 함수내부에 스테이트를 정의 해주면된다. const [바꿀스테이트 , 스테이트를바꿔주는 함수] = useState(초기값) 배열의 첫번째인자는 스테이트로 사용할 변수를 적고, 배열의 두번째 인자로는 스테이트를 변경할 함수를 적게되는데 state값을 state를 바꿔주는 함수없이 임의로 바꿀경우 오류를 일으킬수 있으니, 반드시 상..

react 컴포넌트는 states(상태) 와 props (속성)을 가질 수 있다. Props props 는 변하지않는 외부로부터 전달받은 속성을 의미한다. 성별, 이름과같이 변하지 않는 속성에 해당하며 부모 컴포넌트로부터 전달받은 값이다. 리액트는 단방향, 하향식의 데이터 흐름을 지향하는데 이에 맞게 Props는 함부로 변경될 수 없는 읽기전용 객체이다. Props 를 전달하는 방법 1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다. 2. props를 이용하여 정의된 값과 속성을 전달한다. 3. 전달받은 props를 렌더링한다. function Article(props){ return( {props.title} {props.contents} ) } function App(){ retu..

기존 개발방식의 문제 먼저 리액트는 3가지의 특징을 가지는데 선언형이고, 컴포넌트기반의 범용성이 높은 라이브러리라고 할 수 있다. 기존의 HTML, CSS를 이용할 때에는 코드의 재사용성이 매우 떨어졌고, 코드가 길어질수록 유지보수의 어려움이 많았다.. 이는 기존에 HTML만 사용했을 때, 하나의 기능을 구현하기 위해 요소들을 만들었을 때 이를 재사용하지 못하고 다시 새로운 코드를 작성해야해서 그렇다. 리액트의 특징 [컴포넌트 기반] 버튼 하나를 만들더라도, 그 버튼을 다른 곳에 재사용하기 위해서는 버튼태그를 복사해서 일일이 새로운 HTML파일에 붙여넣기를 해야했고, 복사된 태그는 원본과의 종속성이 없어 추후에 버튼의 디자인이 바뀌거나 기능이 바뀌었을 때 모든 요소를 하나하나 고쳐줘야 한다는 꽤나 비효율..