개발일기

리액트에서 redux또는 useState를 통해 참조하는 값이 변경되면 해당 값을 참조하는 컴포넌트를 리랜더링시킨다. 하지만 참조값이 변경되더라도 리랜더링이 필요하지 않을 경우 useRef를 사용하여 적절한 대안으로 삼을 수 있다. useRef를 사용하면 참조하는 값이 변경되더라도 컴포넌트의 리랜더링이 발생하지 않는다. redux나 useState를 통해 다른 참조하는 값이 변경되어 컴포넌트가 리랜더링되더라도 useRef가 참조하고 있는 값은 변경되지 않고 유지된다. 또는 DOM에 직접 접근하여 ref를 통해 해당 태그의 className값을 가져오거나 style을 변경하는 등의 작업을 할 수 있다. 이러한 특징을 가진 useRef는 useState나 redux에 비해 사용빈도는 높지 않지만 DOM에 직..

리액트에서 상태관리를 사용할 때, 주로 리덕스를 사용한다. 이 리덕스를 사용할 때, 새로고침 버튼을 누르게 되면 저장되어있던 상태가 모두 초기화 되는 것을 확인할 수 있다. 새로고침으로 인해 데이터가 모두 증발하게 되면 페이지가 제대로 렌더링이 되지 않거나 데이터를 가져오지 못해 에러가 발생할 수 있다. 이를 미연에 방지하고자 Redux persist를 활용하여 에러를 방지할 수 있다. 즉, Redux persist는 리덕스에 저장된 데이터를 로컬 스토리지 또는 세션 스토리지에 저장하여 데이터를 유지시켜주는 패키지이다. 1. 설치 npm install redux-persist -D yarn add redux-persist -D 2. index.js import React from 'react'; impo..

Redux의 버전이 4.2로 올라가면서 변경사항이 하나 생겼다. 액션 스토어를 생성하기 위해 사용하던 createStore가 deprecated가 되었다. 비록 계속해서 사용할 수는 있지만 redux toolkit의 configureStore로 대체하는 것을 권장하고 있다. createStore는 리듀서와 미들웨어를 추가할 때, 설치해야 하는 요소가 많다는 복잡함을 가지고 있다. 하지만 이를 간단하고 단순하게 만든 @reduxjs/toolkit의 configureStore를 사용하면오류의 확률을 줄이고 편하게 사용할 수 있다. 1. 설치 npm install @reduxjs/toolkit -D yarn add @reduxjs/toolkit -D 2. import 방법 import { configureSt..

1. useParams란? useParams는 리액트에서 제공하는 Hook으로 동적으로 라우팅을 생성하기 위해 사용한다. URL에 포함되어있는 Key, Value 형식의 객체를 반환해주는 역할을 한다. Route 부분에서 Key를 지정해주고, 해당하는 Key에 적합한 Value를 넣어 URL을 변경시키면, useParams를 통해 Key, Value 객체를 반환받아 확인할 수 있다. 반환받은 Value를 통해 게시글을 불러오거나, 검색목록을 변경시키는 등 다양한 기능으로 확장시켜 사용할 수 있다. 2. 관련 라이브러리 설치 2-1. package.json 생성 npm init -y yarn init -y # package.json 생성 2-2. react 관련 패키지 설치 npm install react..

1. useHistory란? useHistory는 리액트에서 URL주소를 변경할 때 사용하는 Hook이다. 예를 들어, 로그인 버튼 또는 여러 목록 중에서 하나를 선택하여 클릭했을 때, URL주소를 변경시켜 URL주소와 일치하는 Route의 컴포넌트를 렌더링하기 위해 사용한다. 리액트 특성상, URL변경없이 내부 컴포넌트만 변경시켜 화면을 바꿔줄 수 있다. 하지만 URL을 바꿔주면 현재 어느 페이지에 있는지 대략적으로 알 수 있고, 검색 쿼리가 추가된 URL을 공유할 때, 사용자가 페이지의 초기 단계부터 검색 쿼리를 추가할 때 까지 직접 하는 것이 아니라 URL주소만으로 페이지에서 결과값을 볼 수 있다. URL주소 변경없이 컴포넌트의 변경만으로 사용자가 웹 페이지를 이용할수 있지만, 복잡한 순서와 사용자..

Socket.io란? emit : 데이터를 보내는 함수이다. 클라이언트는 서버에게, 서버는 클라이언트에게 데이터를 보낸다. on : 데이터를 받는 함수이다. 클라이언트 서버로부터, 서버는 클라이언트로부터 데이터를 받는다. Socker.io를 사용하여 서버와 클라이언트 간에 데이터를 주고받는 결과를 확인하기 위해 간단하게 서버와 클라이언트를 생성하여 결과를 확인할 수 있다. 1. 서버 생성 1-0. package.json 생성 npm init -y yarn init -y 1-1. Express 설치 npm install express yarn add express 서버는 노드의 express를 사용하여 서버를 오픈할 것이다. 1-2. Socket.io 설치 npm install socket.io yarn ..

FontAwesome 아이콘을 사용하기 위해 i태그에 해당하는 아이콘 클래스이름을 넣은 후, 페이지를 실행하였을 때, 다음과 같은 에러가 발생하였다. React DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node test i태그를 위와 같이 사용하였을 때, 에러가 발생하였다. 해결법 : div, span태그로 하위 태그를 감싸준다. test // span 또는 div 등의 다른 태그로 감싸주면 에러가 해결된다. test 위의 소스코드처럼 span태그 또는 div 태그로 해당 내용들을 감싸주면 에러가 해결된다. 노드 패키지 매니저로 FontAwesome 패키지를 설치..

리액트에서 컴포넌트가 리렌더링되는 조건은 상태값이 변경되었을 때 발생한다. 아래와 같은 세가지 경우에서 상태값 변경이 주로 일어나며 해당 컴포넌트의 변경된 상태 부분이 변화하는 것을 확인할 수 있다. 상태값이 변경되었을 때 (useState, Redux 등을 통한 상태값 변경시) props의 값이 변경되었을 때 상위 컴포넌트가 렌더링될 때 useState 변경 import React, { useState } from 'react'; const TestComp = () => { console.log('TestComp Component'); const [ test, setTest ] = useState(true); return ( setTest(!test) }>리렌더링 테스트 ) } export defaul..