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

# React

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

3171개의 포스트
post-thumbnail

React - Notion (2)

1) / , /members, /members/:id 페이지 라우팅 설정2) Grid를 이용한 Card배치3) 데이터 로딩중 설정4) 게시글 CRUD(Create / Read / Update / Delete): 내용이 비어있는 Card를 추가하는 기능(MemberLis

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

팀 프로젝트...(자랑..)

첫 팀 프로젝트가 끝났다\~~!! 하고 싶었는것도 정말 많았고, 시간 부족으로 인하여 못한것도 정말 많았다. 이 기간동안 우리가 만든것을 자랑하고 싶다.우리의 팀명은 프랜디!! 팀 이름으로도 유추할 수 있겠지만 우리 팀은 브랜디라는 싸이트를 클론 코딩을 하게 되면서 팀

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

React - Notion (1)

: SOPT 27th WEB 파트의 파트원 소개 페이지를 만들어 보기1) / , /members, /members/:id 페이지 라우팅 설정2) Grid를 이용한 Card배치3) 데이터 로딩중 설정4) 게시글 CRUD(Create / Read / Update / Del

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

React | BRANDI 클론 프로젝트 후기

trandi는 brandi 여성 전문 쇼핑몰 이커머스를 클론해본 프로젝트이다.위코드 5-6주차 총 12일에 걸쳐 1차 클론 프로젝트가 끝났다.프로젝트에 참여한 인원은 프론트엔드 2명, 백엔드 3명 총 5명으로 구성되어 있다.우리 기수는 다른 기수들과 달리 프론트가 백엔

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

React Hooks

리액트를 사용할때 사용하는 두가지 컴포넌트 방식이 있다.하나는 함수형 컴포넌트 또 하나는 클래스형 컴포넌트가 존재한다. 나도 처음엔 클래스형으로 컴포넌트를 구성했고 하다보니 클릭메서드를 구현하기 위해서 props로 하위 컴포넌트 까지 내려가야하는 불편함이 있다고 생각을

약 6시간 전
·
0개의 댓글

React | 백엔드와 함께 하는 '로그인' 기능 구현(Feat.fetch() method)

로그인 기능 구현에 앞서, 백엔드와 소통을 하려면 fetch() 메소드를 알아야 한다.간략하게 fetch()를 알아보고 로그인 기능의 순서를 알아보자.fetch API를 이용하면 백엔드로부터 Request나 Response 와 같은 HTTP의 파이프라인을 구성하는 요소

약 7시간 전
·
0개의 댓글

React 04. CRUD를 이용해서 동적으로 데이터 추가하기

모든 정보기술은 crud안에 같혀있다.onChangeMode로 mode 변경기능 추가form태그로 create할 기능 추가하기form의 action값은 from의 값을 어디에 저장할지 정해주는 역할form의 method는 post방식으로 가야 url 노출이 안됨form

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

[React] React 초기세팅 방법

가상 DOM을 통해 UI를 만드는 라이브러리인 React의 초기세팅을 진행해보자👻 node.js를 설치한 이유?react사용에는 node.js의 npm툴이 필요하기때문. npm은 node.js로 만들어진 프로그램을 쉽게 설치할 수 있도록 만들어주는 앱스토어 같은 역할

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

React(리액트)

리액트의 대해 알아봅시다. 리액트를 시작 하기 위해선 먼저 프로젝트를 만들어야 합니다. 생성이 완료 되었다면 리액트 실행은 아래와 같이 합니다. http://localhost:3000/ 이 열리고 기본 리엑트 로고가 보입니다. 생성되는 파일에서 index.js

어제
·
2개의 댓글
post-thumbnail

[TIL] ToDo App

매우매우 간단한 투두앱을 만들어 봤다.. 리액트를 배웠다면 투두리스트 정도는 한번쯤 만들어 봐야 한다고 어디서 들어서 그런지 꼭 해봐야 할것 같았다.기본적으로 Redux나 Hook를 사용하지 않은 class component 기반의 React로 만들었으며, 사실 크게

어제
·
0개의 댓글

React 03. props and state

props는 사용자가 component를 사용하는 입장에서 중요한 것 (ex. ui / 외부적으로 사용되는 것들)state는 props의 값에 따라 구현하기 위해 필요한 내부의 데이터 (내부적으로 사용되는 것들)따라서 props와 state는 철저하게 분리되어 양쪽의

어제
·
0개의 댓글

React 02 . 컴포넌트 (component) 만들기

\\n 리액트 컴포넌트에는 하나의 최상위 태그만 쓸 수 있다. \\n 컴포넌트의 장점 : 컴포넌트 이름에만 집중하게 하면서 복잡도를 줄여주게된다.

어제
·
0개의 댓글
post-thumbnail

[React] redux-saga 시작하기! 기본적인 effects 활용

💥 redux-saga 비동기 작업을 하는 미들웨어가 필요할 때 사용한다. 특정 액션이 발생했을 때 상태 값이나 응답 상태 등에 따라 다른 액션을 디스패치 하거나 추가적인 로직을 적용 해야될 때 사용할 수 있다. api요청, 요청 실패 시 재요청 등의 리덕스와 관계없

어제
·
0개의 댓글
post-thumbnail

[TIL] 20.11.27

리액트 토이프로젝트 '알바비를 계산해줘' 진행 중..\-> 폼 컴포넌트랑 부모 컴포넌트 연결해서 계산하는 부분에서 막힘. 완전히.머리가 아프다..뭐가 문제일까..? 😡부모 컴포넌트에서 state를 이렇게 선언해줬고 Form.jsx에 { fields }를 props로

어제
·
0개의 댓글

[React] 기초 - movie app 만들기

UI library 리액트는 JSX라는 문법을 사용하여 레이아웃을 컴포넌트라는 작은 단위로 나누어서 코딩하는데 이는 코드의 재사용성을 높여준다.작성한 코드를 컴파일하는 과정을 꼭 거쳐야한다.리액트는 데이터의 흐름이 아래로만 이루어지기 때문에 부모의 데이터를 바꾸기 위

어제
·
0개의 댓글

[JavaScript] TWIL : React 2/2 (20/11.18~11.23)

TIL : React 1/2편에 이어 블로깅한다. React Hooks : 함수 컴포넌트에서 state 사용하기 babel, webpack, virtual DOM

1일 전
·
0개의 댓글

[React] 리액트 이벤트 다루기

여기서 event객체는 내장 DOM 이벤트 객체를 개선한 것으로 합성 이벤트이다.bind()를 하는 이유는 이벤트 핸들러 함수가 리액트 엘리먼트에 대해 참조를 해야하기 때문이다.this를 이용해서 해당 클래스 참조가 필요 없을 때React.createClass()를 이

1일 전
·
0개의 댓글

React 관련 질문 및 답변

react

1일 전
·
0개의 댓글

react chart js customizing

https://www.chartjs.org/docs/latest/charts/line.htmlhttps://www.codota.com/code/javascript/modules/react-chartjs-2import { Line } from "reac

1일 전
·
0개의 댓글