본문 바로가기

코딩병원

HOME

Frontend/React (53)

[React] useRef() 여러 개를 한 개로 관리하기

이번 글에서는 여러 개의 useRef를 사용했을 때 효율적으로 useRef를 관리하는 법에 대하여 알아보도록 하겠습니다. 우리는 보통 DOM요소에 접근하거나 저장공간으로 활용하기 위해 useRef를 사용하곤 합니다. 그런데 useRef()가 여러 개인 경우는 어떻게 사용하시나요? 한 개씩 추가하면서 사용하시나요? 아래를 한 번 보겠습니다. [문제 상황] useRef()를 일반적으로 사용하는 아래 코드입니다. input 폼요소에 각각 useRef로 선언을 해서 사용하였습니다. 이때는 사실 개수가 적어 별로 문제가 안된다고 생각이 드실 수 있습니다. const refTel = useRef(null); const refName = useRef(null); 하지만 아래처럼 폼요소가 많거나 계속해서 추가해야될 상..

[React] 파일업로드 이미지 미리보기 구현하기

이번 글에서는 React로 이미지 업로드를 하고 업로드한 파일을 미리 보기로 화면에 렌더링 하여 사용자에게 보여주는 작업을 구현하도록 하겠습니다. 간단하게 미리 보기를 구현할 수 있기 때문에 이 글만 읽어도 기능을 구현하고 이해하는 데는 어렵지 않을 것으로 생각이 듭니다. 이 기능은 실제로 정말 많이 사용되고 있고 저 같은 경우는 개인적으로 개발하고 있는 사이드 프로젝트에서 아래와 같이 사용해 봤습니다. 이번 글에서는 단순히 미리보기 기능만 있는 간단한 화면 하나를 개발하고 해당 코드를 보면서 미리 보기를 구현하겠습니다. [구현하기] 파일을 업로드하는 인풋버튼을 하나 만들고, 바로 올린 파일의 이미지를 미리보기로 보여주고 있습니다. 파일을 선택하여 업로드하는 경우, 선언한 FileReader로 업로드한 ..

[React] MySQL, Node.js 연동하여 Insert, Update, Delete 구현하기

지난 글에서는 React, MySQL, Node.js를 연동하여 데이터를 조회하는 글을 작성했었습니다. 이번 글에서는 데이터를 추가, 수정, 삭제해 보도록 하겠습니다. 지난번 데이터 조회때와 마찬가지로 시작하기에 앞서 MySQL이 설치되어 있어야 합니다. 이 글에서는 MySQL 설치, 세팅 방법에 대해서는 다루지 않겠습니다. 다운로드 링크만 적어놓을 테니 설치가 안되신 분은 설치 후 세팅하시기 바랍니다. 아래 경로에서 PC 운영 체제에 맞게 다운로드하여 설치 진행하시면 됩니다. 첫 번째 다운로드 링크는 MySQL 설치 파일이고, 두 번째 다운로드 링크는 MySQL을 편리하게 사용할 수 있는 툴입니다. 마지막 링크는 데이터 조회하는 방법입니다. https://dev.mysql.com/downloads/my..

[React] MySQL, Node.js 연동하여 데이터 조회하고 가져오기

이번 글에서는 React, MySQL, Node.js를 이용하여 사용 중인 MySQL에서 원하는 데이터를 가져와보도록 하겠습니다. 시작하기에 앞서 MySQL이 설치되어 있어야 합니다. 이 글에서는 MySQL 설치, 세팅 방법에 대해서는 다루지 않겠습니다. 다운로드 링크만 적어놓을 테니 설치가 안되신 분은 설치 후 세팅하시기 바랍니다. 아래 경로에서 PC 운영 체제에 맞게 다운로드하여 설치 진행하시면 됩니다. 첫 번째 다운로드 링크는 MySQL 설치 파일이고, 두 번째 다운로드 링크는 MySQL을 편리하게 사용할 수 있는 툴입니다. https://dev.mysql.com/downloads/mysql/ https://dev.mysql.com/downloads/workbench/ [데이터 조회] 먼저 저 같은..

