본문 바로가기

분류 전체보기

 (200)
[Week 4] Compound Component Pattern, HOC, React Portal 1. Compound Component PatternCompound Component Pattern은 여러 개의 하위 컴포넌트들이 하나의 상위 컴포넌트 내에서 작동하도록 설계하는 방식이다.이 패턴은 하나의 컴포넌트를 여러 하위 컴포넌트들의 조합으로 분리하여 재사용성을 높인다. Compound Component Pattern 예시1) Header.jsx (최상위 컴포넌트)import React from 'react';const Header = ({ children, ...props }) => { return 모달이 렌더링 될 위치에 div 엘리먼트를 추가해준다.2) ModalPortal.jsximport ReactDom from "react-dom";const ModalPortal..
[4주차 React-Query 리액트 쿼리 기초 🌐] 안녕하세요 웹 35기 YB 최민입니다 오늘은 React-Query 리액트 쿼리 기초에 대해서 공부해봤습니다 !리액트 쿼리의 정의부터 천천히 알아가는 시간이 되면 좋겠습니다🐼🐼🐼 스터디 전까지 더 꼼꼼히 채워오겠습니다 ! 실습도 추가해서 올게요오 https://learned-aardvark-272.notion.site/React-Query-14240aeaa45b8052939dd4270873ebbe?pvs=4 React Query | Notion오늘은 React Query 에 대해 설명해보려고 합니다 !!learned-aardvark-272.notion.site
[4주차 React-Query 리액트 쿼리 심화 🌐] 안녕하세요 웹 YB 김민정 입니다!!이번에는 React-Query 를 좀 더 자세하게, 다양한 기능까지 알아보고 실습까지 진행해보려 합니다 :)제가 담당할 부분은 Mutation 의 구체적인 사용법, Mutation 의 상태값, invalidateQueries를 사용한 데이터 무효화와 갱신, Pagination 및 inFinite Scroll ,병렬 요청과 staleTime/cacheTime 입니다. 아직 아티클을 좀 더 손보고 싶어서, 링크는 걸겠지만 계속해서 수정하려고 합니다!!그럼 내일 봬요 :) https://vi-olet.notion.site/1415981b4f458059a387d1ad251df5e4?pvs=4
[week4] ... state 왜 파도파도 계속 나와요? (batch, immer 등 리액트 state 변경에 대해 알아보자) 안녕하세요! 물결웹팟 OB 박채연입니다.요즘 제가 취미가 하나 생겼는데요? 바로 스터디원들에게 커피 돌리기 입니다 ~! 장난이구요.아티클 지각해서 죄송합니다 ㅎ변명을 하나 해보자면, 합세에.. 스터디에.. 이것저것 약속에 치이다보니 일요일이 후루룩 지나가더라구요?물론 여러분도 레전드 바쁜 와중에 시간내서 공부한걸테니 좋은 변명이 아니라고 생각합니다 하하어쨌든 벌칙 수행을 위해 나리스 여러분께 커피 돌릴 예정이니 댓글에 원하는 음료 남겨주세요 ^^ 그럼 주절주절 그만하고 호다닥 공부한 내용 공유해보겠습니다 !     Batch리액트에선 setState() 혹은 hook을 사용해서 컴포넌트의 state를 변경합니다.그리고 state가 변경되면 리렌더링이 발생하며, 페이지의 변화를 나타냅니다. 그렇지만, 우리..
[week4] 객체 state 업데이트 하기 안녕하세요! YB 이윤지 입니다 😊 뭔가 이번 주는 시간이 후루루룩 지나가는 듯한... 느낌이 드네요!날씨가 부쩍 추워졌어요. 모두 감기 조심하시고 건강 유의하시고!이번 주차 나리스 커리큘럼은  state 업데이트 큐. 객체 state 업데이트, 배열 state 업데이트와 props 였는데요.state 업데이트 큐는 저번 주차 아티클에 내용이 꽤 있던 것 같아서 이번 주차는 객체 state 업데이트와 배열 state 업데이트에 대해 중점적으로 다뤄보겠습니다! *이 아티클은 React 공식 문서를 기반으로 작성되었습니다. 객체 State 업데이트 하기State는 객체를 포함한 모든 종류의 자바스크립트 값을 가질 수 있습니다. 하지만 React state가 가진 객체를 직접 변경해서는 안 됩니다. 객체를 ..
[week4] - 상호작용성 더하기 - State 업데이트 큐, 객체 state 업데이트하기, 배열 state 업데이트하기 안녕하세요! 웹파트 OB 김건휘입니다. 이번 시간에는 State 업데이트 큐, 객체 state 업데이트하기, 배열 state 업데이트하기에 대한 내용 중 중요한 내용과 딥다이브 한 내용을 공유하는 시간을 가지도록 하겠습니다. 📌State 업데이트 큐React는 상태(State) 업데이트를 비동기적으로 처리하며, 이를 효율적으로 관리하기 위해 업데이트 큐(Update Queue)를 사용한다. 상태 변경 요청은 즉시 반영되지 않고, React의 내부에서 업데이트 큐에 추가된 후, 다음 렌더링 사이클에서 처리된다. import { useState } from 'react';export default function Counter() { const [number, setNumber] = useState(0)..
[week 4] 객체 state 업데이트하기, 배열 state 업데이트하기 안녕하세요 ~ YB 김가현입니다 😋4주차 파트 중 객체 state 업데이트하기, 배열 state 업데이트하기에 대해 알아보겠습니다 ~state 업데이트 큐 파트는 3주차에서 다루었던 batching에 대한 내용이더라구요 ! 그래서 해당 파트를 제외한 객체 state 업데이트하기, 배열 state 업데이트하기에 대해 알아보도록 하겠습니다 ! React state에서 객체를 올바르게 업데이트 하는 방법Javascript의 객체에는 어떤 값이든 저장할 수 있습니다. 이 때 객체의 속성을 직접적으로 변경하는 것을 Mutation이라고 하는데, 이는 권장되지 않는 방식입니다. 왜냐하면 React는 효율적으로 상태 변화를 감지하고 컴포넌트를 리렌더링하기 위해 불변성(immutability)을 요구하기 때문입니다...
[week4] 객체 state 업데이트 하기, 배열 state 업데이트하기 안녕하세요 웹 YB 김다현입니다.이번 4주차에서는 state 업데이트 큐, 객체 state 업데이트 하기, 배열 state 업데이트하기 챕터를 공부해봤는데요!그 중 객체 state 업데이트 하기, 배열 state 업데이트하기에 대해 다뤄보려 합니다.사실,,, 이번주차에는 할 게 너무 많은 바람에 왜? 라는 질문을 많이 못 던지고 개념 정리만 하게 된 느낌이라 아쉽네요,,,ㅜㅜ할 게 끝나면 바로 딥다이브~ 해볼게요 ㅎ,ㅎstate와 불변성state란?React에서 useState를 사용하면 숫자, 문자열, 불리언, 객체 등 모든 자바스크립트 값을 state로 저장할 수 있다.const [x, setX] = useState(0); // 숫자 stateconst [position, setPosition] = ..

티스토리툴바