나야, 리액트 스터디 (42) 썸네일형 리스트형 [week5] State 관리하기 안녕하세요 웹 YB 이윤지 입니다.ㅎㅎ이번 주차가 정말 세미나에 합세에 솝커톤에... 정말 뭐가 많았죠.레전드 정신없었지만 그래도 나리스는 빼먹을 수 없죠.바로 가겠습니다. 렛츠기 State를 이용해 input 다루기 선언형 UI 와 명령형 UI 비교 명령형은 말 그대로 '명령' 하는 것.ex) 택시 운전기사는 내가 어디로 가고 싶어하는지 몰라요. 그저 내가 가달라는 곳으로 데려다 주실 뿐...술에 취해서 이상한 목적지를 말해도 그쪽으로 데려다 주실거예요! 이렇게 컴퓨터에게 스피너부터 버튼까지 각각의 요소에 UI를 어떻게! 업데이트 해야할지 '명령' 을 내리는 것이 명령형 하지만 코딩을 할 때 난 여기를 이렇게 하고 싶고 저렇게 하고싶고...주절주절 말하는 것은 미래를 생각했을 때 그닥 좋은 방법은 아니.. [week5] State 관리하기 - State를 사용해 Input 다루기, State 구조 선택하기, 컴포넌트 간 State 공유하기, State를 보존하고 초기화하기 안녕하세요 !웹파트 YB 한수정입니다.솝커톤 끝나고 모두들 잘 쉬셨나요?! 저는 미리 안 해서 지금 쓰고 있는데, 저는 한 3일 아무 것도 안 하고 싶어요...... 그치만 나리스 시작~! 오늘은 5주차 내용 중 가장 흥미롭게 읽었던, 컴포넌트 간 State 공유하기에 대해 정리해보려고 합니다! state 끌어올리기를 통해 컴포넌트 간 state를 공유하는 방법state 끌어올리기두 개 이상의 컴포넌트가 동일한 데이터를 기반으로 동작해야 할 때, 공통 부모 컴포넌트로 상태를 옮기는 기법입니다. 이 방법을 통해 상태를 중앙에서 관리하고, 하위 컴포넌트가 props를 통해 동일한 데이터를 공유하도록 설계합니다. 왜 state를 끌어올려야 할까..?!여러 컴포넌트가 동일한 데이터를 공유해야 할 때, 각 컴포.. [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] = .. [week4] 상호작용성 더하기 - State 업데이트 큐, 객체 state 업데이트하기, 배열 state 업데이트하기 안녕하세요~!웹파트 YB 한수정입니다.벌써 4주차네요. 해야 하는 것도 하고 싶은 것도 너무 많아 바쁜 요즘입니당...이번 글에서는 ‘상호작용성 더하기’에서 다룬 내용 중 State 업데이트 큐, 객체 state 업데이트하기, 배열 state 업데이트하기를 읽어보고, 그 중에서도 객체 state 업데이트에 대해 차근차근 같이 알아보려고 합니다! 완전히 저의 눈높이에서 한줄한줄 찾아보며 정리하는 아티클이라 편하게 보셔도 돼요! 객체 State 업데이트하기State는 객체를 포함한 모든 종류의 자바스크립트 값을 가질 수 있습니다.React의 state는 객체, 배열, 숫자, 문자열, 불리언 등 모든 자바스크립트 값을 저장할 수 있습니다.예를 들어, const [x, setX] = useState(0);에서 .. 이전 1 2 3 4 5 6 다음 목록 더보기
