react hook

[React] 컴포넌트 생명주기 - Component Life Cycle (with useEffect)

컴포넌트 생명주기란? 컴포넌트가 브라우저에 나타나고, 업데이트 되고, 사라질 때 호출되는 메소드. 렌더링을 기준으로 특정 시점에 코드가 실행되도록 할 수 있다. 클래스형 컴포넌트로 선언시에만 사용 가능하며 함수형에서 생명주기를 사용하고 싶은 경우에는 훅(Hook)을 이용해 유사하게 구현해야 한다. 그리기 : render() 그리고 난 뒤 : componentDidMount() 그리고 난 뒤 업데이트 : componentDidUpdate() 그리고 난 뒤 사라짐 : componentWillUnmount() 생명주기는 이런 형태로 사용된다. (예시의 경우 Next.js 환경) import { Component, createRef } from "react"; import Router from "next/rou..

[React] 리액트의 핵심, State (with useState)

State란? 리액트 컴포넌트의 변수로, 화면에 자동으로 반영되는 변수이다. 기본 형태는 아래와 같다. const [state, setState] = useState() state : 변수 setState : 변수를 바꿔주는 함수. setState(a) 하면 statd의 값이 a가 된다. useState() : 괄호 안에는 변수의 초기값이 들어간다. React hook에서 제공하는 기능으로, state를 사용하기 위해서는 useState를 import 해와야 한다. import { useState } from 'react' state의 동작원리 엄밀하게 따지자면, state가 '실시간'으로 화면에 반영되는 것은 아니다. 그 이유는 state의 동작원리를 살펴보면 알 수 있다. 브라우저는 state가 변경..