윤제니

React 컴포넌트 LifeCycle React Hooks - useEffect() 컴포넌트 내부에서 발생하는 네트워크 요청, 데이터 가져오기,타이머, UI 업데이트 등의 작업을 다루기 위한 Hook 컴포넌트의 렌더링이 완료된 후에 실행됨 매 렌더링마다 자동으로 호출됨 useEffect(() => { 인자A // TODO, Callback 함수 }, [인자B]); useEffect의 인자 첫 번째(인자A) : Callback 함수, 컴포넌트 내부에서 발생하는 작업 두 번째(인자 B): Dependency Array, 의존성 배열에 포함된 값들이 변경될 때마다 useEffect 가 다시 실행됨 만약, 의존성 배열이 비어있는 경우 => useEffect은 컴포넌트가 처음 마운트 될 때만 실행되고 언마운트 될..

useState 사용 시 주의할 점 App.js import { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState(0); return ( {number} { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3 ) } 위의 "+3" 버튼을 클릭하면 호출 횟수에 관계없이 이벤트 핸들러 내부 number 값은 항상 0 setNumber(1)이 계속 호출이 되는것이다. => 리액트는 이벤트를 일괄 처리하지 않으며 별도로 처리된다. "+3"버튼을 클릭할 때마다 number 값은 1,2,3... 이렇게 1씩 숫..

React 자바스크립트 라이브러리 오직 V(view)만 신경 쓰는 라이브러리 Component 기반의 UI 라이브러리 선언형 프로그래밍 Virtual DOM 사용 초기 렌더링 render() {...} 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요한데 리액트에서는 render 함수 사용 - 컴포넌트가 어떻게 생겼는지 정의 - 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환 - HTML 마크업 후 실제 페이지의 DOM 요소 안에 주입 컴포넌트 특정 부분이 어떻게 생길지 정하는 선언체 => 데이터를 업데이트했을 때 단순히 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를 호출한다. render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, ..