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

# React

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

18570개의 포스트

React 6

함수 1번(counterUP) / 함수 2번(render) / 함수 3번(Container)

29분 전
·
0개의 댓글

[수업 6월 5주 3일차] React-4

1. 학습내용 오늘은 리덕스(redux)에 관해 잠깐 배워보았다. -javaScript 상태관리 라이브러리 • Node.js 모듈 • 상태관리 툴 종류 React Context Redux Mobx 상태관리의 필요성 • 상태관리 React에서 State는 compon

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

9. Hooks

리액트가 업데이트 되면서 나온 개념대부분 개발할 때 사용함생성자 단계에서 state를 정의해서 사용하고 setState()함수를 통해 state를 업데이트할 수 있으며 Lifecycle methods를 제공함클래스 컴포넌트의 state 사용이 불가하며 Lifecycle

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

React Component Pattern

🐽 모아모아 프로젝트를 하면서 어떤 리액트 컴포넌트 패턴을 사용할지에 대한 고민을 많이 했다. 그 과정에서 배운 내용들을 정리해보려고 한다. ⚛️ React Component Pattern React는 개발자가 자유롭게 컴포넌트를 짤 수 있기 때문에, 다양한 패턴

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

React 1.

ternary operator-null / style / props / useState

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

컴포넌트의 의존성 관리

👉 컴포넌트, 다시 생각하기 영상을 보고 정리한 내용입니다. React 컴포넌트의 의존성 파악하기 💅 스타일 css, scss, css-in-js 등등 🪝 로직 UI 조작에 필요한 커스텀 로직 custom hook 🌐 전역 상태 현재 UI를 표현하기 위해

약 3시간 전
·
0개의 댓글

[React] Redux-toolkit 설치 및 사용방법

Redux를 조금 더 쉽게 사용하기 위해 만든 Redux-toolkit에 대해 알아보려고 한다. 일단은 npm으로 Redux-toolkit을 다운로드 한다. 그리고 메인이 되는 파일(app.jsx 또는 app.tsx)로 가서 아래와 같이 코드를 추가해준다. store 내에 파일은 아래와 같이 구성하면 된다. 위 소스에 대해 설명을 하자면 아래와 같다...

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

리액트 작업 환경 설정

Node.js 설치npm 또는 yarn 설치코드 에디터 설치 Git 설치create-react-app으로 프로젝트 만들기리액트 프로젝트를 만들 때는 반드시 Node.js를 먼저 설치해야 한다.Node.js는 자바스크립트 런타임으로, 크롬 V8 자바스크립트 엔진으로 빌드

약 4시간 전
·
0개의 댓글

리액트의 특징

리액트의 주요 특징은 Virtual DOM을 사용하는 것.DOM은 Document Object Model의 약어이고객체로 문서 구조를 표현하는 방법이다.웹브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다.DOM은 트리형태라서 특정 노드를 찾거나 수정하

약 5시간 전
·
0개의 댓글

리액트 시작

자바스크립트는 현재 웹 애플리케이션에서 가장 핵심적인 역할을 한다.더 나아가 영역을 확장하여 서버 사이드는 물론 모바일, 데스크톱 애플리케이션에서도 엄청나게 활약한다.이제 자바스크립트만으로도 규모가 큰 애플리케이션을 만들 수 있는 시대가 왔다.대규모 애플리케이션 중 프

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

React yarn start가 안됩니다.

프로젝트 수정할 것이 있어 오랜만에 git clone을 하고 node_modules를 설치한 뒤 yarn start를 했더니 아래와 같은 에러가 떴다.웹팩 버전 안맞어보아하니 웹팩 버전이 안맞는것 같은데... 웹팩 버전이 맞지않는 이슈는 처음이라 해결방법을 찾아보기로

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

React 5

1번과 2번은 같은 함수가 된다. 1번에 함수로 정의해주어 리턴값을 반환한다면 2번에선 일반변수가 =() => 들어가면 함수로 바뀐다.

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

React 4

바벨 임폴트 추가"https://unpkg.com/@babel/standalone/babel.min.js"원래 썼던 코드방식에서 createElement를 쓰지않고 더욱 편하게 만든는 법똑같이 잘 작동한다

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

[React] saga 설치하고 generator 이해하기

[React] saga 설치하고 generator 이해하기

약 9시간 전
·
0개의 댓글

[React] 익명게시판 만들어보기

React를 이용하여 간단한 익명게시판을 만들어보자.익명게시판에서 지원하는 기능은 다음과 같다.Dark ModeDark Mode와 Light Mode 조건부 렌더링 UI 구현LoadingLoading True : 로딩중일 경우, 로딩 이미지를 띄운다.Loaindg Fa

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

React ForwardRef

React ForwardRef 이해하기

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

[React] (7) 에어비앤비 디자인 시스템 따라하기

이 글은 을 참고하여 작성하였습니다.정리 느낌으로 작성하였으므로 내용이 정확하지 않고 구체적이지 않을 수 있습니다. !스토리북 생략 CSS로 컴포넌트 스타일 적용하기 CDN 방식,파일 방식으로 머티리얼 디자인 적용하기 머티리얼 디자인:구글 디자인 가이드 CDN:

약 14시간 전
·
0개의 댓글

React에서 Font Awesome 사용하기

React에서 Font Awesome을 사용해 보자!여러 icon package를 한꺼번에 받으려면 아래처럼 쓸 수 있다. 사용을 원하는 component에서 Font Awesome을 react component 형태로 사용하기 위한 패키지를 import를 해주자.마

약 14시간 전
·
0개의 댓글

useRef

React 레퍼런스는 useRef를 다음과 같이 정의 하고 있습니다.useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다.그럼 다음과

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

useEffect 완벽 가이드 요약

본 게시글은 useEffect 완벽 가이드를 정리 & 요약하는 글입니다.

약 15시간 전
·
0개의 댓글