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

# React

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

18927개의 포스트
post-thumbnail

Component Lifecycle

리액트 컴포넌트는 탄생부터 죽음까지 여러 지점에서 개발자가 작업이 가능하도록 메서드를 오버라이딩 할 수 있게 해준다.Initialization → Mounting → Updation(props/states) → UnmountingconstructorconponentWi

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

Event Handling

HTML DOM 에 클릭하면 이벤트가 발생하고, 발생하면 그에 맞는 변경이 일어나도록 해야합니다.JSX 에 이벤트를 설정 할 수 있습니다.camelCase 로만 사용할 수 있음onClick, onMouseEnter이벤트에 연결된 자바스크립트 코드는 함수임이벤트={함수}

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

Props & State

Props 는 컴포넌트 외부에서 컴포넌트에게 주는 데이터입니다.State 는 컴포넌트 내부에서 변경할 수 있는 데이터입니다.둘 다 변경이 발생하면, Render 가 다 시 일어날 수 있습니다.Props 와 State 를 바탕으로 컴포넌트를 그립니다.그리고 Prop 와

24분 전
·
0개의 댓글

동적 임포트(Dynamic Import)

코드분할을 이용하면 사용자에게 필요한 양의 코드만 내려줄 수 있다. 코드분할을 사용하지 않으면 전체 코드를 한 번에 내려주기 때문에 첫 페이지가 뜨는 시간이 오래걸린다. 코드를 분할하는 방법 중 하나는 동적 임포트를 이용하는 것이다.보통 우리가 사용하는 import와

약 1시간 전
·
0개의 댓글

[FE] Without Redux MiddleWares

: 이 글 이전에 2개의 포스팅을 하면서 Redux MiddleWare에 대해서 열심히(?) 알아봐놓고 갑자기 middleware 없이?에 대한 주제로 글을 써본다. 여담이지만 Frontend 개발 시장의 변화 속도는 너무 빨라서 비유적으로 표현해보면 나는 이전 프로젝

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

React 컴포넌트

컴포넌트란 UI 또는 기능을 부품화해서 재사용 가능하게 하는 것입니다.

약 1시간 전
·
0개의 댓글

라우터

우리가 흔히 말하는 "페이지 이동" 이라는 것은 리액트에서 라우터를 통해 처리할 수 있다. 그럼 라우터는 무엇일까우선 리액트는 SPA (Single Page Application) 방식인데 SPA부터 알아보자기존 웹 페이지 처럼(MPA 방식) 여러개의 페이지를 사용,

약 1시간 전
·
0개의 댓글

props

컴포넌트를 2개로 나누면서 데이터와 기능의 연결고리가 끊어지게 됩니다. 이를 props가 연결해주게 되며, props는 부모가 가지고 있는 변수 , 함수를 자식한테 물려주는 것 입니다. 부모 컴포넌트가 props를 물려줄때는 객체로 묶어서 넘기게 됩니다. props를 내려주기 _ 부모 컴포넌트 자식 컴포넌트 태그의 propsName부분을 잘 봐주세요...

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

[React] useState 배열의 객체 수정

배열에 바로 접근하면 안 된다는 사실을 명심하고 스프레드 연산자를 통해 복사를 진행한 후 set 메소드를 이용하자.

약 3시간 전
·
0개의 댓글

라우터 객체와 라우팅

라우터(router) 객체란 페이지 이동과 관련된 기능을 가지고 있는 객체입니다

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

React 6.

Context API / Redux

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

React에 TypeScript 설정하기

React에 TypeScript 추가 React에 TypeScript를 적용하는 방법은 두가지!

약 3시간 전
·
0개의 댓글

[CodeCamp-Week 1] Import / Export

React에서는 HTML과 달리 link, script 대신 'import / export'를 쓴다.HTML 파일과 CSS 파일, Javascript 파일을 따로 관리하는 것 처럼,React도 여러 js 형태의 파일로 따로 관리할 수 있다.따로 관리하고 있는 파일들을

약 3시간 전
·
0개의 댓글

React-Hooks

함수형 컴포넌트가 클래스형 컴포넌트보다 훨씬 간단합니다. 하지만, 함수형 컴포넌트 그 자체만으로는 클래스형 컴포넌트의 모든 기능을 흉내낼 수 없습니다. 그래서 React 에서 함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하도록 도구를 만들어 주었습니다. 이 도구를 Hooks(훅) 이라고 부릅니다. 대표적인 Hooks 에는 useSt...

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

Redux

JavaScript 기반의 상태관리 라이브러리 이다.동일한 데이터는 항상 같은 곳에서 가지고 와야 한다는 의미이다.Redux에는 데이터를 저장하는 Store라는 단 하나뿐인 공간이 있음을 의미한다.상태는 읽기 전용이라는 뜻으로, React에서 상태갱신함수로만 상태를 변

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

React - state, props

useState

약 4시간 전
·
0개의 댓글

React 코드 저장 및 협업 - Git과 Github

Git은 소스코드 저장을 도와주는 프로그램입니다.

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

리액트 router, navigate, URL파라미터

index.js 파일에 react-router-dom import한다.BrowserRouter로 App을 감싼다.App.js파일 상단에 여러거지 컴포넌트를 import 한다. 만들고 그 안에 를 작성<Route path="/url경로" element={ <보

약 4시간 전
·
0개의 댓글

#react

asdasdasdasdasdasdasdas

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

리액트 props, styled-components

부모 컴포넌트에서 자식컴포넌트로 값을 전달자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={state이름}/>자식컴포넌트 function으로 가서 props라는 파라미터 등록 후 props.작명 사용컴포넌트들 중 최고로 높은 부모 컴포넌트에 state를 작성터

약 4시간 전
·
0개의 댓글