3주차 (26) 썸네일형 리스트형 state 변경에 따른 리렌더링, useEffect, setTimeout 이해하기 안녕하세요 35기 웹파트 OB 공준혁입니다. (수정하려다가 잘못 삭제해버려서 다시 올립니다 ㅜ) 안녕하세요, 오늘은 react의 가장 기본적인 제공 기능 중 하나인 리렌더링에 대해 이해해봅시다.리렌더링을 제대로 이해하지 못하면, 예상치 못한 난관들을 많이 마주하게 됩니다. 예를 들어, 카드 게임 혹은 Flash Clicker(빠르게 순서대로 버튼을 누르는 게임) 라는 게임을 만든다고 가정해봅시다. targetNumber인 다음 숫자에 해당하는 숫자를 키패드에서 찾아 빠르게 누르면 되는 기록 성취 게임입니다. 1) 숫자 1을 클릭하면 헤더의 오른쪽 부분에 있는 00:00 으로 포맷팅되어 있는 시간(초 단위)가 올라가고, 2) 동시에 '다음 숫자 : 1' 은 '다음 숫자 : 2' 로 변합니다. 3) 동시에.. [React] 리렌더링에 대해 알아보자 리렌더링이 일어나면 UI 를 다시 그려주는 과정을 거친다. 리렌더링이 자주 일어나면 메모리가 소모되고, 비용이 발생되기 때문에우리는 불필요한 리렌더링이 발생하지 않기 위해 최적화 작업을 할 필요가 있다. 리렌더링이 일어나는 조건1. 컴포넌트의 state 가 변경되었을 때2. 컴포넌트가 상속받은 props가 변경되었을 때3. 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링 리렌더링 특징형제 관계인 컴포넌트들끼리는 서로 리렌더링에 영향을 미치지 않는다. 형제 컴포넌트끼리는 리렌더링에 영향이 없다. Child1이 리렌더링된다고 Child2가 리렌더링 되지 않으며, Child2가 리렌더링 된다고 Child3이 리렌더링 되지 않는다.Child1, Child2, Child3가 리렌더링되는지 여부는 오로지.. useEffect, 클린업 함수, useLayoutEffect, useRef ❓useEffect란useEffect : React 함수 컴포넌트에서 side effects를 수행하기 위해 사용되는 Hook. -> (side effects란 컴포넌트의 상태 변화, 외부 API 호출, 구독 및 구독 해제와 같은 작업을 뜻함.)즉, 어떤 state의 값이 변경되거나, 외부 API를 동기적으로 호출하는 등 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다.💡 useEffect는 component가 mount 되었을 때, unmount 되었을 때, update 되었을 때 특정 작업을 처리할 수 있다.(useEffect를 통해 기존의 클래스형 컴포넌트에서 사용하던 생명주기(Life cycle) 메소드를 함수형 컴포넌트에서 사용할 수 있게 되었다.)하지만 .. 🙄 리액트에서 배열의 값을 업데이트 하는 방법 (feat. 리액트의 불변성) 안녕하세요! 웹파트 OB 박채연입니다! 😋이번주차 공유과제는 리액트에서 배열의 값을 업데이트 하는 방법에 대해 다뤄보려고 합니다! 지난 자바스크립트 과제에서 우리는 배열을 조작하고 배열을 이용해서 값을 업데이트하는 과정을 많이 구현했는데요.과제 뿐 아니라, 우리가 화면에 보여지는 값을 조작하기 위해선 정말 많이 쓰이는 개념이 배열인 것 같아요! 근데 제가 리액트로 개발하면서 자주 들었던 피드백 중 하나가, "배열의 값을 직접 조작하기보단 복사된 새 배열을 이용해서 값을 업데이트 하는 게 어떠냐"는 내용이었어요. 이런 피드백을 들으면서, 바로 array.push 하면 배열에 쉽게 값을 넣을 수 있는데, 왜 굳이 새 배열에 ...array 하고 ~ 그 다음에 추가하고 ~ setUpdate(array) 하는.. 컴포넌트와 Props 안녕하세요! YB 김채은입니다~ 우선 저는... 리액트라는 것을 이번에 처음!! 사용해봤는데요...ㅎㅎ그래서 며칠째 그냥 몰름보반장 상태였습니다 그리고 드디어 Component와 Props에 대해 배웠습니다... 그래서 일단 이 내용을 제가 이해한 대로 한 번 정리해보려 합니다😎이미 대부분 다 아는 내용이겠지만!! 저는 몰랐어요 ~..~ 1. 컴포넌트(Component)란?컴포넌트는 리액트에서 UI를 구성하는 하나의 작은 조각이라고 생각하면 됩니다.웹페이지를 만들 때 다양한 요소들(버튼, 텍스트 박스, 사용자 프로필 등)을 사용하는데, 리액트에서는 각 요소들을 컴포넌트로 만들어 재사용할 수 있어요. 컴포넌트는 1. 화면에 무엇을 보여줄지를 결정하고 2. 다른 컴포넌트들과 함께 UI를 구성합니다! 예를.. 리액트의 flux 패턴 "React는 단방향 데이터 바인딩 개념을 가진다." 라는 내용이 세미나 중간에 나옵니다. 과연 단방향 데이터 바인딩은 무엇일까요?React와 단방향 데이터 바인딩 React는 초기에는 양방향 데이터 바인딩을 사용했습니다. 이는 MVC 패턴과 유사한 방식으로 모델(Model)과 뷰(View) 간의 상태가 서로 영향을 주고받으며 실시간으로 동기화되는 구조입니다. 모델의 상태 변화가 뷰에 반영되고 뷰에서 발생한 사용자 입력이 다시 모델의 상태를 바꾸는 양방향 흐름을 가지게 되죠. 이렇게 모델과 뷰가 상호작용하는 양방향 데이터 바인딩은 애플리케이션의 규모가 커질수록 상태 즉 데이터가 많아지면서 데이터의 흐름을 추적하기 힘들어진다는 문제가 발생했습니다. 양방향 데이터 바인딩의 문제점방금 말했듯 양방향 데이터 바.. React에서의 '상태관리' 😎 안녕하세요 35기 웹 YB 최민입니다 오늘은 React에서 하는 상태관리에 대해서 알아보려고 합니다 !! 1. ✅상태관리란❓상태는 컴포넌트 내부에서 관리되며 어플리케이션의 렌더에 영향을 미치는 플레인 자바스크립트 객체이다. 공식문서에 따르면 이렇게 정리되어 있습니다. 조금 더 쉽게 풀어보자면 상태는 컴포넌트의 데이터를 저장하고 관리하는 데 사용하는 객체이고 컴포넌트의 현재 상황을 표현하며, UI가 어떻게 표시되는지를 결정하는 요소라고 할 수 있습니다 !! 간단히 말해서 상태는 컴포넌트가 기억하는 정보라고 할 수 있습니다.그리고 이러한 상태를 관리하는 상태관리는 React에서 상태를 효율적으로 저장, 업데이트, 공유, 그리고 추적하는 방법을 의미합니다 💫 예시를 하나 들자면내가 쇼핑몰에서 어떤 물건을 .. [React] useState와 useReducer의 차이점 안녕하세요! 웹파트 OB 이예림입니다!React를 사용하면서 상태 관리에 대해 고민해본 분이라면 useState와 useReducer의 차이점에 대해 한 번쯤 생각해 본 적이 있으실 텐데요~ 두 훅 모두 컴포넌트의 상태를 관리하지만, 각각의 목적과 특성이 다릅니다. 본문에서는 useState useReducer의 동작 방식과 사용해야 할 상황을 비교해보겠습니다.✅ 간단한 상태 관리: useState useState는 컴포넌트에서 상태값을 쉽게 관리할 수 있도록 도와주는 가장 기본적인 훅이다. 입력 필드의 값, 체크박스 상태 등 비교적 간단한 상태를 다룰 때 자주 사용된다.import { useState } from 'react';function Counter() { const [count, setCou.. 이전 1 2 3 4 다음
