name https://images.velog.io/tags/React.png

# React

리액트(React)는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.

25924개의 포스트

TIL: React | [공식문서 읽기] 엘리먼트 렌더링 - 221206

엘리먼트는 React의 가장 작은 단위로 화면에 표시할 내용을 기술한다브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체로 쉽게 생성할 수 있다React DOM 은 엘리먼트와 일치하도록 DOM 을 업데이트 한다엘리먼트는 React 컴포넌트를 구성하는 구성

20분 전
·
0개의 댓글
·
post-thumbnail

22.12.06 - Virtual Dom

실제 DOM에 접근하여 조작하는 대신,이를 추상화한 자바스크립트 객체를 구성하여 사용 JavaScript를 이용해 DOM을 직접 조작하면, 변경 사항이 있을 때마다 리렌더링을 함매번 새롭게 구성하기 때문에, 렌더할 양이 많으면 속도가 느려지게 됨 (비용이 크다)실제 D

22분 전
·
0개의 댓글
·
post-thumbnail

Data Fetching

컴포넌트 내에서 필터링: 전체 목록 데이터를 불러오고, 목록을 검색어로 filter 하는 방법컴포넌트 내에서 필터링처음 단 한 번, 외부 API로부터 목록을 받아오고, filter 함수를 이용합니다.컴포넌트 외부에서 필터링: 컴포넌트 외부로 API 요청을 할 때, 필터

약 1시간 전
·
0개의 댓글
·
post-thumbnail

[TIL] React 공부

react 공부

약 1시간 전
·
0개의 댓글
·

221206_TIL

⭐️ slice() 함수는 배열로 부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용 ! ⭐️첫 번째 인사로 시작 인덱스, 두 번째 인자로 종료 인덱스를 받음. 그리고 시작 인덱스부터 종료 인덱스까지 값을 복사하여 새로운 값을 반환한다.☝️ arr.

약 1시간 전
·
0개의 댓글
·
post-thumbnail

[리액트] 헷갈렸던 개념들 정리하기 - Hook(useState, useEffect), 상태 관리, 생명 주기

리액트만의 특별한 개념, hook, 상태관리, 생명주기(Life Cycle) 에 대한 이해가 조금 부족한 것 같아서, useEffect와 useState를 공부하면서 해당 개념도 같이 이번 기회에 정리하고자 한다.보통 유저들의 정보는 서버의 데이터베이스에 저장된다. 예

약 1시간 전
·
0개의 댓글
·

To Do List

나는 사람들이 많이 사용하는 컨벤션을 사용할 것이다.사실 당장 중요한 것은 아니지만 나중에 프로젝트를 시작할 때 정하기 쉽지 않을까 싶기도하고, 그냥 과제 내용이 어려워서(그냥 이해 못한거임) 당장 할 수 있는 것을 하려고 정한다.component : PascalCas

약 1시간 전
·
0개의 댓글
·

React에서 reverse() 사용

약 2시간 전
·
0개의 댓글
·
post-thumbnail

[Next.js] Intersection Observer로 무한 스크롤 구현하기

Intersection Observer로 구현한 무한 스크롤

약 3시간 전
·
0개의 댓글
·

[React] dependency 배열의 값이 변화했지만 리렌더가 되지 않는 이슈

useEffect는 props 혹은 state의 변화에 응답한다.때문에 props, state가 아닌 값을 dependency 배열에 추가하여도 useEffect는 재동작하지 않는다.예를 들어 window.innerHeight 값이 변화할 때마다 useEffect가 실

약 3시간 전
·
0개의 댓글
·

[React] 전역 상태 관리 - Context Api

리액트에서 component가 데이터를 다루는 방법은 props, state, 그리고 context가 있다.이번 포스팅에서는 context에 대하여 알아보려고 한다.리액트에서는 props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해주게 된다.위의 그림을

약 3시간 전
·
0개의 댓글
·

[React] React Hooks - useState

Hook은 React 버전 16.8에 새로 추가된 요소이다.기존에는 Class 바탕의 코드로 React의 여러 기능을 사용해왔다. (상태 정의, 업데이트 등)Class 바탕의 코드는 로직을 재사용하기 어렵고, 복잡한 컴포넌트를 이해하기 어렵고, this 바인딩 등 문제

약 4시간 전
·
0개의 댓글
·
post-thumbnail

[React] 디자인에 도움되는 라이브러리 정리 (1)

프론트엔드 개발을 하다보면 정말 간단하고 쉽게 할 수 있는 기능이지만 조금 번거로울 때가 있습니다.. 그렇게 개발에 도움되는 라이브러리들을 모아서 공유해보고자 합니다.

약 4시간 전
·
0개의 댓글
·

React 환경 설정 방법(Node.js 설치)

node js란 서버 side javascript 실행환경 즉 서버에서도 java, c, python 등의 언어로 개발하던 application 을 javascript로도 개발할 수 있게 해준다. node js로 주로 만드는 application은 웹서버 appli

약 4시간 전
·
0개의 댓글
·

카카오 클라우드 스쿨 12월 6일

꼭 알아둬야할것 props > + 상위 컴포넌트가 하위 컴포넌트에게 데이터를 넘겨주고자 할때 사용 state > + 컴포넌트 내에서 생성해서 수정 과 삭제 가 가능한 개체로 변경이되면 컴포넌트를 리랜더링 ref > + 컴포넌트를 조작하고자 할때 생성 filter

약 4시간 전
·
0개의 댓글
·
post-thumbnail

[React]상태 관리 라이브러리(redux)

store에서 상태를 가진 단방향 상태 관리redux는 flux를 구현해놓은 구현체라고 볼 수 있다.action {type,payload} 존재reducer(state,action) => newStatestore(state lives) created by passing

약 5시간 전
·
0개의 댓글
·

react toastify

사용 시 반드시 최상위 컴포넌트(e.g., App.tsx)에서 위 css를 import 해야 함

약 5시간 전
·
0개의 댓글
·
post-thumbnail

관리자 페이지 프로젝트 개요

기업 담당자가 사용하는 어플리케이션 관리자 페이지어플에서 사용하는 배너, 메뉴얼 등을 관리하고 회원가입 시 돌보미가 입력한 정보를 확인해서 승인해주는 것이 주된 역할사용한 기술 스택👉 FrontEndTypescript ReactReact query👉 design l

약 5시간 전
·
0개의 댓글
·
post-thumbnail

React 입문 연습 (1)

연습용

약 6시간 전
·
0개의 댓글
·
post-thumbnail

React 성능 최적화를 위한 useMemo, useCallback

React 성능 최적화 1. useMemo 여기서는 users가 debs다. users가 바뀌지 않으면 기존의 값을 재사용하여 성능을 최적화한다. 2. React.memo 먼저 최상위의 App.jsx가 있다. Input과 SecondInput 컴포넌트를 품은 T

약 6시간 전
·
0개의 댓글
·