react

리액트를 사용하다 보면 useEffect라는 훅을 많이 사용합니다. 처음엔 어렵게 느껴질 수도 있지만, 개념을 정확히 이해하고 나면 리액트 컴포넌트의 생명주기를 자연스럽게 다룰 수 있죠.이번 포스팅에서는 useEffect가 도대체 어떤 역할을 하는지, 언제 사용해야 하는지, 그리고 마운트(Mount)와 언마운트(Unmount) 개념까지 함께 정리해 보겠습니다. 1.useEffect란?리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행하게 하는 훅이다 useEffect는 컴포넌트가 Mount(마운트), Update(업데이트), Unmount(언마운트) 되는 시점에 따라 작업을 실행할 수 있도록 도와줍니다. 주로 api 호출, 타이머 설정, 이벤트 리스너 등록/해제 등에서 사용합니다 2. 리액트의 Life..

props는 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 정보를 전달하는 방법이다props는 properties의 줄임말로 컴포넌트에 전달되는 속성값이다다만, props를 너무 별생각 없이 남발하면 props drilling이 일어나 상태관리에 문제가 생길 수 있으므로 useContext 혹은 Redux 등 전역 상태 관리 방식을 사용해야된다 1. 예제(기본 props 전달 예제)//부모컴포넌트import React from "react";import Welcome from "./Welcome";function App() { return ( );}export default App;import React from "react";function Welcome(props) { r..

usestate는 리액트 훅 중에 기본적으로 알아야 될 훅이다상태관리를 하기 위해 사용하며 상태를 저장하고 변경해준다1. usestate 기본 사용법const [state, setState] = useState(0);usestate는 구조분해 할당문법을 사용한다배열에 첫 번째 state는 현재 상태값을 뜻하며 상태값은 usestate()안에 적은 0이 현재 초기 상태값이다그리고 두 번째 값으로 현재 상태값을 바꿔준다function App() { const [count, setCount] = useState(0) function count_click(){ setCount(count + 1 ) } return ( 번호 카운트: {count} click ..

리액트는 메타에서 개발한 오픈소스 라이브러리로 현 시점 웹에서 많이 사용하는 라이브러리입니다spa(single page application)방식으로 작동하며 당연히 사전에 노드가 설치 되있어야 사용가능하다기존의 create-react-app 방식은 지원이 종료 됬다는 이야기도 있다보니 vite로 설치 하겠다vite란? 빠르고 간결하게 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구라고 한다 -설치방법 npm create vite@latest위에 명령어를 입력하고 실행 해주면 여러 설정이 나오는데요 project name은 현재폴더에 만들 프로젝트 네임입니다 적어주신대로 폴더 내부에 리액트 환경이 만들어집니다select a framework는 vite로 사용할 프레임 워크를 선택 해야됩니다 리액트..