[React] Debounce와 Throttle 사용법 및 예제

[이벤트 핸들러를 효율적으로 처리해야 하는 이유] input 태그 같은 곳에서 값을 입력할 때마다 이벤트 핸들러에 비즈니스 로직 혹은 API가 포함된 로직이 호출하게 되면 비용적인 문제도 발생하고, 유료 API 같은 경우 호출할 때마다 비용이 발생하게 됩니다. 간단한 예제를 통해 이벤트 핸들러가 보통 어떻게 호출되는지 확인해 보겠습니다. export default function App() { const onChange = e => { console.log(e.target.value); } return onChange(e)} />; } '안녕하세요'를 입력하면 'ㅇ', '아', '안', '안ㄴ', '안녀', '안녕' ... 입력할 때마다 불필요하게 이벤트가 실행되는 것을 확인할 수 있습니다. 이렇게 연속..

[React] React.lazy()란?

[React.lazy란?] React에서 컴포넌트 파일을 코드의 최상단에 import로 정의하고 동적으로 불러오기를 사용하면 에러가 발생합니다. 따라서 컴포넌트를 동적으로 불러오기 위해서는 React.lazy()를 사용해야 합니다. React.lazy() 메서드를 사용하면 동적 가져오기를 사용하여 구성 요소 수준에서 React 애플리케이션을 쉽게 코드 분할할 수 있습니다. [React.lazy를 사용하는 이유] 일반적으로 규모가 큰 React 애플리케이션은 많은 요소, 라이브러리 등으로 구성됩니다. 필요할 때만 애플리케이션의 다른 부분을 로드하려고 노력하지 않으면 사용자가 첫 페이지를 로드하는 즉시 대규모 단일 Javascript 번들이 사용자에게 전송됩니다. 이는 페이지 성능에 상당한 영향을 줄 수 있..

[React] 리액트를 선택하는 이유

[React란?] React는 UI 구축을 위한 자바스크립트 라이브러리입니다. facebook에서 제공해주는 라이브러리로서 주로 SPA(Single Page Application)을 만들 때 사용됩니다. React를 사용하면 재사용 가능한 UI 구성 요소를 만들 수 있습니다. 컴포넌트를 레고처럼 다루어 레고를 조립하듯이 컴포넌트를 조립하여 UI를 개발하여서 유지 보수하기에 유리합니다. React를 사용하면 페이지 전체를 렌더링 하지 않고 렌더링이 필요한 부분만 렌더링 할 수 있습니다. [React 등장 배경] 리액트의 등장 이전에도 많은 라이브러리/프레임워크가 존재했습니다. (jQuery, Vue.js, Angular.js 등) jQuery의 경우, 여러 종류의 웹브라우저들마다 JS를 불러오는 방식이 달..

[React] 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)

렌더링이란? 서버로부터 HTML 파일을 받아 브라우저에 보여주는 과정입니다. 여기서 서버 사이드 렌더링과 클라이언트 사이드 렌더링은 어떻게 화면을 렌더링 하는지 차이가 있습니다. 클라이언트 사이드 렌더링(CSR) 클라이언트가 서버에서 HTML, CSS, JS 파일을 내려 받습니다. 서버는 단지 JSON 파일만 보내주는 역할을 하며 HTML을 그리는 역할은 클라이언트의 JS에서 수행합니다. 즉, 사용자의 행동에 따라 필요한 부분만 불러옵니다. 분명 빈 HTML 문서를 불러왔는데 화면에서는 이쁘게 잘 나오고 있는 것을 볼 수 있습니다. 화면의 요소들은 어디서 만들어졌을까요? 바로 bundle.js 파일을 통해 만들어진 것입니다. React에서는 빌드를 할 때 코드를 전부 하나의 JS 파일로 만들어 줍니다. ..

[React] 제어 컴포넌트 VS 비제어 컴포넌트

