반응형 리액트8 [React] React hooks 정리 part.2 useMemo(최적화) feat. React.memo [React] React hooks 정리 part.2 useMemo(최적화) feat. React.memo React Hooks 정리 중! 이번 파트에는 리액트 최적화를 위한 useMemo를 파헤쳐보자 :) 들어가기 전 다른 hooks들이 궁금하다면 하단으로 ㄱㄱ! useState https://heeeming.tistory.com/entry/React-Hook-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%9B%85%EC%9D%98-state-%EA%B4%80%EB%A6%AC-%ED%95%A8%EC%88%98-useState-%ED%95%A8%EC%88%98%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90 [React Hook] 리액트 훅의 .. 2023. 2. 28. [React] React hooks 정리 part.1 - useState, useEffect, useRef, useContext + Context API [React] React hooks 정리 part.1 - useState, useEffect, useRef, useContext + Context API 매일 React hook에게 다져지는 내 자신이 안타까워 나는 오늘로서 hook을 잘게 다지기로 하였다. 뚜둔. 하지만 너무 길어서 최적화 부분은 Part.2로 넘겨야겠닫..ㅎ 🔗 useState useState는 매우 중요하기 때문에, 별도로 정리해놓은 포스팅이 있으니 그곳으로 ㄱㄱ https://heeeming.tistory.com/entry/React-Hook-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%9B%85%EC%9D%98-state-%EA%B4%80%EB%A6%AC-%ED%95%A8%EC%88%98-useState-%ED%95.. 2023. 2. 20. [React] React Portal 기술을 이용하여 Modal을 만드는 방법(실습파일 하단 첨부) [React] React Portal 기술을 이용하여 Modal을 만드는 방법(실습파일 하단 첨부) 요즘 리액트 고급 기술들을 격파하고 있습니다. 그 중에 하나인 React Portal을 활용하여, Modal을 만들어봤습니다. Portal? Portal은 리액트 프로젝트에서 컴포넌트를 렌더링하게 될 때, UI 를 어디에 렌더링 시킬지 DOM 을 사전에 선택하여 부모 컴포넌트의 바깥에 렌더링 할 수 있게 해주는 기능입니다. 초기 세팅 //App.js import React, { useState } from "react"; import "./App.css"; import { MyModal } from "./MyModal"; import { ModalPortal } from "./ModalPortal"; co.. 2023. 2. 6. [React] React-query 정리 [React] React-query 정리 리액트를 공부하긴 했으나, API 관련 기술을 딥하게 다루거나, 서버 데이터 패치 라이브러리를 이용하여 데이터를 매핑한 경험은 거의 없거든요. React portal 부분과 React-query 부분은 아무리 봐도 이해가 되질 않아서 이번 주 내내 React-query에 대해 스터디하고 정리하였습니다. 원래는 노션에 정리하였습니다만, 블로그에도 같이 올려보려 합니다. (노션 진짜 최고다.. 내다버린 티스토리..ㅎ) 참고자료들 Codevolution의 강의를 따라서 실습해보고 공식문서(한글번역판 포함)보면서 이해하면 흠! 이런 거였꾼! 상태로는 돌입할 수 있는 것 같다. 🤔 (물론 이것은 돌머리인 내 기준쓰) Codevolution이 제공하는 스타터용 소스코드도 깃.. 2023. 2. 3. [Portfolio] 웹퍼블리셔의 리액트(React.js) 기반 포트폴리오 (VScode Style) 만들기 ✍️ Intro. 리액트로 토이트로젝트를 끝마친 뒤, gsap와 three.js를 공부하던 와중에 기존 포트폴리오 사이트의 호스팅이 만료되면서 리액트를 기반으로 만든 포트폴리오를 제작하게 되었습니다. (사실 회사 퇴사하고 백수의 몸인지라, 포폴을 빨리 만들어야 하는 것도 한몫했습니다..ㅠㅠ) VScode 스타일로 만들게 된 계기는 제가 디자인에 자신이 없기도 하지만 디자인을 구상하는데 많은 시간을 소요할 수가 없어서 웹퍼블리셔나 개발자라면 가장 친숙한 편집기인 VScode 스타일로 포트폴리오를 만들어서 인상적인 이미지를 남기고 싶기도 했고. 일반적인 포트폴리오 스타일이 스크롤 디자인인 것이 조금 진부하다고 느껴지고, 앞으로 개발에 관한 다양한 콘텐츠를 포트폴리오에 지속적으로 담고 싶어서 게시판 느낌으로 .. 2022. 11. 21. [React Hook] 리액트 훅의 state 관리 함수 useState() 함수를 사용해보자. [React Hook] 리액트 훅의 state 관리 함수 useState() 함수를 사용해보자. 오늘은 리액트 훅 중 하나인 useState() 함수 사용법을 알아보려 한다. 오늘 글에서는 깊은 동작원리에 대해서는 다루지 않을 예정이다. (나는 쪼렙 코린이니까,, 기회가 된다면 동작원리는 나중에 공부해서 정리할 거임.) useState() 함수를 사용하기 위한 사용 문법과 간단한 예제를 통해 가볍게 이해할 수 있도록 준비했다. 들어가기 전 State란? 리액트 컴포넌트가 가질 수 있는 동적인 상태값을 일컫는 말이다. React Hook은 뭔데? 리액트 훅은 리액트 버전 16.8부터 새로 추가된 요소로, 리액트 훅이 추가되기 전에는 class 기반 컴포넌트로 상태 값을 관리했었으나, class 기반 컴포넌.. 2022. 9. 25. [React] 맥(Mac os) VSCODE 리액트 프로젝트 생성하는 방법(개발환경세팅) React 맥(Mac os) VSCODE 리액트 프로젝트 생성하는 방법(개발환경 세팅) 현재 리액트 스터디를 하면서, 인강에서 알려주는 대로 개발환경을 세팅하다 보니 기억에 남지도 않고 신규 토이프로젝트를 진행할 때마다 일일이 인강을 찾아서 볼 순 없다고 생각이 들어, 오늘에야말로 리액트 개발을 할 때 제일 중요하지만 자주 까먹는 개발환경 세팅에 대해서 기록해놓으려고 한다. 1. 노드.js(Node.js) 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 노드.js 공식 홈페이지로 들어가 LTS 버전으로 설치한다. 최신 버전을 설치해도 되긴 .. 2022. 9. 24. [React 기초] JSX 문법 01 - className, 자바스크립트 값을 JSX 안에 렌더링(콧수염괄호), inline style React 기초 JSX 문법 01 - className, 자바스크립트 값을 JSX 안에 렌더링(콧수염괄호), inline style JSX란? JSX는 문자열도, 태그도 아닌 JavaScript에서 XML문법을 추가 확장한 문법이다. 리액트에서 JSX 사용은 필수가 아니지만, 대부분 사용하는 이유는 자바스크립트 내에서 HTML 작성하듯 비슷하게 작성할 수 있는 장점으로 많이 사용하고 있다. JSX는 브라우저에서 실행하기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. 1. className 일반 html 태그에서 class를 추가할 때에는 text 위와 같이 어트리뷰트 이름을 쓰는 것이 맞으나, React JSX 문법은 카멜케이스(camelCase) 프로퍼티 명.. 2022. 8. 2. 이전 1 다음 반응형
