종구'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..

React의 기술적인 특징컴포넌트를 기반으로 UI를 표현한다.화면 업데이트 구현이 쉽다.화면 업데이트가 빠르게 처리된다.컴포넌트(Component) 란?컴포넌트 = 구성요소 > 화면을 구성하는 요소, UI를 구성하는 요소리액트에서는 페이지의 모든 요소들을 "컴포넌트"의 단위로 모듈화해서 개발하기 때문에여러 페이지에서 공통으로 사용하는 요소들의 유지보수가 쉽다.선언형 프로그래밍 / 명령형 프로그래밍선언형 프로그래밍 : 과정은 생략하고 목적만 간결히 명시하는 방법 (React 활용 구현)명령형 프로그래밍 : 목적을 이루기 위한 모든 일련의 과정을 설명하는 방법 (Javascript 만으로 구현)리액트에서는 각 컴포넌트의 상태를 저장하는 State라는 특수한 변수를 저장할 수 있다.State 값이 바뀌면 즉각..