[제어 컴포넌트와 비제어 컴포넌트란?] React에 의해서 값이 제어되는 컴포넌트를 제어 컴포넌트, React에 의해서 값이 제어되지 않는 컴포넌트를 비제어 컴포넌트라고 합니다. 우리는 보통 , 등의 입력 요소의 태그를 다룰 때, 요소에 입력되는 값을 state로 관리하거나 DOM API를 통해서 관리할 수 있습니다. 어렵게 말하자면, state로 DOM 요소의 값을 다루는 컴포넌트가 제어 컴포넌트, 후자가 비제어 컴포넌트입니다. 이렇게만 말하면 무슨 말인지 모를 수 있지만 간단한 코드랑 같이 확인한다면 이해하는데 훨씬 더 쉬울 것입니다. 바로 코드로 살펴보도록 하겠습니다. [제어 컴포넌트] 아래의 코드는 의 값이 바뀔 때 마다 changeName을 통해 state의 값을 업데이트해주는 제어 컴포넌트입니..

[React] 로컬에 있는 json으로 url을 설정하는 방법

Front-end 개발자는 주로 개발을 편하게 하기 위해 로컬 환경에서는 서버에 데이터를 직접 호출하지 않고, 로컬에 dummy 데이터를 저장하여 그 값을 불러와 개발 시간을 단축하고는 합니다. 이번 글에서는 어떻게 로컬에 있는 json 데이터를 axios를 통해 불러올 수 있는지 확인해 보도록 하겠습니다. [axios 다운로드] 테스트를 위해 axios를 먼저 설치합니다. yarn add axios npm i axios [json 파일 생성] axios로 받을 json 파일은 root > public 폴더 내에 위치시킵니다. 저는 전국에 있는 축구장을 json으로 다운 받아 public > dummy > StadiumInfo.json에 저장시켜보았습니다. [json 파일 조회] axios의 url 파라..

[React] useMemo 사용법 및 예제

[useMemo] useMemo는 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 react hooks 중 하나입니다. useMemo에서 Memo는 Memoization을 뜻합니다. memoization이란 기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. 먼저 시작하기 전에 함수형 컴포넌트에 대해 꼭 아셔야 합니다. 아래 예제를 보면서 같이 살펴보겠습니다. 함수형 컴포넌트는 렌더링 ➡️ Component 함수 호출 ➡️ 모든 내부 변수 초기화의 순서를 거칩니다. Component가 렌더링이 될 때마다 value라는 변수가 초기화됩니다. 따라서 calculate 함수는 반복적으로 호출됩니다. calculate 함수가 무거운 일을 하는 함수라면..

[React] useContext 사용법 및 예제

useContext에 대해 이해하려면 먼저 리액트의 Context에 대해 알아야 합니다. Context부터 먼저 살펴보고 useContext로 넘어가겠습니다. Context란? 리액트는 기본적으로 부모 컴포넌트와 자식 컴포넌트로 이뤄진 트리 구조를 갖고 있기 때문에 부모가 가지고 있는 데이터를 자식에서도 사용하고 싶다면 props로 데이터를 넘겨주는 것이 일반적입니다. 그러나 전달해야 하는 데이터가 있는 컴포넌트와 전달받아야 하는 컴포넌트의 거리가 멀어질수록 코드는 복잡해집니다. A컴포넌트에서 제공하는 데이터를 D컴포넌트에서 사용하려면 props를 하위 컴포넌트로 필요한 위치까지 계속해서 넘겨야 합니다. 이러한 기법을 props drilling이라고 합니다. 이러한 props drilling을 극복하기 ..

[React] useRef 사용법 및 예제

useRef란? useRef는 저장공간(변수 관리), DOM 요소에 접근을 위해 사용이 되는 React hooks입니다. useRef는 useState와 동일하게 컴포넌트 내부에서 렌더링이 일어나도 변경 가능한 상태값을 저장한다는 공통점이 있습니다. 그러나, useState와 구별되는 큰 차이점 두 가지를 가지고 있습니다. - useRef는 반환값인 객체 내부에 있는 current로 값에 접근 또는 변경할 수 있습니다. - useRef는 그 값이 변하더라도 렌더링을 발생시키지 않습니다. useRef에 대해 본격적으로 알아보기 전에 왜 useRef가 필요한지 먼저 고민해봅시다. 렌더링에 영향을 미치지 않는 고정된 값을 관리하기 위해서 useRef를 사용한다면 useRef를 사용하지 않고 그냥 함수 외부에서..

