react

기본 개념`useEffect`와 `useLayoutEffect`는 모두 컴포넌트가 렌더링된 후 특정 작업을 수행하기 위해 사용됩니다. 하지만 각각의 실행 시점과 목적이 다르기 때문에, 상황에 따라 적절한 Hook을 선택해야 합니다.  useEffect`useEffect`는 렌더링이 완료된 후 비동기적으로 실행됩니다. 즉, 화면이 사용자에게 실제로 표시된 이후에 실행됩니다.주요 특징비동기적 실행화면 표시 후 실행성능에 미치는 영향이 적음사용 사례useEffect(() => { // API 데이터 가져오기 fetchData().then(data => setData(data)); // 이벤트 리스너 등록 window.addEventListener('resize', handleResize); // 클린..

React는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 건네는 단방향 데이터 흐름을 가집니다.Props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다. props는 읽기 전용으로, 자식 컴포넌트는 props를 수정할 수 없습니다.props가 불변이기 때문에 데이터 흐름을 예측 가능하게 만들고, 컴포넌트의 재사용성을 높입니다.import React, { useState } from 'react';function ParentComponent() { const [name, setName] = useState('Original Name'); const handleClick = () => { setName('New Name'); }; return ( ..

프로젝트를 진행하면서 계속 변경할 예정 프로젝트 생성(Vite)npm create vite@latest를 실행(Vite 사용하기 위해서는 node.js 설치 필요)프로젝트 이름 설정프레임워크 설정(Vanilla, Vue, React 등)variant 설정(Typescript를 선택할 것인지)cd 프로젝트 이름npm installnpm run dev위와 같이 진행하면 http://localhost:5173/ 주소로 React에 Vite 빌드 도구를 활용한 페이지를 확인할 수 있다. 궁금증이전에는 CRA(create-react-app)을 통해 프로젝트를 생성했었는데, Vite를 사용하는 이유는 뭘까?CRA는 JavaScript로 구성된 Webpack(웹팩)을 사용하는데 속도가 느린 편이다. 코드의 양이 많아..

정리 React-Doc-Study/1주차 at main · tjddnr9553/React-Doc-StudyContribute to tjddnr9553/React-Doc-Study development by creating an account on GitHub.github.com컴포넌트 생성 및 중첩하기컴포넌트(Component)란?고유한 로직과 모양을 가진 UI(사용자 인터페이스)의 일부입니다. 마크업을 반환하는 자바스크립트 함수로, 마크업이란 태그로 둘러싸인 코드를 의미합니다. 컴포넌트의 이름은 항상 대문자로 시작하고, HTML 태그는 소문자로 시작합니다. export default 키워드는 파일의 기본 컴포넌트를 지정합니다.function MyButton() { return ( I'm a bu..

웹페이지의 레이아웃을 쉽고 간단하게 사용할 수 있도록 구현된 와  Container 컴포넌트 컴포넌트는 컨텐츠(내용)을 좌우에 적당한 간격을 두고 화면 중앙에 위치시킬때 사용한다.1. 최대 너비만을 제한하는 fluid 모드2. 항상 동일한 너비를 강제하는 fixed 모드import { Container, Typography } from "@material-ui/core";import { makeStyles } from "@material-ui/core/styles";const useStyles = makeStyles((theme) => ({ container: { background: theme.palette.success.main, },}));export default () => { cons..

Paper 컴포넌트 컴포넌트는 포스트잇처럼 화면에서 도드라져 보이는 효과를 제공한다.elevation, outlined 2가지 형태를 사용할 수 있다.elevation : 영역이 약간 튀어나와 보이게 한다.outlined : 테두리(윤곽선)이 보이게 한다.import { Paper, Typography } from "@material-ui/core";import { makeStyles } from "@material-ui/core/styles";const useStyles = makeStyles((theme) => ({ paper: { padding: theme.spacing(2), },}));export default () => { const classes = useStyles(); ret..

TextField 컴포넌트는 Material UI의 다른 컴포넌트인 , , 등으로 구성되어 있는 고수준 컴포넌트이다.를 사용하면, 여러 개의 하위 컴포넌트를 사용하는 효과를 얻을 수 있다. 형태는 standard, filled, outlined 총 3가지의 형태로 제공된다.standard : 배경색 X, 테두리 X, 밑줄만 표시filled : 배경색 O, 테두리 Xoutlined : 배경색 X, 테두리 Oimport { TextField } from "@material-ui/core";export default () => ( ); 상태는 required나 disabled와 같은 엘리먼트 기본 속성뿐만 아니라, error와 같은 추가적인 상태도 지원한다.'error' prop..