인프런의 '실무 중심! FE 입문자를 위한 React' 을 들으면서 기록으로 남겨두면 좋을 React의 특징들을 남겨두었습니다.강의에서는 React의 기본, 기초적인 설명들을 해주지만, 해당 내용들은 이 포스트에서 제외하였습니다. 1일차 (25.02.27)Chapter 04 LifeCycle과 Hooks4-1. Hooks 종류React에 기본으로 내장되어 있는 Hooks는 10가지이지만, 실제적으로 사용하는 것은 3가지 정도이다.useStateuseEffectuseCallbackHooks가 위에서부터 아래의 순서대로 관리다. 4-2. React 랜더링 과정✨ Rerendering컴포넌트의 상태, 즉 State 또는 Props가 변경되면서 해당 컴포넌트를 다시 실행하여 화면을 다시 그리는 것 ✨ React..

React와 OpenLayers를 사용한 기능 포스팅을 몇 개 올렸지만 가장 기본적인 지도를 화면에 출력하는 방법에 대한 포스팅을 이제 올리게 되었다. 여기서 React의 provider와 context 개념이 필요한데, 이에 대해서는 후에 다른 포스팅으로 자세히 설명하려고 한다. 프로젝트 생성 및 라이브러리 설치 프로젝트 생성 npx create-react-app react-context-openlayer cd react-context-openlayer OpenLayers 라이브러리 설치 npm install ol yarn과 npm이 있는데 npm을 사용하여 OpeLayers 라이브러리인 ol을 설치하였다. 화면에 Map 출력하기 MapContext 생성 ./Map/MapContext.js import..

데이터를 초마다 자동으로 select 해서 출력하는 기능을 구현하게 되면서 setInterval()을 알게 되었다. 하지만 axios로 넘겨주는 날짜 param 값이 계속 똑같은 날짜로만 넘어와 문제의 원인을 파악하는 데 애를 먹었다. 이 포스팅 setInterval()에 대해 공부하면서 알게된 사용 시의 유의점과 어떻게 setInterval()을 사용하여 원하는 기능을 구현할 수 있는지에 대한 기본적인 예시를 정리하려고 한다. 문제 파악 const [count, setCount] = useState(0); useEffect(() => { const intervalId = setInterval(() => { setCount(count + 1); sampleFunc(count); }, 2000); retu..

useState와 useEffect는 React에서 가장 많이 사용하는 Hook들이다. 그렇다면 둘의 차이점은 무엇이고 어떻게 사용할 수 있을지 정리해보자. React Hook 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동, 연결(hook into) 해주는 햄수 함수형 컴포넌트에서 상태값, 생명주기, Ref 등 여러가지 기능들을 사용 가능하게 해줌 여러 Hook끼리 재조립이 가능하기 때문에, 재사용 가능한 로직을 쉽게 만들 수 있음 단순한 함수이기 때문에 정적타입 언어에서도 타입을 쉽게 작성할 수 있음 useState 함수형 컴포넌트에서 상태값을 관리 첫 parameter를 설정하고, state와 state를 변경할 setState 함수를 반환 cons..

페이지를 만들다 보면 뒤로가기가 필요할 때가 있다. react-router-dom v5까지는 history를 사용해서 뒤로가기를 구현할 수 있었지만 react-router-dom v6부터는 history를 사용할 수 없기 때문에 useNavigate를 사용해야 한다. 1. react-router-dom 설치 react-router-dom을 설치하는 명령어는 다음과 같다. > npm install react-router-dom --save 2. useNavigate를 사용해서 뒤로가기 구현 import { useNavigate } from 'react-router-dom' function myPage() { const navigate = useNavigate(); const backBtn = () => {..

React를 공부하면서 페이지를 만들고 있다보니 효율적이지 못한 페이지여도 새롭게 하나하나 React의 기능들을 알아가고 있다. 이전까지는 React에서 JSP와 같이 URL에 정보를 담는 법을 알지 못해 session 영역에 데이터를 저장한다든가, 변화하는 값을 target해서 target 된 값에 따라 백엔드 서버로 값을 넘기는 주소를 달리한다든가의 일을 여러 번 처리하게 만들었었다. 하지만 중복되는 코드가 늘어나면서 비효율적인 코드가 될 수밖에 없었다. 이번엔 Router을 사용하면서 URL에 담겨있는 parameter를 추출하고, parameter에 따라 페이지가 다르게 보이도록 만든 것을 정리하려 한다. 1. URL에 parameter 포함하기 URL에 parameter를 붙이는 여러 방법에 대..

배열로 이루어진 데이터를 map 메소드를 사용하여 출력하는 과정에서 다음과 같은 에러가 발생했다. TypeError: Cannot read property 'map' of undefined 멀쩡하게 잘 돌아가던 map이 왜 알수 없는 property인지 이해가 안갔다. 문제는 React의 랜더링 순서 때문이다. React는 렌더링이 화면에 커밋 된 후에 모든 효과를 실행한다. 즉, React는 return에서 반복실행을 할 때 첫 턴에 데이터가 아직 들어오지 않더라도 렌더링이 실행된다. 이 때문에 데이터를 사용하여 반복문을 돌리는 map은 undefined인 데이터로 반복문을 돌려 에러가 발생하는 것이었다. 버튼을 클릭하면 클릭한 데이터의 좌표 이력을 새로운 페이지의 지도에 보여주는 기능을 만들고 있었다..

React 내에서도 리스트 형태의 데이터를 출력할 때 반복문을 사용하게 된다. Java와 같은 언어들은 대부분 for문을 사용하면 되지만 React는 그보다 map을 더 많이 사용한다. map의 사용법을 알아보자. 1. 기본 형태 map은 배열 내장 메소드이기 때문에 배열.map(콜백함수) 형태로 사용된다. arr.map(callbackFunction, [thisArg]) arr.map(callbackFunction(currentValue, index, array), thisArg) currentValue : 현재 배열(arr) 내의 값들 index : 현재 배열 내 값의 인덱스 array : 현재 배열 thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스를 설정 2. ma..

React를 사용하면서 매번 컴포넌트 간에 데이터를 전달하게 된다. 하지만 정리를 해두지 않았더니 했던 필요할 때마다 계속 검색하게 되어 이참에 정리를 하려고 한다. 1. 부모에서 자식으로 데이터 전달 부모에서 자식으로 데이터를 전달할 때는 props를 사용한다. * props properties를 줄인 표현으로, 컴포넌트 속성을 설정한 때 사용하는 요소이다. 부모 컴포넌트에서 설정할 수 있으며, 부모에서 자식으로만 데이터를 줄 수 있다. 즉, 자식은 부모에게 데이터를 전달할 때 props를 사용할 수 없으며 다른 방법을 사용해야 한다. 상위 컴포넌트 import React, { useState } from 'react'; import SearchTagList from './SelectTag/Search..

데이터를 검색하고 새로고침 했을 때 검색한 데이터가 계속 유지되도록 하기 위해서 sessionStorage와 localStorage를 이리저리 만져보고 있었다. { localStorage.setItem('siteSeq', oneTag.siteSeq); window.open('/myPage', '_blank'); }} > 이동하기 다른 페이지에서 myPage로 이동할 때 localStorage에 oneTag의 siteSeq 값이 siteSeq라는 key 값으로 저장되도록 설정하였다. 하지만 페이지를 이동하였을 때 localStorage에 siteSeq 값이 저장되어 있지 않았다! 일반적으로 sessionStorage와 localStorage는 key-value를 set 하면 바로 적용이 된다라고 알고 있었..