728x90 React7 React_ reducer 란.. UserReducer 에 대해 고찰해보자..새로고침 후 데이터가 휘발성으로 증발되어 다시 새롭게 작성해야하는 문제가 있다.영속성이 없어진 것이다.. ..이럴때 보통 reduce-persistance 등 사용하여 영속성을 추가해준다. 세션에 저장하거나 그래서 이부분에 대한 기술적인 고찰을 한번 해볼겸 끄적끄적 거려본다. Reducer useReducer는 React에서 상태를 관리할 때 사용하는 훅(Hook)으로, 복잡한 상태 로직을 관리할 때 useState보다 더 강력한 기능을 제공합니다.📌 Reducer란?useReducer는 상태(state)와 그 상태를 변경하는 로직을 분리하여 관리하는 방식을 제공합니다.Redux와 비슷한 개념으로, 액션(action)을 발생시키고, 이를 처리하는 리듀서(re.. 2025. 2. 27. React_ Semantic 구조 시멘틱 태그에 대해서 알아두면 굉장히 좋다사실 이거 하나만 알아도 실제로는 무방하다 보지만, 협업이나 여러사람들이 같이 하는 구조에서는 이러한 방법은 비효율적인 방법이다.어떤 곳에서 어떻게 쓰이는지 시각적으로 직관적으로 해야 협업이 가능하므로 알아두면 굉장히 좋다필수라고 해도 과언이 아니다 그렇다면 Semantic 이란 무엇인가 !! React에서의 Semantic 구조란?Semantic(시맨틱) 구조란, 의미론적으로 올바른 HTML 태그를 사용하여 웹 페이지를 구성하는 것을 말한다.React에서 시맨틱 구조를 적용하면:**SEO(검색 엔진 최적화, Search Engine Optimization)**에 도움이 되고**웹 접근성(Accessibility, a11y)**이 향상되며코드 가독성이 좋아진다.. 2024. 8. 7. React_ npm module @types 의 의미 보통 무의식적으로 npm i ~ 이렇게 필요한 모듈을 설치할때가 많았다.근데 구글링 해서 찾아보면 npm i --save , npm i --save -dev 이렇게 사용해서 설치하는 경우를 보았는데 뭐가 다른건지 궁금해졌다.그래서 한번 찾아보았다.밑의 사이트에서 설명을 잘 해놓은듯 하다. npm init 하여 설치할때 npm 설치를 관리를 해주는 역할이기 때문에 새로운 프로젝트를 시작하더라도 쉽게 다운받았던 모듈들을 npm install 로 받을 수 있는걸 처음 안것 같다.이렇게 좋은 시스템이였구나 ..! 다시한번 공부하는 계기가 되었다. 그렇다면 React 의 NPM 에 대해 한번 알아보자 !!! 1. React에서 npm 사용법✅ npm이란?**npm(Node Package Manager)**은 J.. 2024. 7. 29. React 프로젝트 생성 feat. Typescript 처음 리액트 프로젝트 생성했을땐 그냥 npx create-app my-app 으로 진행해서 타입스크립트가 적용이 안된채로 타입스크립트 환경설정을 해주었다. 하지만 지금 새로운 프로젝트를 생성할 필요가 느껴져서 다시 찾아보려 하니 익숙했던 부분이 익숙치가 않아져서 불편했다. 그래서 우선 React 프로젝트 생성 feat. Typescript 을 하는 순서도를 적을 생각이다. 1. Node.js와 npm 설치우선 위의 Node.js / npm 을 모두 설치해야한다.2. Create React App 사용하기Create React App은 리액트 프로젝트를 쉽게 생성할 수 있는 CLI 도구야. TypeScript 템플릿을 사용하여 프로젝트를 생성하려면 다음 명령어를 사용해.터미널을 열고 아래 명령어를 입력.. 2024. 6. 13. React 무한 스크롤 리액트에서 페이징 처리를 해야하는 상황이였다...주로 앱을 작업하였기 때문에 Swift 에서는 tablecell 로 스크롤이 마지막에 닿으면 그때 쓰레드를 통한 페이징처리를 작업하였고 Java에서도 역시 recyclerview 를 이용한 페이징 처리를 진행하였다.하지만 웹에서는 어떻게 스크롤 끝을 감지하여 페이징하는지 잘 몰라서 검색해보았다..무한 스크롤을 통해서 페이징 처리를 하려고 했기 때문에 정보가 필요했다. 뭔가 스크롤 끝 감지해서 그 끝에서 로직을 처리해주면 되는데 스크롤 끝은 감지하는 부분을 몰랐다. 무한스크롤 구현 ! 1. Scroll Event ( 스크롤 이벤트 )처음에는 scroll 이벤트를 감지하다가, 페이지 가장 아래에 닿았을 때 쯤 API 요청을 하면 되지 않을까? 싶었다.하지만 .. 2024. 6. 10. React 새로고침 데이터 저장 리액트 작업 중 회원가입 페이지에서 새로고침했을때 기존에 input 태그에 입력했던 정보들이 전부 없어져버렸다. 원래는 기존 데이터를 가지고 있을 줄 알았으나, 그게 아니었다. 전부 입력했던 데이터들이 그대로 사라져버린 것이다. setState 안에 넣어봐도 깊은 복사를 해보아도 휘발성으로 사라져 버렸다. 왜그러지 ??그래서 방법을 찾아보았는데 React-Redux Persistance 라는 것을 알게 됐다.persistance .. 단어 부터 영구적이다 그렇다면 왜 React-Redux 가 필요한가! Redux 는 React 에서 사용하는 api 기술관리 중 하나이다.처음에는 ContextApi 로 전역관리를 하면서 api 도 같이 작업하고 있었다. 사실 이 Context Api 로도 큰 불편함은.. 2024. 6. 9. 이전 1 2 다음 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 728x90
