온라인 강의(유데미, 인프런 등)/React 완벽 가이드(유데미) (25) 썸네일형 리스트형 [react] 절대경로/상대경로 & React에서 import시 절대경로 사용하기 Route - 절대경로 vs 상대경로 상대경로 : "./경로값"나 "경로값"처럼 상대 경로값인 경우, 변경될 경로값은 현재 URL의 경로값을 기준으로 하여 변경됨 -> 경로값이 현재 경로 값 뒤에 붙는다고 생각하면 됨 절대경로 : 경로값이 "/"로 시작하는 절대 경로값인 경우, 현재 URL 경로값을 작성된 경로값으로 변경됨 import { Link } from 'react-router-dom'; // 현재 URL의 경로 "/about" // 절대 경로, 클릭시 "/apple"로 변경 apple // 상대 경로, 클릭시 "/about/apple"로 변경 banana // 상대 경로, 클릭시 "/about/mango"로 변경 mango Router 관련 개념이 아주 잘 정리되어 있는 블로그를 발견했다! 작성.. [react & css] position 개념 간단하게 정리하기 사용할 때마다 매번 헷갈렸던 position 개념에 대해 구글링한 후 잘 정리되어있는 글을 바탕으로 이해한 뒤 간단하게 정리했다. 나중에 또 헷갈리면 휘뚜루마뚜루 이해하고 후딱 나갈 수 있게! position position 속성은 태그를 어떻게 위치시킬지를 정의하며, 아래의 5가지 값을 갖는다. static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정 불가 absolute: 부모가 relative면 부모 기준, 없으면 전체 문서 기준으로 좌표 지정 relative: 원래 있던 위치를 기준으로 좌표 지정 fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정 inherit: 부모 태그의 속성값을 상속 좌표를 지정 해주기 위해서는 left, right, .. [react & Recoil] Recoil atom, selector 개념 간단하게 살펴보기 1월에 진행했었던 메인 프로젝트의 상태관리 라이브러리로 Recoil을 선택하여 사용했었다. 그때는 시간적 여유가 부족해 필요한 개념만 구글링해서 휘뚜루마뚜루(?) 프로젝트에 적용시키느라 제대로 Recoil에 대한 정리를 못한 것 같아 간단하게 개념을 정리해보려고 한다. 메인프로젝트 코드를 다시 봤을 때 Recoil 관련 함수들의 사용법이 가물가물해 위기를 느껴,,,^^7 최근에 Redux, Redux toolkit에 관한 개념을 공부한 후 Recoil을 보니 새삼 Recoil 사용법이 정말 간단하다는게 느껴졌다. 아직 두 개 다 익숙하지 않지만 개념을 조금 공부해보니 Redux은 러닝커브도 높은 편이고 관련 라이브러리도 많아 다른 라이브러리들에 비해 복잡해보이지만, 가장 오래된 상태관리 라이브러리 답게 .. [react & RTK] React Toolkit 비동기 작업 처리하기(createAsyncThunk) Redux reducer에는 순수하고 Side-effects(데이터 요청(fetch) 등의 비동기 작업, 브라우저 캐시, 로컬스토리지, setTimeout 등)이 없으며 동기적인 기능이 들어있어야 한다. 따라서 비동기적인 로직은 컴포넌트 내부(ex. useEffect()) 또는 action creators 안에서만 사용해야 한다. 하지만 우리가 주로 만드는 애플리케이션은 다양한 API 요청들을 수반하여 Side-effects라는 것은 반드시 존재하기에 현재 저장소의 상태를 디스패치하거나 확인하여 비동기 논리가 저장소와 상호작용하도록 해야 하는데, 이를 가능하게 해주는 것이 Redux의 미들웨어이다. Redux에는 여러 종류의 비동기 미들웨어가 있으며 각각 다른 구문을 사용하여 논리를 작성할 수 있다. 가.. [react & RTK] Redux Toolkit 개념 및 예시 간단하게 살펴보기 Redux Toolkit Redux가 공식적으로 만든 라이브러리로, Redux를 쉽게 사용할 수 있게 도와준다. # Redux Toolkit 설치 방법 // Redux + Plain JS template npx create-react-app my-app --template redux // Redux + TypeScript template npx create-react-app my-app --template redux-typescript // 기존 프로젝트에서 시작하기 npm install @reduxjs/toolkit configureStore (createStore → configureStore) reducer를 전달할 때는 reducer 라는 property name으로 전달해야 한다. slice에서.. [react & Redux] Redux 개념 및 예시 간단하게 알아보기 Redux Redux를 이용하면 전역상태 관리를 할 수 있다. 모든 JavaScript 프로젝트에서 Redux를 사용할 수 있으며 React에서 Redux를 연결하기 위해선 react-redux를 추가로 설치해야 한다. npm install redux react-redux 크게 전역 상태를 보관하는 하나의 중앙 데이터 저장소 Store, 상태 저장소에 접근하기 위한 reducer, reducer에 행동을 지시하는 action, 저장소에 보관된 상태를 가져오는 subscription으로 나뉘어 있다. 전역 상태 관리 외에도 로컬스토리지 상태저장, 버그리포트 첨부 기능 등의 기능들을 사용할 수 있어 상태 및 변경되는 데이터를 관리하는데 도움이 된다. Store 리액트에서는 Store를 주로 index.js에.. [react] HTTP 상태 코드 및 예외처리 HTTP 상태 코드 2XX번대 : 서버가 클라이언트의 요청을 성공적으로 처리했다는 의미 4XX번대 : 클라이언트의 요청이 유효하지 않아 서버가 해당 요청을 수행하지 않았다는 의미 5XX번대 : 서버 오류로 인해 요청을 수행할 수 없다는 의미 // async와 await를 사용하여 위의 함수를 아래와 같이 만들 수 있다 function 함수() { fetch('url') .then(response => response.json()) // 응답을 JSON 형태로 파싱 .then(data => {}) } // async, await 사용 async function 함수() { const response = await fetch('url'); const data = await response.json(); } .. [react] 최적화 - React.memo() & useMemo() & useCallback() React는 먼저 컴포넌트를 렌더링(rendering) 한 뒤, 이전에 렌더링 된 결과와 비교하여 DOM 업데이트를 결정한다. 만약 렌더링 결과가 이전과 다르다면, React는 DOM을 업데이트한다. 다음 렌더링 결과와 이전 결과의 비교는 빠르다. 하지만 어떤 상황에서는 이 과정의 속도를 좀 더 높일 수 있다. React.memo : 컴포넌트의 결과 값을 memoized하여 불필요한 re-rendering을 관리 컴포넌트가 React.memo()로 래핑 되면 React는 컴포넌트를 렌더링 하고 결과를 메모이징(Memoizing)한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다. React.memo(component, compFunc).. 이전 1 2 3 4 다음
