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

# React

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

7997개의 포스트

리액트를 다루는 기술 ( 코드 스플리팅 )

리액트 프로젝트를 완성하여 사용자에게 제공할 때 빌드 작업을 거쳐서 배포해야 한다. 빌드 작업을 통해 프로젝트에서 사용되는 자바스크립트 파일 안에 불필요한 주석, 경고 메시지, 공백등을 제거하여 파일 크기를 최소화하기도 하고, 브라우저에서 JSX 문법이나 다른 최신 자

31분 전
·
0개의 댓글

[TIL] React 재학습하며 배운 기법들

useState는 한 컴포넌트에서 한번만 선언하고, 필요한 보든 state를 해당 useState안에 때려넣어 사용하는 방법이 있다.조건부 렌더링3항 연산자보다 단축평가 논리 계산법을 활용하면 좀 더 깔끔하다{isSpecial && <b>\*</b>}prop

약 1시간 전
·
0개의 댓글

스파르타 코딩클럽 - 리액트 3주차(3)

(1). index.js에 BrowserRouter적용하기.BrowserRouter 적용하기.BrowserRouter는 웹 브라우저가 가지고 있는 주소 관련 정보를 props로 넘겨주는 친구이다. 현재 내가 어느 주소를 보고 있는 지 쉽게 알 수 있게 도와준다.(2).

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

React club 210727

하하하...

약 1시간 전
·
0개의 댓글

react-cookie 라이브러리

npm i react-cookie'cookie-name'이 쿠키의 key가 된다.쿠키 세팅 name(string): cookie namevalue(string|object): name에 해당하는 cookie의 값을 저장(object 가능)options(object) :

약 2시간 전
·
0개의 댓글

AACP 3일 간의 삽질..

사용자가 강좌를 추가할 때, 강좌를 수강하는 학생들도 추가하게 되는데 그 컴포넌트를 작성하였다. 정말 기본적인 CRUD이지만 내맘대로 코딩하다가 이런 사태가 발생했고 map을 통해 해결하였다. 근본적으로 하위 컴포넌트를 상태로 만든 것이 문제였고 이렇게 만들었어도 ma

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

React: Create React App

온라인 플레이 그라운드 \-> 웹 환경에서 리액트 개발웹사이트에 react 추가 \-> 웹사이트에 부분적으로 추가 (어려움)새 react 앱 만들기 \-> toolchains 사용 (개발 도구 모음) 파일과 컴포넌트 스케일링서드파티 npm 라이브러리 사용실수를

약 3시간 전
·
0개의 댓글

스파르타 코딩클럽 - 리액트 3주차(2)

1-1. react-route-dom 패키지 설치하기.먼저 새프로젝트를 만든다.react-route-dom1-2. react-route-dom 공식 문서 보기.링크텍스트

약 3시간 전
·
0개의 댓글

React 디버깅

React 디버깅 리액트의 props와 state를 사용하면서 데이터 처리를 하는데 헷갈려서 console.log를 굉장히 많이 찍게 되었는데 이 작업이 너무너무 귀찮다..... 그래서 조금이라도 더 쉬운 방법을 찾다가 리액트 디버깅하는 방법을 찾았다. Visual

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

BASENOTE - PAFFEM 향수 쇼핑몰 클론 프로젝트

"BASENOTE" Find Your Scent, 가장 나다운 향을 찾아드립니다.

약 14시간 전
·
0개의 댓글

[React] Hooks Custom하기

What is Hooks? React간 재사용 가능한 로직을 붙이는 방법을 제공하지 않기 때문에 Hook을 통해 계층간의 변화없이 상태 관련 로직을 만들어 재사용할 수 있게 도와줍니다. React에서는 class component를 사용하기 위해 this를 다룰 줄

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

We-record 🔥

A-Z까지 모두 경험했던 We-record 프로젝트!!목차A-Z까지( - 위대한(?) 첫걸음( - we-record의 탄생( - Blocker...(벌써...?)( - 중간 점검( - 본격적인 개발( - 내가 맡은 Task( - 각 페

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

2차 프로젝트 CREAM

Wecode 부트캠프에서 진행한 프로젝트 CREAM에 대한 회고록입니다.목차근황( - Project CREAM( - 기획하는 단계( - 프로젝트 설명( - 마치며...(2차 프로젝트를 마무리하고 약 한달 반이 지났다. 그동안은 Velog를 이용해왔지만 '나만의

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

env 파일로 키 보호하기

React 프로젝트를 진행하다보면, 위와 같은 형태의 코드를 접할 수 있다.위의 코드는 env 파일의 환경 변수를 가져온다는 뜻이다.왜 이런식으로 코드를 짰을까?이는 git으로 프로젝트를 관리할 때, 중요한 보안 키들을 노출시키지 않기 위함이다. 위 형태의 코드가 포함

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

1.2장. 리액트의 특징

1.2장. 리액트의 특징

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

react 배열의 key 값

React에서 키는 React가 어떤 아이템이 변경,추가 또는 삭제되었는 지를 인식하는 데 도움을 준다. 예를 들어 유도억인 데이터를 다룰 때 아이템을 새로 생성하거나 제거, 변경 할 수 있는데 key가 없으면 가상dom을 비교하는 과정에서 리스트를 순차적으로 비교하며

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

React 리스트 렌더링시 key값이 필요한 이유

리액트 뿐만 아니라 모든 개발에서는 배열이나 리스트를 순회하며 데이터 처리를 하는 경우가 매우 빈번하다.위의 코드와 같이 Content 컴포넌트를 map을 사용하여 배열의 길이만큼 li 태그를 생성 해줄때 키값을 주지 않고 실행을 시키면 다음과 같은 문구를 보게 된다.

약 20시간 전
·
0개의 댓글