본문 바로가기

분류 전체보기

 (200)
리액트 Hooks - useState, useEffect 안녕하세요 YB 최정완이에요많이 쓰이는 useState, useEffect 훅에 대해 같이 알아보아요 [들어가기]React에서 훅(Hook)은 함수형 컴포넌트에서 상태와 라이프스타일 기능을 사용할 수 있도록 해주는 함수에요라이프스타일 메서드(Lifecycle Methods)는 컴포넌트가 생성되고 업데이트되며 제거되는 과정에서 특정 시점에 호출되는 메서드들을 의미해요. 이 기능은 컴포넌트의 상태를 관리하거나 부수 효과를 처리하는 데 도움을 줘요. 1. useState()useState는 함수형 컴포넌트에서 상태를 관리할 수 있도록 해주는 훅이에요.useState를 사용하면 상태 변수와 상태를 갱신하는 함수를 생성할 수 있어요. import React, { useState } from 'react';func..
리액트 개발자 도구로 개발력 향상시키기 안녕하세요 웹파트YB 강민하 입니다 ! 😄리액트 만능 도구인 리액트 개발자 도구만 있으면 개발력이 쭉쭉 향상된답니다.1. 리액트 개발자 도구란?리액트 개발자 도구(React Developer Tools) 는 리액트를 개발하며 디버깅, 성능 프로파일러, 컴포넌트 탐색, 등등등 여러가지 편의 기능을 제공하는 웹 브라우저의 확장 프로그램이다. https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en React Developer Tools - Chrome 웹 스토어Adds React debugging tools to the Chrome Developer Tools. Created fro..
[React] - 구조 분해 할당(feat. useState) 안녕하세요! Web YB 이윤지 입니다.이번 3주차 리액트를 배우면서, useState가 상태 관리를 위해 사용된다는 건 알겠는데,const [value, setValue] = useState(초기값);왜? 이렇게 쓰일까? 하고 궁금해서 이번 아티클의 주제로 리액트의 구조 분해 할당 (feat. useState) 를 선택했습니다.ㅎㅎ 1. 구조 분해 할당?구조 분해 할당 문법은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 쉽게 말해서 배열이나 객체를 쪼개서 필드 값을 변수에 담을 수 있다. *배열 구조 분해const fruits = ['apple', 'berry', 'banana'];const [one, two, three] = fruits;cons..
[React] 다양한 렌더링 방식 - CSR, SSR, SSG 웹 페이지를 렌더링하는 방식에는 CSR, SSR, SSG가 있다. 이때 렌더링이란 실시간으로 웹페이지가 그려지는 과정을 의미한다.  렌더링 과정은 과정을 직접 눈으로 확인하기 어렵지만 불러와야 할 파일이 너무 무겁거나 개수가 많은 경우, 처리되는 데 걸리는 시간이 길어져 사용자가 불편함을 느낄 수 있다. 따라서 렌더링의 방식에 따라 초기 로딩 시간, 검색 엔진 최적화(SEO), 사용자 경험의 정도 등이 달라진다.  클라이언트 사이드 렌더링(CSR; client side rendering)클라이언트인 웹 브라우저가 렌더링을 처리하는 방식으로, 서버에서 받은 데이터를 통해 화면을 그리는 주체가 웹 브라우저가 되는 방식 사용자가 메인 페이지에 접속하면 브라우저가 해당 웹 애플리케이션에 필요한 HTML과 정적 ..
[React] StrictMode 안녕하세요:) 웹 파트 YB 유서연입니다! 이번 글에서는 리액트의 StrictMode에 대해 알아보겠습니다.Strict Mode 과제를 하다보면 디버깅을 위해 콘솔을 찍어보는 경우가 많을 텐데요.이때, 위 사진처럼 console.log()를 한 번만 실행했음에도 불구하고 두 번 씩 찍히는 걸 본 적이 있을 겁니다.이처럼 렌더링이 두 번 발생하는 이유는 index.jsx(main.jsx) 파일에서 React.StrictMode가 동작하기 때문입니다.  그렇다면 왜 StrictMode를 작동시키는 걸까요?StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다.이때, StrictMod..
[React] - 개발 단계에서 고민해보면 좋은 것들(상태, 컴포넌트) 안녕하세요👋 웹파트 OB 김건휘입니다. 오늘은 리액트 중 개발 단계에서 실질적으로 고민해보면 좋은 주제 들에 대한 이야기를 해보고자 합니다.1. State Management의 최소화리액트에서 정말 중요한 개념 중 하나인 "state(상태)"를 어떻게 관리할 것인가에 대한 고민은 웹 개발을 하면서 마주하게되는 고민 중 하나인데요.  1️⃣ state(상태)가 뭔데?리액트에서 상태(state)란, 컴포넌트의 동적 데이터를 저장하고 관리하는 객체이다. 상태(state)는 컴포넌트가 변경될 수 있는 값들을 보유하는 데 사용되며, UI가 그에 맞춰 자동으로 업데이트해준다. 즉, 상호작용에 따라 변하는 값들이 상태(state)이다. 2️⃣ state(상태) 특징1. 컴포넌트의 기억 저장소상태는 컴포넌트가 기억해..
[React] Custom Hook 안녕하세요. 다시 돌아온 웹 배영경입니다😵‍💫이번에는 Custom Hook에 대해 알아보았습니다!React로 게임 만들기를 하면서, useState와 useEffect를 많이 썼는데요, Custom Hook는 어떤것인지 살펴보겠습니다.Custom Hook 사용 이유사용자 정의 후크는 재사용 가능한 로직을 캡슐화하여 components를 더 깔끔하고 유지 관리하기 쉽게 만들 수 있다.사용자 정의 후크를 생성하면 복잡한 로직을 UI에서 분리하여 구성 요소를 더 단순하게 유지하고 렌더링에 집중할 수 있다. 다양한 구성 요소에서 상태 저장 논리를 재사용복잡한 로직을 캡슐화하여 components를 더 단순하게 만듦코드를 더 읽기 쉽고 테스트하기 쉽게 만듦 Custom Hook 만들기사용자 정의 후크는 use..
[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..

티스토리툴바