도리쓰에러쓰

1. useCallback()과 useMemo()란? useCallback()과 useMemo()는 메모이제이션(Memoization) 된 값을 반환한다. 차이점이 있다면 useCallback()은 메모이제이션된 함수를 반환하고 useMemo()는 어떠한 타입에 상관 없이 메모이제이션된 값을 반환한다. 💡 메모이제이션(Memoization) : 연산의 결과값을 메모리에 저장해두고 이전 값과 결과가 동일할 때 재사용하는 기법 📌 useCallback()과 useMemo()를 알기 전 알고 있어야 할 React가 리렌더링을 하는 조건들이 있다. 1️⃣ 자신의 state가 변경될 때 2️⃣ 부모 Component로부터 전달받은 props가 변경될 때 3️⃣ 부모 Component가 리렌더링될 때 (자식 Com..

🔽 우선 forwardRef()을 알기 전에 ref를 알아야 하는데 아래 게시물을 참고하면 좋을 것 같다. [React] Ref 사용하여 DOM 요소에 접근하기 - useRef() 1. Ref란? React에서 DOM에 직접 접근하기 위해 사용한다. HTML로 예를 들자면, 에 접근하고 싶을 때 "div-id"라는 id를 사용하여 DOM 요소에 접근한다. HTML을 작성할 때 id로 DOM 요소를 접근하는 것처럼, Rea dori-coding.tistory.com 1. forwardRef()란? React에서 일반적으로 사용할 수 없는 prop이 몇 가지 있다. 그 중 ref prop도 HTML Element 접근이라는 특수한 용도로 사용되기 때문에 일반적인 prop으로 사용할 수 없다. React Co..

1. useContext()란? 보통 부모 Component에서 자식 Component로 props를 통해 데이터를 전달하는데, 그 깊이가 깊어진다면 거쳐가야 하는 Component도 많아진다. 그렇게 된다면 코드를 반복적으로 작성해야 하는 일도 많아지고, 변수명이 바뀌면 거쳐가는 모든 Component에서 변수명을 수정해야 하는 등 비효율적인 문제가 발생한다. 이런 비효율적인 문제를 해결하는데에 Context가 꽤나 유용하다. Context를 사용하면 전역적으로 데이터를 공유하기 때문에 데이터가 필요한 Component에서 바로 사용이 가능하게 된다. React Hook인 useContext()는 Context를 좀 더 편하게 사용할 수 있게하는데, 우선 Context API의 개념에 대해 알아보도록 ..

1. Ref란? React에서 DOM에 직접 접근하기 위해 사용한다. HTML로 예를 들자면, 에 접근하고 싶을 때 "div-id"라는 id를 사용하여 DOM 요소에 접근한다. HTML을 작성할 때 id로 DOM 요소를 접근하는 것처럼, React에서도 DOM 요소에 직접 접근하기 위해 사용하는 것이 Ref이다. 2. Ref 사용하기 아래 예제는 "활성화" 버튼을 클릭하면 비활성화(disabled) 되어 있던 input이 활성화되고, "초기화"버튼을 클릭하면 원래의 상태로 input을 비활성화 되는 Element를 제어하는 코드이다. import { useRef } from "react"; const Field = () => { const inputRef = useRef(null); const focus..

React에서는 Form을 다루는 2가지 방법이 있는데, 바로 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)이다. 과연 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)는 무엇인지 지금부터 알아보도록 하자. 1. 제어 컴포넌트(Controlled Component) 💡 React 공식 문서에서 제어 컴포넌트(Controlled Component)에 대한 설명은 다음과 같다. 제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의..

이번에 개인 프로젝트를 공공데이터포털에서 제공하고 있는 Open API를 기반으로 만들려고 한다. 아래 공공데이터포털 사이트에 가입하여 원하는 API에 대해 활용신청을 하면 된다. 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datase www.data.go.kr React 프로젝트 기본 세팅은 아래와 같다. 🔶 프로젝트 기본 세팅 1. 터미널에 npx create-react-app 프로젝트명 입력하여 프로젝트 생성 2. 터미널에 npm install add axios 입력하여 axios 라이브러리 설치 3. App.js에 axios 라이브러리 impo..

이번 게시물에선 유저가 메인페이지 접속하면 서버가 리액트로 만든 html 파일을 보내주는 것을 해보겠습니다. 서버만들 때 Express + MongoDB를 사용하면 JS만으로도 풀스택 개발을 할 수 있는데, 여기에 React를 더할 수 있습니다. 1️⃣ express 라이브러리를 설치합니다. 1) 작업 폴더를 오픈한 상태에서 터미널에 npm init 입력 후 선택하라고 뜨는 것들을 끝날 때까지 Enter합니다. 2) npm install express 입력합니다. 3) server.js 파일을 만들고 아래 코드를 작성합니다. const express = require('express'); const path = require('path'); const app = express(); const http =..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] shop 홈페이지 기능 완성하기 가이드 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux5 :: useSelector, useDispatch 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux4 :: dispatch로 데이터 보내기 저번 게시물에.. dori-coding.tistory.com state 데이터를 기억하게 하려면 2가지 방법이 있습니다. 1️⃣ 서버로 보내서 DB에 저장하기 2️⃣ 브라우저 저장공간인 localStorage에 저장하기 저는 localStorage에 데이터를 저장해보도록 하겠습니다. localStorage에 대해서 알고 싶은 분들은 아래 게시물을 참고해주시면 ..