리액트
-
[React] fetch와 axios개발공부/React 2024. 3. 25. 19:23
본 글은 리액트에서 네트워크 통신을 가능하게 해주는 fetch와 axios에 대해 다룬 내용입니다 목차 fetch axios fetch JS 내장 라이브러리 Promise 기반의 인터페이스를 사용해 비동기적으로 요청을 처리 try { let response = await fetch(url); if (!response.ok) { throw new Error('Network response was not ok'); } let data = await response.json(); console.log(data); } catch (error) { console.error('Fetch error:', error); } axios Promise 기반의 API를 사용해 비동기 요청 처리 HTTP 요청과 응답을 쉽게 ..
-
[React] useState, useReducer hook개발공부/React 2024. 3. 2. 16:24
본 글은 리액트에서 사용하는 hooks 중 useState, useReducer에 대해 다룬 내용입니다. 목차 차이점 useState란? useReducer란? 차이점 useState useReducer 용도 단순한 상태관리 복잡한 상태관리 인터페이스 하나의 상태 값, 그 값을 변경하는 함수 반환 리듀서와 디스패치 함수 반환 가독성과 유지 보수성 직관적이라서 단순한 상태 관리에 적합 코드 가독성을 향상 복잡한 상태 업데이트 로직 분리 가능, 유지 보수성 향상 액션에 따라 상태가 변경되어야 하는 경우 간단히 정리하면, useState는 단순한 상태 관리에 사용, 간단한 컴포넌트에서 유용, useReducer는 복잡한 상태 관리에 사용, 상태 업데이트 로직 분리가 가능해 코드 가독성과 유지 보수성 향상 가능..
-
실시간 채팅 구현개발공부/React 2024. 1. 24. 21:10
본 글은 React에서 Websocket & STOMP 를 사용해 실시간 채팅을 구현한 내용입니다. Websocket, STOMP 모두 프로토콜이다. (자세히 알고 싶다면 링크를 타고 들어가서 확인해보면 될 거 같다.) 두 가지 프로토콜이 어떤 특징을 가지고 있어서 실시간 채팅을 구현할 수 있는지 간단하게 정리해봤다. Websocket 양방향 통신을 지원하며, 지속적인 연결을 통해 실시간 데이터 전송을 가능하게 해줌 STOMP 메시지 기반의 프로토콜로 쉬운 구현과 클라이언트-서버 간의 효과적인 양방향 통신을 제공 실시간 채팅 구현 두 프로토콜의 특징을 알아봤으니 이제 실제로 활용해서 기능을 구현해보려고 한다. 먼저 단계를 설명하자면 아래와 같다. SockJS 객체를 생성합니다. (웹소켁 연결을 위한 객체..
-
원하는 타이밍에 동작해보기 (useEffect)카테고리 없음 2023. 11. 13. 15:35
오늘은 useEffect에 대해 공부해보자!! hook 중에서 사용하는게 어렵다고 생각하는 것 중 하나가 useEffect이다. 뭔가.. 확실하게 이해하고 사용한다는 느낌이 아니라서 이번에 공부해서 내 것으로 만들어보자!! useEffect 컴포넌트가 렌더링 될 때 마다 특정 작업을 실행할 수 있도록 하는 hook 3가지 상황에서 특정 작업을 처리할 수 있다! 컴포넌트가 mount 되었을 때 컴포넌트가 unmount 되었을 때 컴포넌트가 update 되었을 때 코드르 통해 살펴보자 import { useEffect } from "react"; // 1. 컴포넌트가 mount 되었을 때 useEffect(()=>{ console.log("mount!"); }, []); // 2. 컴포넌트가 unmount ..
-
DOM에 직접 접근하기 (useRef)개발공부/React 2023. 10. 26. 15:55
오늘은~! useRef에 대해 자세하게 공부해보자. 소분소분 프로젝트에서 회원가입을 담당했는데 정말 고민이 많았다. 실시간 유효성 검사하여 사용자에게 안내 메시지도 보여줘야 하고, input 태그가 각자 리렌더링 되도록 해야하고... 허헣.. 나름 신경써서 작업했는데 아쉽게도 라이트 하우스 90점을 넘지 못해 개선중이다. 일단 1차로 해결하고 싶은 부분은 리렌더링이다. 단순하게 컴포넌트를 상세하게 분류하거나, 아니면 커스텀 훅을 활용하거나 등등 여러가지 고민을 했지만 비밀번호 확인 때문에 쉽지가 않다. 사용자가 입력한 비밀번호와 일치하는지 확인하기 위해서는 같은 단에 선언해야 하는데.. 이 경우 하나만 변해도 다른 부분이 같이 리렌더링이 된다... 일단 객체를 활용해서 그나마 리렌더링 덜 하게 바꾸긴 했..
-
리액트 프로젝트 구조개발공부/React 2023. 10. 25. 14:56
오늘은 터미널에 yarn create react-app {프로젝트 이름} 을 입력 했을 때 생성되는 파일 및 폴더에 대해 공부할 예정이다. (중요한 것들 위주로만!) 일단 실행 순서는 index.js > index.html > App.js 이다 src 폴더 index.js: 진입점 JS 파일, 주로 DOM에 렌더링 하는 역할 App.js: 루트 컴포넌트로 여기에서 다른 컴포넌트를 조합 및 렌더링 public 폴더 index.html: 진입점 HTML, 리액트 어플리케이션이 렌더링 되는 곳 그 외 폴더 node_modules: 프로젝트의 의존성 라이브러리가 설치되는 폴더 package.json: 프로젝트에서 어떤 것 (모듈 등)을 사용하는지에 대한 정보가 기록된 파일 처음에 리액트 공부할 때 프로젝트 구조..
-
리액트에서의 메서드 (map, concat, filter)개발공부/React 2023. 10. 20. 11:49
리액트를 기초부터 다시 공부해보려고 한다. 우선 리액트에서 자주 사용하는 JS 메서드부터 시작해보자! :) Map 배열을 순회하면서 각 요소에 대해 주어진 함수를 호출, 반환 값으로 새로운 배열을 생성 원본 배열을 변경하지 않고 새로운 배열을 반환 -> 배열을 변환하거나 재구성할 때 유용~! 이제 위에 내용은 Map의 기본 내용이고, 리액트에서 map 메서드는 반복되는 컴포넌트를 렌더링 할 수 있게 해준다. 이 때, key 값을 넣어줘야지 경고 메시지가 뜨지 않는다. const names = ["눈사람", "얼음"]; const nameList = names.map((name, index)=> {name}); key를 설정해줘야 하는 이유 key는 컴포넌트 배열을 렌더링 했을 때 어떤 원소에 변동이 있었..
-
렌더링 최적화_1 (React.memo)개발공부/React 2023. 10. 16. 20:06
이제부터 본격적으로 렌더링 최적화 관련된 공부를 시작할 예정이다. 최근에 진행했던 1인 가구 플랫폼 소분소분 프로젝트를 리팩토링 하기로 했다! 첫 번째 대상은 바로~! 회원가입 페이지이다. 우선 라이트 하우스를 사용해서 점수를 확인해봤다. 멘토님께서 90점 이상을 받아야지 좋은 페이지라고 했기 때문에 90점을 목표로 성능 개선을 해보기로 했다. 일단 우선 큰 문제였던 리렌더링을 해결해보려고 한다. 회원가입 페이지의 경우 입력되는 데이터 종류만 다를 뿐 동작 방식은 같아 컴포넌트를 분리해서 재사용성을 높였었다. 위에 구조로 되어 있다보니 부모가 리렌더링되면 자식도 리렌더링 되는 문제가 발생했다. 그래서 나는 React.memo를 사용해보기로 했다. 이유는 부모 컴포넌트가 리렌더링 되더라도 자식 컴포넌트가 ..