종구's Tech Blog

UseEffect 란?React Hooks 의 기능 중 하나이다.컴포넌트가 렌더링된 후 부수적인 작업(side effect) 을 수행할 수 있도록 도와준다.함수 컴포넌트 내에서만 사용할 수 있다.부수 효과란? (side effect)데이터 가져오기 (fetch)이벤트 리스너 추가  / 제거하기타이머 설정하기UseEffect 기본 문법import React, { useEffect } from 'react';function MyComponent() { useEffect(() => { // 실행할 코드 return () => { // 정리(clean-up) 코드 -> 사용하는 useEffect 를 언마운트 시 제거하여 메모리 정리 }; }, [// 의존성 배열 : 이 배열에 포함된 값이 변경될..

React Hooks 란?함수형 컴포넌트 ( function / 익명함수 const ??? = () => {} ) 에서도 상태 관리와 생명주기 메서드를 사용할 수 있게 해주는 기능React 16.8 버전부터 도입간결한 코드 작성이 가능하게 도와준다. 주로 쓰이는 React HooksuseState : 컴포넌트의 상태(State) 를 선언하고 관리할 수 있다.React : useState란? import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( 현재 카운트: {count} setCount(count + 1)}>증가 );}버튼 클..

UseState 란?React 에서 데이터의 상태를 관리하기 위한 객체컴포넌트의 동작과 화면에 표시되는 데이터를 동적으로 업데이트 할 수 있게 함. State의 특징내부적으로 관리 : 컴포넌트 내부에서 생성 및 관리되며, 다른 컴포넌트에서 접근 불가능동적 업데이트 : State 값이 변경되면 해당 컴포넌트 -> 하위 컴포넌트들이 자동으로 리렌더링불변성 : 직접 수정하지 않고 항상 React 에서 제공하는 함수를 사용해 업데이트 (ex. setState) State는 언제 필요할까?동적인 사용자 인터페이스를 만들기 위해 필요ex) 카운트 버튼, 실시간으로 변하는 값import React, { useState } from 'react';function Counter() { const [count, setC..