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

# React

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

858개의 포스트
post-thumbnail

react 컴포넌트별로 폴더정리~

컴포넌트가 재사용 가능성이 1이라도 보이게 되면, 따로 컴포넌트 파일로 관리합니다.프로젝트 규모가 커지면 컴포넌트js파일이 수백 수천개는 생기기 마련입니다. 🙀그래서 잘 관리 하는것이 중요한데요..자주 사용되는 컴포넌트들을 Components 폴더에 넣어두고, 페이지

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

React - 최적화 시 props, state 로깅

React를 최적화할 때 props와 state가 어떻게 변화되는 지 분간하기 힘든 순간이 있다.그럴 때는 다음과 같이 로깅을 해주면 리렌더링 전후에 props나 state가 어떻게 변화하는 지 알 수 있다.

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

react - router 구현하기

그래서 우리는 따로 react-router를 다운 받을겁니다. 이렇게 프로젝트 디렉터리에서 다운 설정한 여러 모듈들은 --save를 하면 package.json의 dependencies에 저장이 됩니다.gitignore에는 기본적으로 이렇게 노드 모듈을 제외하고 올라갑

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

[TID] 2020.04.09

⌚️ 시간관리 ☀️ 기상시간 - 8:50 🌕 마감시간 - 💻 오늘 배운 것 ◉ 1차 프로젝트 - Button Component 최종 수정 ◉ git commit 꼬인부분 해결 ◉ useState 복습 ❓오늘의 나는 ❗️내일의 나는

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

[0406 과외] React와 create-react-app

서비스 와이어프레임 PPT로 그리기 / (정적인) 웹 페이지 ➡ (동적인) 웹 어플리케이션 / Javascipt 언어 / React Tutorial / create-react-app

약 10시간 전
·
0개의 댓글

react 개발자 취업 지원 준비[1.2]

Webpack Guide 링크webpack is used to compile JavaScript modules. 웹팩 공식 Getting started의 첫 문장이다.Getting started기존 html head 태그에서 관리되던 <script src="htt

약 10시간 전
·
0개의 댓글

200409목 Create React App으로 리엑트 프로젝트 시작하기

오늘의 깅쥰. 야심차게 node.js 스터디 1주차 강의를 들으려고 노트북을 켰다. 나동빈씨 영상으로 공부하기로 해서 1강을 천천히 따라가고 있었다.하지만 그녀는 곧 곤경에 처하는데.. React Project 시작하기 Node.js 를 설치한다. C드라이브에 Re

약 13시간 전
·
0개의 댓글

리액트 Validation 유효성검사

https://react-hook-form.com/react-hook-form를 이용해서 유효성을 검사할 수 있으며 또한 form을 제어할 수 있습니다.먼저 npm으로 설치를 합니다.가장 기본적인 틀

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

React의 setState가 잘못된 값을 주는 이유

본 글은 React의 공식 홈페이지에서 state에 대해 설명한 부분을 참고하여 작성되었습니다.더 자세하게 알고싶으신 분은 공식 홈페이지를 참고해주세요.서론setState가 잘못된 값을 주는 이유setState는 언제 비동기일까?state의 값을 가장 최신으로 유지하는

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

class 형식으로 Mobx 사용해보기

👉 Mobx? 리엑트에서 state 관리를 위한 전략은 여러가지입니다. 가장 널리 알려진 redux, useState hooks를 이용한 각 컴포넌트 레벨에서의 관리, contextAPI 를 이용한 컴포넌트들 간의 state 관리, 그리고 mobx를 이용한 관리 등

약 17시간 전
·
0개의 댓글

[TID] 2020.04.08

⌚️ 시간관리 ☀️ 기상시간 - 9:00 🌕 마감시간 - ❌ 주말부터 시간을 너무 허투루 보냈다,,, 어제는 몸이 너무 안좋아서 거의 아무것도 못했고,,,, 그래서 그나마(?) 오늘은 집중해서 열심히 공부했다. 💻 오늘 배운 것 ◉ 1차 프로젝트 - Button

어제
·
0개의 댓글

Flux vs MVC: Best Explanation 번역

이 글은 해당 포스트를 번역한 것으로 의역 및 오역이 많습니다!잘못되거나 더 나은 수정이 있으시다면 댓글로 남겨주세요!Flux 아키텍쳐는 React.js 의 중추입니다. Flux 는 MVC 와 여러 디자인 패턴의 대체인데, 페이스북은 Flux 패턴이 확장성과 가독성 두

어제
·
0개의 댓글
post-thumbnail

React의 컴포넌트에 State를 정의하는 두 가지 방법

리액트의 처음과 끝은 컴포넌트라고 말할 수 있습니다. 컴포넌트의 종류에는 많은 종류가 있지만 그 중에서 우리는 클래스형 컴포넌트에서 state를 정의하는 두 가지 방법에 대해 알아보도록 하겠습니다.함수형 컴포넌트에서 Hooks를 통해 state를 정의할 수 있는 것처럼

어제
·
0개의 댓글
post-thumbnail

[TID] 2020.04.07

☀️ 기상시간 - 8:00🌕 마감시간 - 24:00❌ 주말부터 시간을 너무 허투루 보냈다,,, 어제는 몸이 너무 안좋아서 거의 아무것도 못했고,,,, 그래서 그나마(?) 오늘은 집중해서 열심히 공부했다.오늘에서야 3차로 수정해서 제출했던 Button Component

1일 전
·
0개의 댓글

react, IE에서 호환(크로스브라우징)

react IE에서 호환(크로스브라우징)

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

컴포넌트를 단순하게 개선시키기

잘못된 컴포넌트 설계를 개선시키기

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

next.js 프로젝트 초기설정하기

본 글에서는 다음을 다룹니다. next.js 는 SSR 을 사용할 수 있게 해주는 모듈입니다. React.js에 SSR을 이용해 SEO(Search Engine Optimization)을 적용할 수 있게 해주며 SEO가 적용된 프로덕트는 구글과 같은 사용자가 많이 사용

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

react 이벤트

react의 문법은 유사 html인 JSX라서, 살짝 다릅니다.이렇게 onClick 이벤트를 줘서 클릭이 되면, 클릭한 정보를 첫번째 인자값에 넘겨줍니다.확인해 볼까요?? 🤕 페이지를 reload하는 이벤트들이 있을 수 있으므로 이벤트의 기본값을 모두 없애는 prev

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

react state 알아보기~

react는 컴포넌트를 외부에서 조작할 때 props를 사용하고 내부적으로 상태를 관리할 때는 state를 사용합니다. 👼👼👼각 데사용 쪽과용쪽과 구현하는 쪽의 영역을 분리시켜 각각의 편의확대시킨 것입니다.!state.profiles 의 값들을 profile의 d

2일 전
·
0개의 댓글

🌎 [리액트] (1) - 주소록 만들기

🌎 [리액트] (1) - 주소록 만들기

2일 전
·
0개의 댓글