React

React Query 란?React Query는 React Application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와주는 라이브러리입니다.  React Query가 만들어진 이유리액트 쿼리는 서버 상태 관리의 복잡성을 해결하고, 데이터 페칭, 캐싱, 동기화 등의 작업을 간소화하기 위해 만들어졌습니다. 이를 통해 클라이언트 상태와 서버 상태를 구분하여 효율적으로 관리하고, 반복적인 로직을 줄여 개발 속도와 사용자 경험을 향상시키기 위해 설계되었습니다.React Query의 장점(사용하는 이유)데이터 페칭 관리 간소화: 리액트 쿼리는 서버에서 데이터를 가져오고 이를 관리하는 과정을 매우 간편하게 해줍니다. 데이터 페칭, 캐싱, 동기화, 그리고 업데이트 등의 ..

들어가기 앞서해당 글은 프로젝트를 진행 후, 개인적으로 웹서비스 최적화를 위해  알아본 기술들을 정리하기 위해 적는 글입니다. React.lazy() React 컴포넌트를 동적으로 가져올 수 있는 함수로 dynamic import를 할 수 있게 해준다. 이는 import()를 통해 불러오는 요소들을 무조건 불러오는 것이 아닌 사용자가 실제로 사용할 때만 로드될 수 있게 해주며, 초기 페이지 로딩 시간을 줄여준다.  suspense React Suspense는 react lazy를 통해 지연 로딩된 컴포넌트가 로드되는 동안 로드 상태를 처리하고, 대체 콘텐츠를 표시하기 위해 사용된다.  이는 지연 로딩된 컴포넌트가 로드되는 동안 표시할 내용을 지정하는 fallback Props가 필요하며, 기본적으로 로딩..

부모 component 에 있던 state 를 자식 component 에사 사용하려면 어떻게 해야하나요? 부모 >> 자식 >> 자식 >> 자식 .... 이렇게 상위 componet에서 props를 통해 전송해주면 됩니다. 프로젝트의 크기가 작다면 상관없지만 프로젝트의 크기가 커서 일일히 하나하나 전송해야할 경우 state 공유가 힘들어지고 너무 깊이가 깊어지면 prop driling 현상이 일어나며, 비용 또한 늘어나게됩니다. 여기서 말하는 "비용"은 코드 작성, 유지보수, 디버깅, 성능 등을 포함한 개발 프로세스의 비용을 의미합니다. 큰 프로젝트에서 상태를 일일이 전달해야 한다면 코드량이 늘어나고 유지보수가 어려워질 수 있으며, 이는 개발 비용을 증가시킬 수 있습니다. 그래서 오늘은 상태관리를 위해 만..

애니메이션 만들고 싶으면 1. 애니메이션 동작 전 스타일을 담을 className 만들기 2. 애니메이션 동작 후 스타일을 담을 className 만들기 3. transition 속성도 추가 4. 원할 때 2번 탈부착 이게 끝입니다. CSS 잘쓰면 모든 애니메이션 알아서 만들 수 있습니다. 저번에 만들었던 탭의 내용이 서서히 등장하는 fade in 애니메이션을 만들어봅시다. 1. 애니메이션 동작 전 2. 애니메이션 동작 후 className 만들기 .start { opacity : 0 } .end { opacity : 1; } 애니메이션 동작 전엔 투명도가 0, 동작 후엔 투명도가 1 3. transition 추가 .start { opacity : 0 } .end { opacity : 1; transit..

오늘은 쇼핑몰에서 흔히 볼 수 있는 탭 UI를 만들어봅시다. 버튼 3개와 박스 3개를 미리 만들어놓고 버튼 누를 때 마다 그에 맞는 박스 보여주는게 탭 UI입니다. 1. html css로 디자인 미리 완성해놓고 2. UI의 현재 상태를 저장할 state 하나 만들고 3. state에 따라서 UI가 어떻게 보일지 작성하면 된다고 했습니다. 1. html css로 탭 디자인 미리 완성하기 버튼은 react-bootstrap 사이트에서 복사해서 Detail 페이지에 넣어봤습니다. 버튼0 버튼1 버튼2 내용0 내용1 내용2 거기 문서 보니까 eventKey 속성은 버튼마다 맘대로 작명하면 된다고 합니다. defaultActiveKey 여기는 페이지 로드시 어떤 버튼에 눌린효과를 줄지 결정하는 부분입니다. 2. ..

Lifecycle이란? React의 컴포넌트는 생명 주기가 있습니다. 생애 주기 또는 라이프사이클(Life cycle)이라고도 많이 표현합니다. 컴포넌트는 1. 생성이 될 수도 있고 (전문용어로 mount) 2. 재렌더링이 될 수도 있고 (전문용어로 update) 3. 삭제가 될 수도 있습니다. (전문용어로 unmount) 저희가 라이프사이클에 대해서 배우는 이유는 컴포넌트 인(라이프사이클)에 간섭할 수 있기 때문입니다. 간섭이 뭐냐면 그냥 코드실행인데 컴포넌트가 장착이 될 때 특정 코드를 실행할 수도 있고 컴포넌트가 업데이트될 때 특정 코드를 실행할 수도 있다는 겁니다. 인생에 간섭하는 방법 "Detail 컴포넌트 등장 전에 이것좀 해줘" "Detail 컴포넌트 사라지기 전에 이것좀 해줘" "Detai..

컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생기는데 1. class 만들어놓은걸 까먹고 중복해서 또 만들거나 2. 갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나 3. CSS 파일이 너무 길어져서 수정이 어렵거나 이런 경우가 있습니다. 그래서 스타일을 바로 입혀서 컴포넌트를 만들어버릴 수도 있는데 styled-components 라는 인기 라이브러리를 설치하여 이용하시면 됩니다. 설치방법 터미널 열어서 npm install styled-components 해주면 됩니다. import styled from 'styled-components' 그리고 사용하고 싶은 컴포넌트 맨위에 이런걸 import 해와야합니다. Detail.js 파일 위에 ▲ 위처럼 입력해서 import 해오십시오. 그..

1. 리액트 라우터 : 셋팅이랑 기본 라우팅 - 나누고 싶으면 일반 html css js 사이트는 그냥 html 파일 여러개 만들면 그게 하나의 페이지인데 - 근데 리액트는 SPA(single page aplication)로 html 파일을 하나만 사용합니다. - 그래서 React Router는1개의 html에서 새로고침 없이 필요한 부분을 렌더링 시켜 주소에 맞춰 필요한 화면을 보여줍니다. - (참고) Routing 라우팅은 기본적으로 네트워크에서 경로를 선택하는 프로세스를 의미한다. 1) react-router-dom 설치하려면 터미널 열어서 아래의 코드를 입력하여 설치합니다. npm install react-router-dom@6 셋팅은 index.js 파일로 가서 import { BrowserRo..