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

# React

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

2530개의 포스트
post-thumbnail

TIL29.React는 무엇인가요?

'리액트'는 가장 인기있는 프론트엔드의 꽃인 리액트의 개념에 대해 알아보자. (리액트 무섭다...)리액트는 2011년 페이스북에 의해 만들어진 현재 가장 인기있는 자바스크립트기반 라이브러리이다. 기존의 방식으로는 복잡한 동적 웹페이지를 구현하는데 어려움이 있었다. 예를

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

[TIL] Redux-Saga 맛보기

리액트를 사용해서 무언가를 개발하다보면, 컴포넌트의 상태관리에 많은 신경을 써줘야한다. 작은 프로젝트의 경우 props를 이용해서 컴포넌트끼리 데이터를 교류해도 되지만, 프로젝트가 복잡해질수록 데이터 흐름을 추적하기 힘들어져서 많은 불편을 겪게된다. 그래서 나온것이 바

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

1. 기본 설정 및 mock data 활용🕺

현재 프로젝트에서 사용하는 데이터는 mock data 로 json-server 를 활용하여 구축스토어 ducks 패턴 활용참고 https://redux.js.org/introduction/getting-started - redux 공홈 https:

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

TIL 58 | 페이지네이션

리스트에서 데이터를 한번에 가져오는 것이 아니라 필요한 만큼, 또는 화면에 보이는 만큼만 백엔드에 요청하고 응답받아 사용하는 것을 의미한다.

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

카카오클론, 기억하고픈 코드 2 - 애니메이션

지난 검색창에 이어 이번에는 3일에 걸쳐 겨우 성공한! 애니메이션 코드를 기록해보고자 한다. 카테고리 및 유저 아이콘 버튼을 클릭시 나오는 모달창의 transition 효과, 메인에서 탭이 바뀔때 나타나는 효과 이렇게 두가지 애니메이션을 구현했다.

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

react -redux(thunk) case #3

이전포스팅까지에서는 tag.js라는 하나의 파일에서 action, reducer, thunk함수까지 모두 한번에 작성하였다.오늘은 좀 더 보기 편하게, 유지보수가 편하게! 리팩토링을 해보자! 🔥파일의 구성은 해당 컴포넌트 단위에서 쓰일 actions, reducer,

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

[JavaScript] React - useRef로 컴포넌트 안의 변수 생성

React useRef를 통한 컴포넌트 안의 변수 생성 > 컴포넌트가 리렌더링 될 때마다 기억할 수 있는 값을 관리하고 싶을 때, useRef를 사용할 수 있습니다. > 아래 예제를 통해서 어떻게 사용하는지 알아봅시다. >

약 15시간 전
·
0개의 댓글

propTypes

PropTypes 컴포넌트에서 전달받은 props의 타입을 확인가능하게 함 컴포넌트 파악에 도움이 된다 설치 리액트에 내장 되어 있기에 리액트만 설치되어 있다면 설치 필요X 사용 import PropTypes from "prop-types"; Greeting.js

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

React - mini app

연휴기간 react-hook, styled-components 연습을 위해 CRA를 사용하여 간단한 Todo app을 만들보았다. TodoGithubuseState()를 사용하여, 초기값으로 비어있는 Object를 선언했다.추가된 항목들의 완료 / 삭제가 원활하게 이루

약 16시간 전
·
0개의 댓글

React

React 이해!

약 17시간 전
·
0개의 댓글

[TIL] 013. React command

[TIL] 013. React

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

React - State Hook

React Hook을 이용하면 Class를 작성할 필요없이 state와 여러 React의 기능을 사용할 수 있다.그중에서 state hook은 Functional Component속에서 state를 사용할 수 있도록 해주는 hook이다.state hook은 useSta

어제
·
0개의 댓글
post-thumbnail

TIL DAY.29 [React] Menu Tab 구현해보기!

오늘은 사이트에서 자주 사용되는 기능인 Menu Tab에 대해서 복습하는 시간이다. 메뉴 탭이 바뀌는 것에 따라 보여지는 정보도 달라지는 경우가 아주 많다, 그렇다면 이것을 코드로 효율적으로 구현 할려면 어떻게 해야할까?바로 객체에 특정 값을 맵핑하는 테크닉을 통해 좀

어제
·
0개의 댓글
post-thumbnail

Digi-Weather

외부API를 이용한 일기 예보 웹 애플리케이션

1일 전
·
0개의 댓글
post-thumbnail

Visualizing Profiling Data

Custom Sampling Profiler 를 통해 추출한 데이터를 시각화 및 웹어플리케이션화

1일 전
·
0개의 댓글
post-thumbnail

[React] Component LifeCycle

모든 리액트 컴포넌트에는 라이프 사이클(생명주기)이 존재한다. 컴포넌트를 처음으로 렌더링 할 때, 컴포넌트를 업데이트 하기 전 후로 어떤 작업을 처리해야 할 수도 있는데, 이럴 때 라이프사이클 매서드를 사용한다. (클래스형 컴포넌트에서만 사용)마운트 : 페이지에 컴포넌

1일 전
·
0개의 댓글

react 컴포넌트 작성규칙

다음과 같은 컴포넌트를 통해 컴포넌트 작성시 권장되는 것들을 알아보려 합니다.이 코드를 하나씩 뜯어보자면

1일 전
·
0개의 댓글
post-thumbnail

react - redux(thunk) case #2

상태관리를 redux-thunk를 통해 store에서 Data를 가공 후 관리하도록 변경해 보았다.💡해당 포스트에서는 벨로퍼트님의 redux 사용법을 토대로 코드를 작성했습니다.FILTER_DATA type을 정의했다.filterData라는 이름으로 action 함수

1일 전
·
0개의 댓글
post-thumbnail

[React] Pagination (Query string)

페이지네이션은 목록형 UI에서 데이터를 한 번에 가져오는 것이 아니라 필요한 만큼, 또는 화면에 보이는 만큼만 백엔드에 요청하고 응답받아 사용하는 방식을 말한다. 게시판처럼 1~10페이지가 있는 형식, 인스타그램에서 가장 하단의 스크롤로 내려왔을 때 새로운 데이터를 가

1일 전
·
0개의 댓글
post-thumbnail

react -redux(thunk) case #1

상태관리를 redux-thunk를 통해 fetch를 받고 store에서 metaData를 관리하도록 변경해 보았다.💡해당 포스팅에서는 ducks 스타일로 코드를 작성하였습니다.GET_DATA type을 정의했다.getData라는 이름으로 action 함수를 정의했다.

1일 전
·
0개의 댓글