React

MVC(Model-View-Controller) Architecture (ex. Angular, Vue)와는 다르게 리액트는 오로지 View만 담당한다. 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리(ex. React-router, Redux)를

component : 재활용 가능한 UI 구성 단위재활용하여 사용할 수 있다.코드 유지보수에 좋다.해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)컴포넌트를 선언하는 방식에는

SPA (Single Page Application) - 페이지가 한 개인 애플리케이션리액트 프로젝트에서 .html 파일의 개수는 1개이며 SPA(Single Page Application) 이라고 한다.참고) SPA 란? | velopert라우팅(Routing)이란

컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값입니다.state는 화면에 보여줄 컴포넌트의 UI 정보(상태)를 지니고 있는 객체입니다.state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있습니다.클래스형 컴포넌트에서는 state를 설정할

컴포넌트가 브라우저에서 나타날때 사라질때 업데이트 될 때 진행되는 흐름입니다.컴포넌트 생성자 함수입니다. 컴포넌트가 새로 만들어질 때마다 이 함수가 호출됩니다.컴포넌트가 화면에 나타나게 됐을 때 호출됩니다.해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 axios,

setState 메소드는 클래스 컴포넌트에서 state 값을 변경하기 위해 사용됩니다. setState 로 값이 변경될 경우 reder 함수를 호출합니다.addCounte의 메소드를 확인해 보면 총 2번의 setState 가 존재합니다.이때 위 버튼을 클릭할 경우 0의

Comment 컴포넌트가 위와 같을 때 map()함수를 통해 컴포넌트를 반환하여 list에 추가하여 DOM에 렌더링 합니다.Comment 컴포넌트에서 key 부분을 누락할 경우 경고가 표시되며 “key”는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리

constructorrendercomponentDidMount(fetch 완료)(setState)rendercomponentDidUpdate (setState 되었기 때문에 컴포넌트 업데이트 발생)componentWillUnmount부모 API에서 받은 데이터를 자식에

보통의 웹 사이트는 전체 아이템이 보여지는 리스트 페이지와 거기서 어떤 아이템을 선택했을 때 해당 아이템의 디테일 한 정보가 보여지는 상세 페이지로 구성됩니다.이때 특정 리소스에 아이템 값을 넣어 해당하는 아이템의 데이터가 보여지도록 하는데 이와 같이 라우트 경로에 특

Pagination Pagination(Paging 이라고도 불리는) 기능으로 서버에서 가지고 있는 데이터는 많고 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용됩니다. 모든 데이터를 한번에 보여줄 수 없다면 일정 길이로 끊어서 전달합니다. 게시판의 "

Hook의 개요 - React(https://ko.reactjs.org/docs/hooks-intro.htmlHook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)" 할 수 있게 해주는

상태 유지 값과 그 값을 갱신하는 함수를 반환합니다. 최초로 렌더링을 하는 동안, 반환된 state(state)는 첫 번째 전달된 인자(initialState)의 값과 같습니다.setState 함수는 state를 갱신할 때 사용합니다. 새 state 값을 받아 컴포넌트

useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해줍니다. React class의 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만 하나의 API

useState, useEffect 등 다양한 내장 Hook 등을 조합하면 반복되는 로직을 분리해 Custom Hook을 작성할 수 있습니다.위의 Dock이라는 컴포넌트에 각각의 컨테이너 정보를 useRef()를 통해 지정하여 해당 dom 정보를 useOutsideC

Infinite scroll이란 무한 스크롤로 아래와 같이 스크롤이 최대치(콘텐츠의 끝)까지 내려가면 자바스크립트 코드에 의해 새로운 콘텐츠가 생성 및 추가되는 방식입니다.이번에는 무한 스크롤을 구현해보도록 하겠습니다.첫번째로 구현한 방식은 scroll 이벤트를 통한

전역상태관리란 말하는바 그대로 전역에서 상태를 관리한다는 의미입니다.리액트에서는 상위에서 하위로 상태값을 전달하여 상태를 관리하게 되어있습니다.그러나 위와 같이 컴포넌트가 분리되어 점점 더 많아지는 컴포넌트에서 상태를 관리하게 위해서는 결국 props를 통해 사용하는

Context API란? Context API는 react에서 정식적으로 지원하고 있는 전역상태관리 API 입니다. 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들

이전에도 한번 얘기했듯이 전역상태를 관리하는 여러방법들중 하나입니다.리덕스 공식 문서에서는 다음과 같이 리덕스를 정의하고 있습니다.리덕스에 들어가기 앞서 Flux패턴이라는것을 먼저 짚고 넘어가겠습니다.우선 Flux패턴에 들어가기 전 MVC패턴에 대해서 알아보겠습니다.

리덕스 사용법에 대해서 확인해보겠습니다.리덕스에는 리덕스 툴킷과 기본적인 리덕스 사용법으로 나뉘어져 있습니다.이번에는 기본적인 리덕스 사용법에 대해서 확인해보겠습니다.redux에서 사용되는 용어는 스토어, 액션, 디스패치, 리듀서가 있습니다.스토어는 상태를 가지고 있으

앞서 리덕스 사용 방법에 대해서 공부해봤습니다.그렇다면Redux Toolkit은 무엇일까요?리덕스 툴킷도 리덕스입니다. 그렇다면 리덕스 툴킷은 왜 나오게 된걸까요?현재 리덕스 공식문서에서도 기본적으로 리덕스 툴킷을 추천하고 있습니다.리덕스 공식문서에는 아래와 같이 소개

리덕스 라이브러리를 통한 상태 관리를 할 경우에 리덕스의 store는 새로고침을 할 경우 state가 사라지게 됩니다.이때 대응 방안으로 localStroage 등에 저장하여 새로고침을 하여도 저장공간에 있는 데이터를 redux에 불러오도록 하여 기존의 상태를 유지하도