개발일기

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 -yyarn init -y 1-1. Express 설치npm install expressyarn add express서버는 노드의 express를 사용하여 서버를 오픈할 것이다. 1-2. Socket.io 설치npm install socket.ioyarn add socke..

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..

useSelector는 리액트의 리덕스 스토어 관련 Hook중 하나이다. 이 Hook은 스토어의 상태값을 반환해주는 역할을 한다. useSelector를 사용한 함수에서 리덕스 스토어의 상태값이 바뀐 경우( 버튼 클릭 등의 이벤트를 통해 액션이 실행되어 상태값이 변경된 경우) 바뀐 스토어의 상태값을 다시 가져와 컴포넌트를 렌더링 시킨다. 1. useSelector 사용을 위한 react-redux 설치 npm install react-redux yarn add react-redux useSelector를 사용하기 위해서는 react-redux를 설치해야 한다. 2. useSelector 형식 import { useSelector } from 'react-redux'; const fruitList = us..

redux의 액션 생성함수를 실행하여 리덕스 스토어에 변경된 상태값을 저장하기 위해서는 useDispatch라는 리액트 훅을 사용하여 액션을 실행시켜야 한다. 1. useDispatch 사용을 위한 react-redux 설치 npm install react-redux yarn add react-redux react-redux에 useDispatch라는 객체가 속해있기에 설치해준다. 2. useDispatch 선언 import { useDispatch } from 'react-redux'; cosnt dispatch = useDispatch(); // dispatch로 재선언하여 사용한다. useDispatch객체를 dispatch로 재선언한 후, dispatch 변수를 활용하여 액션을 호출할 수 있다. ..

1. 리액트의 상태관리(props) 리액트에서 컴포넌트간의 상태관리를 위해 각 컴포넌트들의 상태값을 props로 넘겨 주고받는 방법으로 상태관리를 하였다. 프로젝트의 규모가 소규모라 나뉘어진 컴포넌트와 기능들이 적은 경우 props로 간단하게 상태관리를 할 수 있다. 하지만, 이와는 반대로 프로젝트의 규모가 커지는 경우 원하는 컴포넌트로 상태값들을 전달하려 할 때, 4~5 개의 컴포넌트들을 지나쳐 값을 전달하는 경우가 종종 발생한다. 불필요한 컴포넌트들을 거쳐 값을 전달하여 관리하려면, 값을 전달할 때 마다, 불필요한 작업을 반복적으로 해야하고, 실수를 통해 에러가 발생할 수도 있다는 단점을 가지고 있다. 각 컴포넌트 간에 value={value} 형식으로 값을 주고받는다. 컴포넌트가 적은 소규모 프로젝..