웹 개발/리엑트
-
리엑트(3)웹 개발/리엑트 2025. 4. 17. 11:58
memoization - 함수형 컴포넌트에서 다른 변화 때문에 연산이 되는 불필요한 연산을 안하게 하기위해 사용한다. useMemo란? - useMemo는 메모리에 있는 캐시를 사용하는 함수 - 캐시에 있는 것을 쓴다는 것은 최초에 마운트를 할 때 연산결과를 캐시에 담아놓고 리랜더링 있을 때 캐시와 결과를 비교하고, 내가 원하는 값의 변화를 줄 때만 연산을 수행한다. 이것을 memoization이라고 한다. const result = useMemo(() => heavyFunction(input), [input]);input이 바뀔때만 heavyFunction을 실핼한다. Context API란? - 리액트 내장 API(16버전 이상) 중 하나로 Props를 넘겨주지 않고도 컴..
-
리엑트(2)웹 개발/리엑트 2025. 4. 17. 10:34
라이프사이클 - 페이지에 컴포넌트가 생성되고, 수정되고, 사라지는 순서를 의미한다. React에서 클래스 컴포넌트를 사용하면, 9개의 메소드를 통해 작업 흐름을 제어할 수 있다. 마운트 - constructor : 새로운 컴포넌트를 생성할 때 마다 실행 - getDerivedStateFromProps : props를 state에 넣을 때 사용한다. 컴포넌트가 마운트될 때와 업데이트가 될 때 실행된다. - render : 준비해놓은 UI를 랜더링할 때 실행된다. - componentDidMount : 페이지에 컴포넌트가 나타난 직 후 실행된다. 업데이트 - getDerivedStateFromProps - shouldComponentUpdate : tr..
-
리엑트(1)웹 개발/리엑트 2025. 4. 17. 10:15
React란 ? - 복잡한 사용자 인터페이스(UI)를 쉽게 구축하기 위해 페이스북에서 제작된 자바스크립트 기반의 라이브러리 - 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 주로 사용된다. - 특정 데이터에 변화가 생길 때 매 번 변화를 주기 위한 코드를 작성하는 것이 아니라, 기존 코드를 없애고 다시 새롭게 랜더링 한다.렌더링(Rendering) - 화면에 보여주는 것 - 코드가 번역(컴파일)되어 실행된 뒤 화면을 통해 사용자에게 보여진다.// 상태가 변할 때 리렌더링 되는 간단한 컴포넌트import { useState } from "react";function Counter() { const [count, setCount] = useState(0); return ( 현재 ..