[React] useEffect란?

[useEffect란?] 애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 메커니즘입니다. 그리고 이 부수 효과가 '언제' 일어나는지보다 어떤 상태값과 함께 실행되는지 살펴보는 것이 중요합니다. 먼저 useEffect의 일반적인 형태를 살펴봅시다. function Component() { // 첫 번째 인수로는 effect 함수, 두 번째 인수로는 dependency array useEffect(() => { // do Somthing... // effect 이후에 어떻게 정리(clean-up)할 것인지 표시 return () => { .... } }, []) // 빈 배열을 입력하는 경우 렌더링 될 때 마다 실행 } 첫 번째 인수로는 실행할 부수 효과가 포함된 함수들, 두 번..

[React] useState란?

[useState란?] useState는 함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅입니다. const [state, setState] = useState(초기값); useState의 인수로는 사용할 state의 초깃값을 넘겨줍니다. 아무런 값을 넘겨주지 않으면 초깃값은 undefined입니다. useState 훅의 반환 값은 배열이며, 배열의 첫 번째 원소로 state 값 자체를 사용할 수 있고, 두 번째 원소인 setState 함수를 사용해 해당 state의 값을 변경할 수 있습니다. 만약 useState를 사용하지 않고 함수 내부에서 자체적으로 변수를 사용해 상태값을 관리한다고 가정해보겠습니다. function Component() { let state = 'hel..

[React] 리덕스 총정리 및 예제

[Redux란?] 1. Redux 등장 배경 MVC 패턴 형식으로 state가 변화되면 Model, View, Controller에 이벤트가 발생하고 값이 변화하는 구조였습니다. 즉, 양방향 데이터 흐름이었죠. 양방향 데이터 흐름은 복잡하고 데이터 흐름을 판단하기 힘든 구조입니다. 이러한 해결방법으로 단방향 데이터 흐름이 있습니다. 그게 바로 Redux입니다. Redux는 MVC 패턴에서의 단점을 개선하는 것이 목적이었고 그 해결책으로 단방향 데이터 흐름을 적용하였습니다. View는 MVC 패턴과 달리 데이터를 변경시키지 않고 Action을 넘겨줍니다. 이때 Action은 반드시 Dispatcher를 통해서 데이터가 변경됩니다. 변경된 데이터를 Store를 통해 View가 전달받습니다. 2. Redux ..

[React] 배열로 state 변수 선언하는 이유 (useState)

[state 변수 선언] react에서 함수형 컴포넌트 형식으로 state 변수를 선언할 때, 우리는 아래 코드와 같이 useState() 함수를 사용해서 배열(대괄호)을 이용하여 state 변수를 선언하는 것을 보셨을 겁니다. const [count, setCount] = useState(0); [배열 구조 분해] 첫번째 인덱스에는 변수명을 입력하고, 두 번째 인덱스에는 set을 붙여서 state 변수를 선언하였습니다. const [fruit, setFruit] = useState('banana'); 위 자바스크립트 문법은 배열 구조 분해라고 하고, fruit과 setFruit, 총 2개의 값을 만들고 있습니다. 즉, useState를 사용하면 fruit이라는 첫 번째 값과 setFruit라는 두 번째..

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). 해결 방법

이번 글에서는 You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). 에러 해결 방법에 대하여 알아보겠습니다. You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). 위의 안내 문구에 따라 다음과 같이 명령어를 실행하였지만, 아래와 같은 에러가 발생해서 진행이 되지 않았습니다. npm uninstall -g create-react-app yarn global remove create-react-app 그래서 해결 방법을 고민하다가, @latest를 붙여 npm을 최신 버전으로 업그레이드해서 명령어를 입력해서 실..

< 1 2 3 >

티스토리툴바