useInfiniteQuery를 활용한 무한 스크롤 구현하기

🤔 useInfiniteQuery를 사용한 이유 무한 스크롤을 적용시키는 방법은 여러가지가 있다. 하지만 구조는 비슷할 것이다. Intersection-observer를 이용해 특정 영역을 감시하고, 감시된 영역이 보이면 데이터 요청을 보내는 방식이 대부분일 것이다. 이를 구현하는 방식의 차이가 있다고 생각한다. useState를 사용해서 observer가 발동되면 page를 1씩 늘려주는 방법, 또는 useInfiniteQuery를 사용해 자동으로 page를 늘려주는 방식이 있다. 하지만 내가 useInfiniteQuery를 사용한 이유는 우선 useState는 간단한 데이터 구조와 UI 상태 변경을 위해 사용되고, 이경우 페이지 번호를 state로 관리하고 무한 스크롤 로직에서 페이지 번호를 직접 증..

• format_list_bulleted React
• · 2024. 2. 25.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 9기 12주차 회고록 - Redux toolkit

🤔 Redux Toolkit 이란? Redux Toolkit은 Redux를 더 사용하기 쉽게 사용하기 위해 만들어진 React의 도구이다. Redux의 문제점을 해결하기 위해 개발된 도구라고 생각하면 된다. 잠깐! Redux란?? props 없이 state(상태)를 공유할 수 있게 도와주는 라이브러리입니다. Redux가 설치되어 있다면 js 파일 하나에 state들을 보관할 수 있습니다. 그러면 이런 Redux를 두고 Toolkit을 사용하는 걸까? Redux 단점 Redux 스토어 구성이 너무 복잡하다. Redux에서 유용한 작업을 수행하려면 많은 패키지를 추가해야 한다. Redux에는 너무 많은 상용구 코드가 필요하다. 이러한 문제점을 해결해준다니 안 쓸 이유가 없다. 실제로 써봤는데 코드량도 줄어든..

• format_list_bulleted 포스코x코딩온
• · 2023. 10. 8.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 9기 12주차 회고록 - React useEffect

🤔 useEffect 란? 모든 컴포넌트에는 생성되고 업데이트 되고 사라지는 생명주기를 가지고 있다. 이를 각각 Mount, Update,UnMount로 부른다. Mount : DOM이 생성되고 웹 브라우저 상에 나타남. Update : Props or State가 바뀌었을 때 업데이트 함. Unmount : 컴포넌트가 화면에 사라질 때. 이 처럼 컴포넌트의 생명주기를 역할을 하는 것을 useEffect()함수를 사용해서 조절할 수 있다. ✏️ 사용 방법 1. 기본 형태 useEffect(function,deps) ● function : 랜더링 이후 실행할 함수를 써준다. ● deps : function을 실행 시켜줄 조건을 써준다. 배열 형태로 사용한다. 이 값의 따라 useEffect가 실행될지 안될..

• format_list_bulleted 포스코x코딩온
• · 2023. 9. 28.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 9기 12주차 회고록 - React useState

🤔 React Hooks? 앞으로 나올 useState,useEffect 같은 hook들은 함수형 컴포넌트에서도 state와 생명주기 기능을 연동 할 수 있게 하기 위해 만들어졌다. 쉽게 말해 이전까지는 클래스형 컴포넌트에서만 가능했던 기능들을 이제는 함수형에서도 사용할 수 있게 된 것이다. (원래는 React에서 없던 기능인데 불편함을 고치고자 다른 개발자들이 모여 직접 개발했다고 한다. -> 실제 개발에 참여한 모든 개발자들은 React측에서 모두 채용을 했다고 한다. 대단한 분들..👍) 이렇듯 이제는 불편한 클래스형 컴포넌트를 굳이 사용안해도 된다. 나도 두가지 모두 사용을 해봤지만 확실히 함수형이 편하다는 것을 느꼈다. 그래서 나는 함수형 컴포넌트 위주로 블로깅을 할 것이다.4 🤔 useState..

• format_list_bulleted 포스코x코딩온
• · 2023. 9. 26.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 9기 12주차 회고록 - React Props

🤔 Props란? - 프로퍼티, props(properties의 줄임말) 라고 한다. - 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다. (단반향의 데이터 흐름을 갖기 때문에 부모에서 자식으로한테만 전달 가능) props에서 가장 중요한 것은 상위 컴포넌트에서 하위 컴포넌트로 밖에 전달이 되지 않는다는 것이다. 또한 이렇게 보내진 props는 수정할 수 없다. (자식 입장에서는 읽기 전용인 데이터다) 🤓 사용 방법 props를 넘길때에는 2가지 경우가 있다. 문자열로 보내는 방식과 문자열 외의 값을 전달할 경우다. ⚫ 문자열로 보내는 방식 프로퍼티 타입이 문자열이 경우, 큰 따옴표("")를 사용한다. ⚫ 그 외의 방식 { alert('알림창'); }} //함수 /> 문자열 타입 이외의 프로퍼티 ..

• format_list_bulleted 포스코x코딩온
• · 2023. 9. 24.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 9기 12주차 회고록 - React JSX

🤔 리액트란? 현재 많은 프론트엔드의 프레임워크들이 생겨나고 있지만 당연 가장 많이 쓰는 것은 리액트다. (하지만 리액트는 JavaScript 라이브러리라는 점..) 나에게 부트캠프에서 가장 배우고 싶은 것을 고르라고 하면 리액트를 고를 것이다. 프론트엔드가 목표인 나에게는 가장 써보고 싶은 스택(?)중 하나였기 때문이다. 그리고 이전에 완성된 리액트 프로젝트를 사용한 적이 있는데 VanillaJS를 사용한 것 보다 로딩 시간이 휠씬 빨라서 신세계를 경험한 듯한 느낌을 받았었다.😮 😮 JSX란? 리액트를 사용하기 위해서는 JSX문법을 알아야 한다. "그럼 리액트를 배우기 위해서는 또 다시 새로운 언어를 배워야 하나??" 이렇게 생각할 수도 있겠지만 다행이도 내가 써본 결과 크게 다르지 않았다. 이름도 비..

• format_list_bulleted 포스코x코딩온
• · 2023. 9. 22.
• textsms