티스토리

멍때리는쌀

검색하기

블로그 홈

멍때리는쌀

ssal-ssal.tistory.com/m

쌀쌀 님의 블로그입니다.

구독자: 47

방명록 방문하기

주요 글 목록

[react] Custom hook Custom hook이란? (1) input 갯수만큼 늘어나는 useState, event handler 들 // src/App.jsx import React from "react"; import { useState } from "react"; const App = () => { // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [title, setTitle] = useState(""); const onChangeTitleHandler = (e) => { setTitle(e.target.value); }; // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [body, setBody] = useState(""); cons.. 공감수 0 댓글수 0 2024. 2. 27.
[React] React Query React Query란? 기존 미들웨어의 한계 보일러 플레이트 : 코드량이 너무 많다. 규격화 문제 : Redux가 비동기 데이터 관리를 위한 전문 라이브러리가 아니다.(규격화 문제) 리액트 쿼리의 강점 : 너무 쉽고, 책임에서 자유롭다 보일러 플레이트 만들다가 오류날 일이 없다. 내가 만든 부분 아니기 때문에 잘못이 일어난들 내 잘못이 아니다. 사용방법이 기존 thunk 대비 너무 쉽고, 직관적이다. 주요 키워드 Query 어떤 데이터에 대한 요청을 의미한다. axios의 경우 get 요청과 비슷하다. const response = await axios.get(’http://localhost:3000/todos’) Mutation 어떤 데이터를 변경하는 것. 어떤 데이터라 함은, 데이터 그룹 그 자체를.. 공감수 0 댓글수 0 2024. 2. 26.
[react] 리액트 불변성 불변성(immutability)란? 불변성이란 한번 생성된 원본의 데이터는 변경 시키지 않고, 데이터 변경 시 새로운 원본을 만드는 디자인 패턴이다. 불변성X -> mutable - 원본 데이터가 변할 수 있다는 의미 - 배열의 push 메소드 const arr = [1,2,3,4,5]; arr.push(6); console.log(arr); // [1,2,3,4,5,6] // push 메소드는 원본 배열인 arr의 값 자체를 변경시킨다. 불변성O -> immutable - 원본 데이터가 변할 수 없다는 의미 - 배열의 map 메소드 const arr = [1,2,3,4,5]; arr.map(el => el * 2); // [2,4,6,8,10] 이 리턴됨. console.log(arr); // [1,2.. 공감수 0 댓글수 0 2024. 2. 22.
[React] Redux Toolkit 리덕스 툴킷(Redux Toolkit)이란? (1) 리덕스 툴킷 리덕스를 개량한 것 리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 지나치게 복잡하여 이를 보다 편하게 쓰기 위해 만든 것 줄여서 RTK라고도 한다. 일반 리덕스와 코드 비교 (1) 툴킷 설치하기 CRA를 통해 새로운 프로젝트를 생성하고, yarn을 통해 아래 패키지를 설치한다. yarn add react-redux @reduxjs/toolkit (2) count 프로그램 코드 비교 // 일반 리덕스 예시 코드 // Action Value const ADD_NUMBER = "ADD_NUMBER"; const MINUS_NUMBER = "MINUS_NUMBER"; // Action Creator export const addNumb.. 공감수 0 댓글수 0 2024. 2. 16.
[React] Custom Sidebar 구현하기 아래와 같은 Custom Sidebar를 구현해보자. 1. 아래와 같이 CustomSiderbar.jsx 파일을 만든다. (styled component에서 props.theme...은 themeProvider에서 내려준 스타일이다) import React from 'react'; import styled from 'styled-components'; const CustomSidebar = ({ items, setItem, selectedItem }) => { return ( {items.map((item, index) => ( { setItem(item); }} $isSelected={item === selectedItem} > {item} ))} ); }; export default CustomSid.. 공감수 0 댓글수 0 2024. 2. 13.
[React] Custom Modal 창 구현하기 오늘은 간단한 커스텀 모달창을 구현하는 방법을 알아보도록 하겠다. 1. React 프로젝트를 생성한다. 2. 프로젝트 생성후 CustomModal.jsx라는 파일을 만든다 3. 다음과 같은 코드를 작성한다. import React from 'react'; import styled from 'styled-components'; import { IoClose } from 'react-icons/io5'; const StyledModalContainer = styled.div` position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.35); z-index: 1000; `; const Style.. 공감수 0 댓글수 1 2024. 2. 13.
[React] 네이버 도서 검색 API CORS Error 해결법 네이버 도서 검색 API를 사용하는 와중 아래와 같은 에러가 발생했다. 교차 출처 리소스 공유(Cross-Origin Resource Sharing,CORS)란? CORS(교차 출처 리소스 공유) 에러는 웹 애플리케이션에서 발생하는 보안 관련 이슈이다. 이 에러는 다른 출처(origin)에서 온 리소스에 접근할 때 발생한다. 출처란 URL의 프로토콜, 호스트, 포트가 모두 같은 것을 의미한다. 예를 들어, http://example.com에서 http://example.com/api에 요청을 보내는 것은 같은 출처에 속하므로 문제가 되지 않는다. 하지만 http://example.com에서 http://api.example.com/api에 요청을 보내는 것은 다른 출처에 속하므로 보안 정책으로 인해 문제.. 공감수 0 댓글수 0 2024. 2. 8.
React Router Dom , hooks react-router-dom이란? - SPA인 리액트에서 여러 페이지를 구현할 수 있게 해주는 패키지이다 (1) 패키지 설치하기 yarn add react-router-dom (2) 사용 순서 페이지 컴포넌트 생성 Router.js 생성 및 router 설정 코드 작성 App.js에 import 및 적용 페이지 이동 테스트 1. 페이지 컴포넌트 생성 2. Router.js 생성 및 route 설정 코드 작성 브라우저에 URL을 입력하고 이동했을 때 우리가 원하는 페이지 컴포넌트로 이동하게 만드는 부분. URL 1개당 페이지 컴포넌트를 매칭해준다. 이 한개의 URL을 Route 라고 한다. 그리고 Route들을 설정하는 코드는 Router.js 라는 파일을 별도로 분리해서 많이 작성하곤 한다. src안에.. 공감수 1 댓글수 2 2024. 2. 6.
[React] Redux - Payload 및 Ducks 패턴 payload란? "페이로드(payload)"는 데이터 패킷(packet)이나 메시지에 담겨 있는 유용한 정보를 나타낸다. 리덕스에서의 페이로드는 액션(Action) 객체의 속성 중에서 실제로 필요한 데이터를 의미한다. 액션은 리덕스 스토어에서 어떤 변화를 일으킬지 나타내는 객체이며, 이 액션 객체 안에 포함된 정보가 페이로드이다. 작성 예시는 다음과 같다. // payload가 추가된 액션객체 {type: "ADD_NUMBER", payload: 10} // type뿐만 아니라 payload라는 key와 value를 같이 담는다. State를 변경하는데 있어 만약 리듀서에게 어떤 값을 같이 보내줘야 한다면 payload를 액션객체에 같이 담아 보낸다. ⭐️ 꼭 payload라는 이름을 통해서 보내야하는.. 공감수 0 댓글수 0 2024. 2. 3.
[React] Redux Refactoring(action creators, action values) Action Creator (1) Action Creator 만들기 액션객체를 한 곳에서 관리할 수 있도록 “함수"와 액션 value를 상수로 만들어보자. PLUS_ONE 이라는 액션 객체를 만드는 함수를 만든다면 아래와 같이 만들 수 있는데, 우리는 이것을 Action Creator라고 부른다. 말 그대로 액션을 만드는 생성자 인 것. // src/redux/modules/counter.js const PLUS_ONE = "PLUS_ONE"; // value는 상수로 생성 // 액션객체를 반환하는 함수 생성 // export 가 붙는 이유는 plusOne()는 밖으로 나가서 사용될 예정이기 때문입니다. export const plusOne = () => { return { type: PLUS_ONE, .. 공감수 1 댓글수 1 2024. 2. 1.
[React] Redux - 카운터 프로그램 만들기2 리덕스의 흐름 도식화 View 에서 액션이 일어난다. dispatch 에서 action이 일어나게 된다. action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다. middleware 에서 명령내린 일을 수행하고 난뒤, reducer 함수를 실행한다. (3, 4번은 아직 몰라도 됩니다!) reducer 의 실행결과 store에 새로운 값을 저장한다. store의 state에 subscribe 하고 있던 UI에 변경된 값을 준다. 출처 : https://velog.io/@annahyr/리덕스-흐름-이해하기 1. counter.js 모듈의 state 수정 기능 만들기 (+ 1 기능 구현해보기) (1) 어떻게 counter.js 모듈에 있는 state의 값을 변경할 수 있을까? u.. 공감수 0 댓글수 0 2024. 1. 31.
[React] useRef란? useState와의 차이 useRef? 리액트 공식 문서에서는 useRef를 다음과 같이 정의한다. useRef() Hook은 DOM ref만을 위한 것이 아닙니다. 본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다. 만약 를 사용하여 React로 ref 객체를 전달한다면, React는 모드가 변경될 때마다 변경된 DOM 노드에 그것의 .current 프로퍼티를 설정할 것입니다. useRef는 내용이 변경될 때 그것을 알려주지는 않는다는 것을 유념하세요. .current 프로퍼티를 변형하는 것이 리렌더링을 발생시키지는 않습니다. 즉 useRef와 useState와의 가장 큰 차이점은 렌더링 여부로 정의할 수 있다. 코드로 한번 살펴보자. useState import { useRe.. 공감수 0 댓글수 0 2024. 1. 31.
[React] Redux + 설정 카운터 프로그램 만들기 리덕스 설정 (1) 리덕스 설치 리액트에서 리덕스를 사용하기 위해서는 2개의 패키지를 설치해야 한다. react-redux 라는 패키지는 리덕스를 리액트에서 사용할 수 있도록 서로 연결시켜주는 패키지이다. yarn add redux react-redux 아래와 같은 의미 yarn add redux yarn add react-redux (2) 폴더 구조 생성하기 설정 코드 작성 (1) src/configStore.js import { createStore } from "redux"; import { combineReducers } from "redux"; /* 1. createStore() 리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수) 입니다. 리덕스는 단일 스토어로 모든 상태 트리를 관리한다고.. 공감수 0 댓글수 1 2024. 1. 29.
[React] 리덕스(Redux)란 무엇인가? 리덕스가 필요한 이유 (1) useState의 불편함 컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 부-모 관계가 되어야 한다. 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 부모 컴포넌트를 거쳐야만 한다. 즉, 정작 부모컴포넌트에서는 그 값이 필요가 없어도 단순히 손자 컴포넌트에게 전달하기 위해 불필요하게 거쳐야만 하는 것을 의미한다. (조부모 → 부모 → 손자) 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다. => 리덕스를 사용하면 State를 공유하고자 할때 부-모 관계가 아니여도 되고, 중간에 의미없이 컴포넌트를 거치지 않아도 된다. 그리고 자식 컴포넌트에서 만든 State를 부모 컴포넌트에서도 사용할 수 있게 된다. (2) Global state와 Local .. 공감수 0 댓글수 1 2024. 1. 27.
[React] DOM과 Virtual DOM 개요 리액트(react.js)나, 뷰(Vue.js)는 가상돔(Virtual DOM)을 사용해서 원하는 화면을 브라우저에 그려주는데, 자체적으로 상당히 효율적인 알고리즘을 사용해서 그려주기 때문에 그 속도가 굉장히 빠르다. 그렇다면 돔은 무엇이고 가상돔은 대체 무엇인가? DOM 1) DOM이란? 가상돔을 이해하기 위해서는 먼저 DOM(Document Object Model)을 이해할 필요가 있다. 브라우저를 돌아다니다 보면 수 많은 컴포넌트로 구성된 웹페이지들을 보게 되는데, 그 페이지를 문서(document)라고 하고, 페이지를 이루는 컴포넌트를 엘리먼트(element)라고 한다. DOM은 이 엘리먼트를 tree 형태(= DOM TREE)로 표현한 것이다. 트리의 요소 하나하나를 ‘노드’라고 부르고, .. 공감수 0 댓글수 1 2024. 1. 25.
React Hooks - useContext(Context API)란 무엇인가? useContext란? 1. react context의 필요성 리액트에서 부모 ->자식 컴포넌트로 데이터를 전달해 줄 때 부모->자식->자식->자식 이런 식으로 너무 깊이가 깊어지면, prop drilling 현상이 일어난다. prop drilling의 문제점은 깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트로부터 왔는지 파악이 어려워지고, 어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어지니 대처가 늦을 수 밖에 없다. 그래서 등장한 것이 바로 react context API라는 것이다. useContext hook을 통해 우리는 쉽게 전역데이터를 관리할 수 있게 되었다. useContext 필수 개념 createContext : context 생성 Consumer : context 변화 감지 Pr.. 공감수 0 댓글수 1 2024. 1. 24.
React에서 자주 사용하는 자바스크립트 배열 API 자바스크립트에서 자주 쓰는 배열 API를 정리해보자 const initialArray = ["banana", "apple", "cherry", "date", "elderberry"]; const [array, setArray] = useState(initialArray); const [result, setResult] = useState(""); const [query, setQuery] = useState(""); /** 함수들 */ const handleForEach = () => { let tempResult = ""; array.forEach((fruit, i) => { tempResult += `${i}:${fruit} ,`; }); setResult(tempResult); }; //배열을 순회.. 공감수 0 댓글수 0 2024. 1. 22.
React 정의 및 SPA 프레임워크 종류 React란? A JavaScript library for building user interfaces 웹 또는 앱 애플리케이션의 UI, 즉 보여지는 부분(프론트 엔드 영역이죠)을 구축한다 SPA(Single Page Application) 아키텍쳐 Single Page Application, 한 개의 페이지로 이루어진 애플리케이션 이라는 뜻 MPA(Multi Page Application)과는 상반된 개념 기존 MPA의 문제점 사용자의 인터렉션에 대한 잦은 리렌더링(re-rendering). 즉, 페이지가 갱신되는 상황이 잦음 SPA 특징과 장점 딱 한개의 페이지(Single Page)로 구성된 웹 앱이다. 서버에 1회 리소스를 요청한다. 그 이후에는 필요할 때, 데이터만 받아와서 기존 페이지를 ‘수정.. 공감수 0 댓글수 0 2024. 1. 17.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.