본문 바로가기

React

 (9)
[3주차 React 상태관리 ✍🏻] Context API / Zustand 안녕하세요 웹 YB 최민입니다오늘은 3주차 React 상태관리에 대해 공부해봤습니다 !! React 상태관리 중에도 Context API 와 Zustand에 대해 알아봤는데요 😎🧐 저도 계속 티스토리에서 로그아웃이 되는 현상이 발생해서 ... (왜일까요?)노션에 적은 글을 첨부하도록 하겠습니다 !! 아티클 발표일 전까지 부족한 내용은 더욱 업그레이드 시켜오겠습니다! 더불어 실습 내용은 추후 추가할 예정입니당 !  https://learned-aardvark-272.notion.site/Context-API-Zustand-13940aeaa45b808187b0ed4038af2d8b?pvs=4 Context API와 Zustand | Notion✅상태관리란❓learned-aardvark-272.notion..
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] 다양한 렌더링 방식 - CSR, SSR, SSG 웹 페이지를 렌더링하는 방식에는 CSR, SSR, SSG가 있다. 이때 렌더링이란 실시간으로 웹페이지가 그려지는 과정을 의미한다.  렌더링 과정은 과정을 직접 눈으로 확인하기 어렵지만 불러와야 할 파일이 너무 무겁거나 개수가 많은 경우, 처리되는 데 걸리는 시간이 길어져 사용자가 불편함을 느낄 수 있다. 따라서 렌더링의 방식에 따라 초기 로딩 시간, 검색 엔진 최적화(SEO), 사용자 경험의 정도 등이 달라진다.  클라이언트 사이드 렌더링(CSR; client side rendering)클라이언트인 웹 브라우저가 렌더링을 처리하는 방식으로, 서버에서 받은 데이터를 통해 화면을 그리는 주체가 웹 브라우저가 되는 방식 사용자가 메인 페이지에 접속하면 브라우저가 해당 웹 애플리케이션에 필요한 HTML과 정적 ..
[React] useEffect 훅과 의존성 배열 안녕하세요! 웹 파트 YB 김태욱입니다. 이번 3주차 세미나를 통해 배운 useEffect훅에 대해 더 공부해보고 아티클을 작성하게 되었습니다. 1.useEffect란?useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 1-1. 언제, 어떻게 사용할까?when- 어떤 컴포넌트가 화면에 보여졌을 때 무언가를 실행하고 싶을 때- 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶을 때  How- useState와 마찬가지로 React에서 제공하는 훅이므로, import React,{useEffect} from "react";로 import 해서 사용한다. 1-2. useEffect 사용 예시//App.jsimport React, { useEffe..
리액트 컴포넌트의 Lifecycle 안녕하세요 ~ 웹 YB 김가현입니다.3주차 공유과제로는 리액트 컴포넌트의 생명주기를 다뤄 보려고 해요 ! 리액트의 컴포넌트에는 크게 함수형 컴포넌트와 클래스형 컴포넌트가 있는데,예전에는 상태 관리나 생명 주기 관련 기능을 사용하려면 반드시 클래스형 컴포넌트를 사용해야 했어요.하지만 리액트 16.8 버전 이후로 Hook이 도입되면서 함수형 컴포넌트에서도 클래스형 컴포넌트가 제공하는 기능을 쓸 수 있게 되었답니다짱이죠 ? 함수형 컴포넌트의 생명주기 ! 라이프사이클에 대해 알아보겠습니다 🫡Lifecycle ?React 컴포넌트의 라이프 사이클은 컴포넌트의 생성, 업데이트, 제거 과정에서 일어나는 일련의 단계를 의미한다.마운트컴포넌트가 처음으로 생성될 때컴포넌트의 초기화 작업을 수행하거나 외부 데이터를 가져와..
[week 1] - UI 표현하기 (컴포넌트, JSX, props) 안녕하세요 ! 웸파트 YB 김가현입니다스터디 노션 세부 커리큘럼에 있는 1주차 파트 UI표현하기 - 첫번째 컴포넌트, 컴포넌트 import 및 export하기, JSX로 마크업 작성하기, 중괄호에 있는 JSX안에서 자바스크립트 사용하기, 컴포넌트에 props 전달하기 부분에 해당하는 공식 문서를 읽고, 정리해보았습니다 👀⭐️ 컴포넌트컴포넌트란 무엇일까?재사용 가능한 UI 요소리액트는 컴포넌트 기반의 구조라는 특징을 가지며, 모든 페이지는 컴포넌트들의 조합으로 구성되어 있다 !컴포넌트를 정의하고 사용하는 방법컴포넌트를 정의하는 방법에는 클래스형, 함수형이 있으나 함수형을 권장하고 있다.가독성이 좋고 코드가 직관적메모리 자원 측면에서도 효율적Hooks를 통한 state 및 LifeCycle 관리가 가능함 ..
[week 1] 리액트 공식문서 - UI표현하기(첫번째 컴포넌트, 컴포넌트 import 및 export하기, JSX로 마크업 작성하기, 중괄호에 있는 JSX안에서 자바스크립트 사용하기, 컴포넌트에 props 전달하기) 안녕하세요! 웹파트 OB 김건휘입니다. 이번 시간에는 리액트 공식문서 - UI표현하기(첫번째 컴포넌트, 컴포넌트 import 및 export하기, JSX로 마크업 작성하기, 중괄호에 있는 JSX안에서 자바스크립트 사용하기, 컴포넌트에 props 전달하기)를 읽고 정리한 내용에 대한 아티클을 작성해보겠습니다.🌐컴포넌트란?컴포넌트는 리액트 앱을 구성하는 기본 단위로, 재사용 가능한 UI 조각을 말한다. 이 컴포넌트들은 각각 자체적인 렌더링 로직과 상태 관리를 가지며, 복잡한 UI를 구성하기 위해 서로 조합하고 재사용할 수 있습니다. 다음 사진과 같이 컴포넌트들를 조합하여 화면을 구성할 수 있다. 컴포넌트를 한 번 정의한 다음 원하는 곳에서 원하는 만큼 여러 번 사용할 수 있다는 점이 바로 React의 킥이..

티스토리툴바