3주차 (26) 썸네일형 리스트형 [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.. 리액트 컴포넌트의 Lifecycle 안녕하세요 ~ 웹 YB 김가현입니다.3주차 공유과제로는 리액트 컴포넌트의 생명주기를 다뤄 보려고 해요 ! 리액트의 컴포넌트에는 크게 함수형 컴포넌트와 클래스형 컴포넌트가 있는데,예전에는 상태 관리나 생명 주기 관련 기능을 사용하려면 반드시 클래스형 컴포넌트를 사용해야 했어요.하지만 리액트 16.8 버전 이후로 Hook이 도입되면서 함수형 컴포넌트에서도 클래스형 컴포넌트가 제공하는 기능을 쓸 수 있게 되었답니다짱이죠 ? 함수형 컴포넌트의 생명주기 ! 라이프사이클에 대해 알아보겠습니다 🫡Lifecycle ?React 컴포넌트의 라이프 사이클은 컴포넌트의 생성, 업데이트, 제거 과정에서 일어나는 일련의 단계를 의미한다.마운트컴포넌트가 처음으로 생성될 때컴포넌트의 초기화 작업을 수행하거나 외부 데이터를 가져와.. [3주차] JSX 알아보기 안녕하세요 YB 김린아입니다.이번 아티클 주제는 3주차 리액트를 학습하며 알게된 JSX입니다.JSX가 무엇인지, 사용되는 이유가 무엇인지, 그리고 대표적인 문법 규칙에 대해 정리해보았습니다. 1. JSX란JSX는 JavaScript XML(eXtensible Markup Language)의 약자로 JS에 XML을 추가한 확장된 문법이다. React에서 UI를 표현하기 위해 사용되고, 리액트 사용시 JSX는 HTML과 JS를 모두 포함하고 있는 컴포넌트를 생성한다. JSX는 브라우저에서 직접 실행되지 않아 JSX코드를 자바스크립트 코드로 변환해주는 도구가 필요하다. 2. JSX의 장점JSX의 대표적인 장점은 보기 쉽고 익숙하다는 것이다. HTML 코드와 유사하여 일반 자바스크립트만 사용한 코드보다 더 익.. 이전 1 2 3 4 다음
