useState란?component가 상태 가지게 할 수 있다.아래와 같은 코드 형태으로 존재한다.const [state, setState] = useState(초기값);예시 코드로 보기const [time, setTime] = useState(12);// time = 12// setTime(10) 을 할 경우 time 의 값이 10으로 변경된다,React는 setState() 요소를 사용하면 화면을 업데이트 즉 다시 렌더링 시켜준다실제 코드로 살펴 보기'use client';import { useState } from 'react';const Mytime = () => { const [time, setTime] = useState(1); const handleClick = () => { let..
Stack
useEffect는 컴포넌트가 3가지 상태일때 동작된다.Mount : 화면에서 생성될때Upadate : 화면에서 업데이트 될때UnMount : 화면에서 사라질때useEffect는 기본적으로 인자로 callback 함수를 인자로 받는다.useEffect 의 형태첫번째, useEffect의 인자로 callback 함수만 받는 경우useEffect(() => { // code.});해당경우는 component가 처음 렌더링될때 , 그리고 화면 다시 리렌더링 될 때 실행된다.두번째, useEffect의 인자로 callback 함수와 배열을 받는 경우 (dependency array)useEffect(() => { // code.} , [value] );component가 처음 렌더링될때 , 그리고 depen..
Next.js 에서 Three.js 를 구현, 그러나 Three.js의 화면 크기를 변경이 필요하여 변경하는 방법을 기록DOM 요소의 크기를 설정구현할 요소의 크기를 width: '800px', height: '600px' 로 설정하였다.Next.js 에서 render 설정const mountRef = useRef(null);mmountRef를 통해 DOM 요소에 접근하여 width와 height를 아래 코드를 통해 가지고 온다.const width = mountRef.current.clientWidth;const height = mountRef.current.clientHeight;renderer.setSize(width, height);renderer의 사이즈를 가지고온 DOM 요소와 같이 통일시킨다..
프로젝트 도중 Resizable 구현이전에 Draggable 을 구현한것 처럼 아래와 같은 코드로 구현을 해보았다.import { RefObject } from 'react';import styles from './resizeButton.module.css';interface ResizeButtonProps { resizableRef: RefObject;}const ResizeButton = ({ resizableRef }: ResizeButtonProps) => { const resize = (pageX: number, pageY: number) => { if (resizableRef.current) { const rect = resizableRef.current.getBounding..
Next.js 에서 Draggable 구현하기개인프로젝트를 만들던 중, 내가 만든 컴포넌트 Draggable 컴포넌트를 직접 구현하였다.import React, { RefObject, useRef } from "react";import styles from "./draggable.module.css";import { getOffset } from "@/app/utils/utils";interface DraggableProps { children: React.ReactNode; refObject?: RefObject;}const Draggable: React.FC = ({ children, refObject }) => { const draggableRef = useRef(null); let shif..
Context API가 무엇인가?context는 리액트에서 컴포넌트끼리 어떠한 값을 공유하는 기능이다.보통 전역적(global)로 사용되지만, 꼭 전역적으로 사용할 필요는 없다.Context API를 왜 사용하는가?React에서 컴포넌트에서 값을 props로 넘겨주면 생기는 props drill현상이 있다.import React from 'react';// 최상위 컴포넌트function App() { const username = 'johndoe'; // 사용자 이름을 상태로 관리하거나 props로 받을 수 있습니다. return ( Level 1 );}export default App;// 두 번째 컴포넌트function LevelTwo({ username })..
