React 3

React 의 useEffect 를 쉽게 이해해보자!

React를 사용하다 보면, 컴포넌트가 화면에 나타나거나 사라질 때, 또는 특정 값이 변경될 때 어떤 작업을 하고 싶을 때가 많습니다. 예를 들어, 데이터를 가져오거나, 타이머를 설정하거나, 특정 작업을 정리(cleanup)해야 할 때 말이죠. 이럴 때 우리가 사용하는 것이 바로 useEffect입니다. useEffect를 사용하면 컴포넌트가 렌더링될 때 또는 특정 값이 바뀔 때 필요한 작업을 자동으로 처리할 수 있습니다. 이번 글에서는 useEffect의 다양한 사용 시점을 알아보고, 실제 예시 코드를 통해 그 사용법을 익혀보도록 하겠습니다.  useEffect의 사용 시점useEffect는 다음과 같은 시점에서 사용됩니다.컴포넌트가 처음 화면에 나타날 때특정 값이 바뀔 때컴포넌트가 매 렌더링마다 실행..

React와 Tailwind CSS로 간단한 애니메이션 구현하기

이번 글에서는 React와 Tailwind CSS를 사용해서 간단한 애니메이션과 상태 관리를 구현하는 방법을 알아보겠습니다.  본격적인 설명에 앞서 다음 두 가지 용어를 정리하고 넘어가겠습니다. useState : 컴포넌트 내에서 동적인 값을 저장하고 업데이트할 수 있게 해주는 React의 훅(Hook) 입니다.Tailwind CSS: Tailwind CSS는 클래스 이름만으로 다양한 스타일을 쉽게 적용할 수 있게 도와주는 도구예요. 이번 글에서는 상태에 따라 다른 CSS 애니메이션과 스타일을 적용합니다. 구현 예제 코드아래는 사용자가 텍스트를 입력하고 엔터 키를 누르면, 입력란이 화면 위쪽으로 이동하면서 더 이상 수정할 수 없게 되는 예제 코드입니다.import { useState } from "rea..

유데미(Udemy) React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발 수강 후기

현재 개발자 글쓰기 커뮤니티 '글또' 9기에 참여하고 있습니다. 이번 9기에서는 유데미에서 지원을 받아 관심 있는 강의를 무료로 들을 수 있었는데요. 제가 선택한 강의는 [React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발]입니다. -> 강의 링크 저는 핀테크 스타트업에서 백엔드 개발자로 일하고 있지만 과거 전공이 시각디자인이기도 했고 3D 와 인터렉티브에도 관심이 있어 개인적인 흥미로 강의를 선택하였습니다. 강의 소개 R3F는 React Three Fiber의 약자로, React를 위한 Three.js 레퍼 라이브러리인데요. Three.js는 웹에서 3D 콘텐츠를 만들기 위한 JavaScript 라이브러리입니다. R3F는 이 Three.js를 React의 선언적인 구성 방식으로 ..