본문 바로가기

분류 전체보기

 (200)
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..
컴포넌트 순수하게 유지하기 컴포넌트를 엄격하게 순수함수로 작성하면 예상밖의 동작이나 당황케하는 버그를 피할 수 있다. 💡 순수성: 공식으로서의 컴포넌트순수함수의 특징함수 밖 객체나 변수를 변경하지 않음같은 입력엔 항상 같은 결과를 반환함React는 작성되는 모든 컴포넌트가 순수 함수일 거라 가정하고 설계되었다.=>React 컴포넌트에 같은 입력이 주어지면 같은 JSX를 반환 💡 사이드 이펙트: 의도하지 않은 결과React의 렌더링 과정은 항상 순수해야 한다. 컴포넌트는 렌더링하기 전에 존재했던 객체나 변수들을 변경하지 말아야 한다.ex)let guest = 0;function Cup() { // 나쁜 지점: 이미 존재했던 변수를 변경하고 있다! guest = guest + 1; return Tea cup for guest..
명령형 프로그래밍과 선언형 프로그래밍 안녕하세요 ~! 웹 파트 35기 한수정입니다.  이번 주에는 명령형 프로그래밍과 선언형 프로그래밍에 대해 정리해보려고 합니다. 사실 2주차 세미나에서 실습을 하면서 props라는 개념이 신기하고 더 공부하면 좋을 것 같아서 props와 관련한 글을 써볼까 고민했는데요, 세미나 시간에 웹팟짱님께서 선언형과 명령형 프로그래밍에 대해 알아두면 더욱 도움이 될 거라고 추천해주신 게 떠올랐습니다. 또, 아직 명령형 프로그래밍과 선언형 프로그래밍에 대해서도 잘 모르고 있어 이점부터 잡고 가면 좋을 것 같아, 이번 주제는 이 두 가지 프로그래밍 방식으로 정하게 되었습니다.프론트엔드 개발에서는 사용자 경험을 향상시키기 위한 다양한 기술과 접근 방식이 존재합니다. 그중에서도 명령형 프로그래밍과 선언형 프로그래밍은 프론트..
React에서 중복 로직을 해결하는 법 안녕하세요! 웹 OB 김채현입니다. React로 개발을 하다 보면, 여러 컴포넌트에서 반복적으로 사용되는 로직을 만나게 됩니다.그런데 컴포넌트마다 중복된 코드를 계속해서 작성하다 보면 유지보수도 어려워지고 코드도 지저분해질 수 있습니다.예를 들어, 로딩 상태를 처리하거나 특정 조건에 따라 컴포넌트를 보여줘야 할 때,일일이 각 컴포넌트에 이 로직을 추가하는 대신 "깔끔하고 효율적인 방법이 없을까?" 하는 고민을 하게 됩니다. 이러한 고민을 해결하기 위해서 중복 로직을 관리하기 위해!이번 아티클에서는 고차 컴포넌트의 구조와 활용 사례를 살펴보며, 왜 고차 컴포넌트가 유용한지에 대해 함께 알아가 보겠습니다. 💡 고차 컴포넌트가 궁금해요!고차 컴포넌트(HOC, Higher Order Component)는 컴포..
[React] children prop과 친해지자 안녕하세요 YB 이진혁입니다!이번에는 react prop 중 특별한 친구 children에 대한 아티클입니다. 개념을 대충만 알고 있었던 children의 정확한 정의가 무엇인지, 그리고 어떻게 사용하면 좋을지 내부를 조금 더 자세히 들여다보고자 합니다.  🌊 children이란 무엇인가?children은 컴포넌트의 데이터 전달 개체인 props의 일종이다. 컴포넌트가 다른 컴포넌트를 포함할 때, 그 안에 들어가는 내용을 모두 children으로 접근할 수 있다. 즉 일반적인 props처럼 정적인 데이터가 아니라 동적인 데이터를 컴포넌트 간에 넘겨줘야 하는 상황이 있다면 바로 이 children으로 접근이 가능하다.  텍스트로 설명하기보다 바로 코드 예시로 살펴보자.import Webby from '...
React Dev Tools? 이것 뭐예요~?? 안녕하세요 웹 YB 김다현입니다! 혹시 다들 React 개발자 도구에 대해서 들어보셨나요?저는 놀랍게도 미미나를 들으면서 이 툴의 존재를 처음 알았답니다... 그래도 지금이라도 알게 해주신 전 팟장님께 감사인사를...저는 지금까지 어떤 개발을 해온 걸까요 ㅎㅎ? 역시 알아도 알아도 끝이 없는 리액트네요 😮‍💨 그런 김에! 이 아티클을 작성하면서 저도 직접 설치해보고, 어떤 기능이 있는지 알아보려고 합니다.혹시 저처럼 이번에 처음 알게 된 웨비들이 있다면 같이 설치하고 공부해봐요 🫶 ⚡ React Dev Tools?리액트로 개발하다 보면 내가 만든 컴포넌트들이 지금 어떻게 상태를 주고받고 있는 건지 등등이 궁금할 때가 많지 않나요?! 이때 이 툴을 쓰면 정말... 큰 도움이 될 것 같더라구요. 리액트..
DOM과 React 랜더링 안녕하세요. Web YB 김고은입니다.이번 주제는 React의 랜더링 방식과,  DOM에 대해서 다뤄보고자 합니다. 특히, react의 랜더링 방식을, JavaScript와 비교하여 왜 요즘의 FE 기술로 react를 사용하는지 살펴보고자 합니다.  1. 브라우저의 랜더링 과정 우선 두 방식을 살펴보기 전에 프론트엔드 개발을 공부하고 있는 만큼 가장 기본인 브라우저 랜더링 과정을 정리하자면 다음과 같다.`HTML 파싱 => DOM 트리 생성` ➡️ `CSS 파싱 => CSSOM 트리 생성` ➡️ `DOM과 CSSOM 결합을 통해 =>  랜더 트리 생성` ➡️`JS 파싱 => AST => 바이트코드로 변환 후 실행 (필요시 DOM이나 CSSOM로 변환되고 랜더트리에 반영)` ➡️`레이아웃 (요소의 위치와 ..

티스토리툴바