리액트

React는 javascript를 쉽고, 효율적으로 사용할 수 있도록 Facebook에서 만든 도구이다.React는 초기 셋팅이 필요하고 초기 셋팅을 완료하면 우리는 그것을 보일러플레이트라고 한다. 보일러플레이트는 회사마다 다를 수 있다.각 폴더를 한 줄로 요약하자면

오늘은 JSX 를 조금 자세히 알아보았다.JSX 는 JavaScript 를 확장한 문법이고, JavaScript 의 모든 기능이 포함되어 있다.JSX 는 “엘리먼트(element)” 를 생성한다.React 에서는 렌더링 로직이 UI 로직과 연결 된다는 사실을 받아들인다

리액트에 필수로 사용되는 문법중 하나인 export 와 import 이다.Js 파일 하나하나가 모듈이라고 할 수 있다.imort 와 export는 이 모듈을 내보내거나 불러와야 할 때 사용한다. Exportexport는 Js 모듈에서 함수, 객체 원시 값을 내보낼 때

프로젝트를 만들때 폴더 구조는 매우 중요하다. 실무에서 사용하는 폴더 구조는 여러가지 방법이 존재한는데, 이러한 방법들을 패턴이라고 부른다.리액트에서 사용하는 유명한 패턴으로는 container / presentation 패턴과 atomic 패턴이 있다.containe

state는 리액트에서 자바스크립트에 변수로 사용이된다.자바스크립트에서는 변수에 데이터를 담아 사용하지만 리액트에서는 state를 사용해 데이터를 담아 사용한다.setState는 state 객체에 대한 업데이트를 실행한다. state가 변경되면 컴포넌트는 리렌더링 된다

리액트에는 state 와 setState가 있다.state는 쉽게 말해서 자바스크립트에서의 변수 역할을 한다고 보면 된다.setState는 이런 state의 값을 업데이트 해준다.조금더 자세한 내용은 이전 블로그(https://velog.io/@uiop5487

리액트에서는 컴포넌트를 나눠서 사용한다.이때 부모컴포넌트에 있는 데이터를 자식컴포넌트에서 사용하고 싶다면 props를 이용해 데이터를 주고 받을 수 있다.하지만 부모와 자식간에 데이터 이동은 가능하지만 자식과 자식 컴포넌트끼리는 데이터를 주고 받을 수 없다.만약 다수의

Pagination Pagination은 웹 사이트에서 데이터나 콘테츠를 여러 페이지를 분리하는 방법이다. .gif)위와 같이 데이터나 콘텐츠를 여러 페이지로 나누어 보여주는 것이다. 코드로 보면 다음과 같다. 먼저 위에 보이는 목록 데이터를 불러왔다고 가정을 하고

컴포넌트들은 모두 각자의 라이프 사이클을 가지고 있으며, 이 각각의 라이프 사이클에 대해 원하는 동작을 써 넣을 수 있다.컴포넌트의 수명을 보통 페이지에서 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질때 끝이난다.클래스형 컴포넌트일때 라이프 사이클을 조작할 수

리액트를 사용하기 전에 자바스크립트에는 특정 DOM에 접근할 때 document.getElementById, document.getElementsByTagName와 같은 것들을 사용했다. >DOM? 돔(DOM)이란 Document Object Model 의 약자이다.

지난번 컴포넌트 생명주기를 포스팅했을 때 useEffect를 사용을 했다.오늘은 그 useEffect를 조금 더 자세하게 볼 것이다.useEffect()란 리액트에서 제공하는 내장 함수이며, 함수형에서 Side Effect를 사용할 수 있게 하는 리액트에 훅스이다.Si

디바운싱(Debouncing)은 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 한다.특정시간이 지날때까지 재반복이 일어나지 않는 경우 1번만 실행이 된다.디바운싱은 주로 검색 부분을 만들때 사용된다.디바운싱은 lodah에 라이브러리 메소드를 사용

우리가 자주 사용하는 웹사이트에서는 권한에 따른 분기가 존재한다.쿠팡 웹사이트를 예시로 들어보자.쿠팡에 접속하게 되면 비회원일 경우에는 구매할때 비회원 전용 결제 페이지가 나오게 되고, 회원일 경우 회원전용이 나오게 된다.판매자일 경우 판매자에 따른 판매자 전용 페이지

\-리액트 공식문서-고차 컴포넌트(HOC)는 컴포넌트 로직을 재사용하기 위한 리액트의 고급 기술입니다.HOC는 실행하려는 컴포넌트를 인자로 받아 먼저 실행이 되고 인자를 받은 컴포넌트를 실행 시켜주는 기능을 한다.이는 자바스크립트의 클로저의 특성을 이용하여 만들어졌다.

리액트에서 많이 사용되는 개념이 하나가 있는데, 커링(Currying) 기법이다.

context api context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 일반적인 React 데이터는 위에서 아래로 즉 부모에서 자식으로 props를 통해 전달된다. 하지만 여러 컴포넌트에게 전달해줘야

React-memoization > 메모이제이션(memoization)이란 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 이는 동적 계획번의

Virtual DOM 가상 돔(Virtual DOM)이란 일종의 돔(DOM)의 메타데이터, DOM의 요약본이라고 할 수 있다. 가상 돔을 알기 위해서는 일단 돔을 알아봐야 할 필요가 있다. DOM? DOM은 The Document Object Model의 약자로

개요 리액트에서는 컴포넌트를 나누어 개발을 진행을 한다. 이때 대형 프로젝트에서 재사용할 수 있는 컴포넌트들은 필수이다. 이 컴포넌트를 나누는 패턴은 여러가지 있는데 그 중 하나인 아토믹 디자인 패턴을 알아볼 것이다. 아토믹 디자인은 사용자 인터페이스를 작고 단순한