React 에서 files 다루기

React 를 통해 파일 업로드 기능을 구현하기 위해 우리는 미리 알아야할 지식이 있습니다.첫 번째는 이미지와 비디오, 오디오 파일과 같은 파일이 어떻게 이루어져 있는 지를 알아야 합니다.두 번째는 input 태그의 type 이 file 일 때 미리보기 기능의 경우 올린 파일의 URL 객체의 createObjectURL 메소드를 이용하는 것세 번째는 React 의 useRef Hook 을 사용해 직접적으로 HTML 요소의 reference 값에 접근하는 법 입니다. Blob 이란? 우리가 웹에서 객체를 다룰 때 흔히 json 이라는 형식의 key, value 쌍으로 이루어진 형식으로 다루게 됩니다.하지만 파일이나 영상 이미지와 같이 용량이 큰 파일은 어떯게 다루어야 할까요?? 우리는 웹에서 이렇게 멀티미..

• format_list_bulleted React
• · 2024. 7. 29.
• textsms

Axios

Axios를 간단히 소개하자면 fetch() 함수처럼 request를 보내고 response를 받을 수 있는 라이브러리입니다. fetch() 함수랑 사용법은 비슷하지만 조금 더 편리하게 쓸 수 있는 라이브러리라고 생각하시면 됩니다. Axios를 설치하고 사용하는 방법에 대해 간략하게 정리한 글입니다.설치npm install axiosfetch vs axiosfetch 가 기존에 있지만 왜 axios 를 사용하는 것일까요?? 그 이유는 axios 가 더 직관적이고 생략할 수 있는 부분이 있으며 간단하게 사용할 수 있기 때문입니다.  fetchasync function getProducts() { const res = await fetch('https://www.naver.com/hello'); cons..

• format_list_bulleted React
• · 2024. 7. 28.
• textsms

React Redux

저는 주로 전역 상태관리를 recoil 로작업하고 있었습니다. 그러다 문득 redux 기능에 대해서 궁금해졌고정리해 보았습니다.사용하는 이유state 종속성 탈피우리는 useState 를 사용 할 경우 컴포넌트 내부에 state 를 만들고, 함수로 state 를 바꿉니다.그렇기 때문에 state 는 컴포넌트에 종속되는 것은 당연한 결과 입니다. redux 는 컴포넌트에 종속되지 않고, 상태관리를 컴포넌트 바깥에서 합니다.프로젝트 루트레벨에서 store 라는 곳에 state 를 저장하고, 모든 컴포넌트는 store 에 구독을 하면서 state 와 그 state 를 바꾸는 함수를 전달 받게 되죠.함수를 바꿈으로 state 가 변경되면 해당 state 를 바라보고 있는 컴포넌트는 모두 리렌더링 됩니다. 기본 ..

• format_list_bulleted React
• · 2024. 7. 10.
• textsms

useCallback

특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용합니다. useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면,useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다. 함수 메모이제이션useCallback 은 함수를 memoization 하기 위해서 사용되는 Hooks 함수 입니다.첫번째로 인자로 넘어온 함수를, 두번째 인자로 배열을 받습니다.이 배열은 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해줍니다.const memoizedCallback = useCallback(()=>{}, []); 예를 들어, 어떤 React Component 안에 함수가 선언이 되어 있다면 이 함수는 해당 Component 가 리렌더링 될 때마다 새로운 함수를 생성하게..

• format_list_bulleted React
• · 2024. 5. 3.
• textsms

useMemo

useMemo 에서 memo 는 memoization 을 뜻하는데 이는 그대로 해석하면 메모리에 넣기 라는 의미이며 컴퓨터 프로그래밍이동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여실행 속도를 빠르게 하는 기술입니다.memoization기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법 입니다. 만약 어떤 함수가 있을 때 해당 함수가 들어있는 컴포넌트가 리렌더링 된다면 모든 내부 변수가 초기화 되기 때문에 함수도 다시 만들어지게 됩니다. 하지만 useMemo 를 사용한 함수는 컴포넌트가 리렌더링 된다면 memorize 된 함수를 재사용하기 때문에 함수를 새로 만들지 않습니다.설명useMemo 는..

• format_list_bulleted React
• · 2024. 5. 3.
• textsms

useEffect

React의 useEffect 훅은 함수 컴포넌트 내에서 부수 효과(side effects)를 처리하기 위해 사용됩니다. 리액트 공식 문서에서 보면 "리액트는 side effect라는 것을 처리하기 위해 useEffect를 사용합니다."라고 적혀 있습니다.side effect일반적으로 함수 또는 프로그램의 실행이 외부 환경에 영향을 미치는 것을 의미합니다. side effect 예시데이터 가져오기: API 호출, 데이터베이스 쿼리 등의 비동기 작업을 수행할 때 사용됩니다.상태 업데이트: 특정 상태 값이 변경될 때 다른 상태 값을 업데이트하는 작업에 활용됩니다.DOM 조작: 컴포넌트가 렌더링 된 후에 DOM 요소에 접근하고 조작하는 작업을 수행할 때 사용됩니다.이벤트 리스닝: 특정 이벤트(예: 클릭, 스크..

• format_list_bulleted React
• · 2024. 5. 1.
• textsms

useState

React 에서 상태를 관리할 때 가장 기본적인 useState 를 정리해봅니다. useState 는 가장 기본적인 상태 관리 함수로써 사용됩니다.사용법도 아주 간단하지만 세부적으로 들어가면 모르는 부분이 있을 수 있다고 생각하기 때문에 실수할 수 있는 부분을 줄이면 좋겠다 싶어 정리해 보았습니다.useStateimport { useState } from 'react';const [data, setData] = useState('initialState'); useState 를 배우면서 알아야 할 가장 중요한 부분을 미리 정리합니다. 1. useState 를 사용할 때 배열 구조 분해를 사용하여 변수의 이름을 짓는 것이 규칙입니다.2. useState() 안에 매개변수로 들어가는 것은 초기 상태로서 이 매..

• format_list_bulleted React
• · 2024. 1. 7.
• textsms