코딩

EffectHook useEffect는 함수 컴포넌트내에서 이런 side effects를 수행할 수 있게 해줍니다.React class의 componentDidMount나 componentDidUpdate, componentWillUnmount와같은 목적을 제공하지만, 하나의 API로 통합되었습니다.이를 통해 렌더링 이후의 작업, 상태 변화에 따른 동작, 컴포넌트 정리(clean-up) 등을 간결하게 구현할 수 있습니다.  componentDidMount처럼 동작합니다.의존성 배열을 빈 배열([])로 설정하면, 컴포넌트가 처음 마운트될 때만 실행됩니다.useEffect(() => {}, [])  componentDidMount + componentDidUpdate처럼 동작합니다.의존성 배열을 생략하면, ..

Lifecycle란?어떤 프로그램이 실행되고, 종료되는 과정을 의미합니다.  화면에 보여지는 시간을 1초마다 업데이트해주고 싶을 때 setDate(new Date())를 실행해서 화면을 업데이트하게 된다면 불필요한 업데이트와 메모리 누수가 발생하게됩니다.import React, { useState } from "react";export default function Clock() { const [date, setDate] = useState(new Date()); window.setInterval(() => { setDate(new Date()); }, 1000); return ( Hello, world! It is {date.toLocaleTimeString()}...

State는 왜 사용할까? Counter 함수 컴포넌트는 함수이기 때문에 호출 시에 return문으로 실행되고 끝나기만 합니다.import React from "react"; export default function Counter() { I let count = 0; return ( (count += 1)}>+1 Counter: {count} );} 그래서 버튼을 클릭해도 숫자가 바뀌지 않습니다.   함수 컴포넌트에서 내부적으로 상태를 관리하는 useState가 필요합니다.상태값을 관리한다는 뜻은 상태값을 변경이 가능하고 컴퍼넌트가 렌더링이 되도록 합니다. useState 배열을 리턴해줍니다..

React 앱 만들 때1) Babel: 자바스크립트 컴파일러라고 하고 a에서 b를 변경해주는 코드입니다. 2) webpack 3) HMR(hot-module-replacement)  react, react-som, Babel 설정 파일 구조  index.html는 React가 렌더링될 진입점 역할을 합니다. root 요소에 컴포넌트를 동적으로 렌더링합니다.    index.js는 React 애플리케이션의 자바스크립트 진입점입니다. 애플리케이션을 초기화하고 index.html를 root에 react 컴포넌트를 렌더링 해줍니다.import React from "react"import ReactDom from "react-dom";import FollowButton from "./components/Fo..