공부기록/React (5) 썸네일형 리스트형 선언형과 명령형 명령형 정의와 장단점 선언형 정의와 장단점 명령형 프로그래밍이란? 명령어를 명시적 지정하여 프로그램 동작 상태를 변경시키는 프로그래밍 방식 프로그램 동작의 흐름에 중점을 둠. 장단점 모듈 분리 없이 연속 계산과정. 실행속도 빠름 가독성 좋음 이해하는데 시간 비용 많이듦 선언형 프로그래밍이란? 추상화를 통해 명령어 제어의 흐름을 명시적으로 지정하지 않고 프로그램 수행 작업에 중점을 둔 패러다임. React는 왜 선언형 프로그래밍을 지향할까? 💄 UI 상태 관리에서 살펴보는 선언형 프로그래밍의 장점에 대해서 소개합니다. jinyisland.kr 컴포넌트의 리렌더링 조건 리액트의 렌더링 시기 https://velog.io/@eunbinn/when-does-react-render-your-component#%ED%9D%90%EB%A6%84%EB%8F%84 렌더링의 유형 1. 능동적인 렌더링 컴포넌트가 능동적으로 상태변경 업데이트 예약 ReactDOM.render호출 2. 수동적인 렌더링 부모 컴포넌트가 상태 업데이트 예약 했는데, 컴포넌트가 렌더링 제외 기준을 충족하지 못함 1. 능동적인 렌더링 클래스 컴포넌트 : Component.prototype.setState 함수형 컴포넌트 : 훅에 의해 발생한 dispatchAction (useReducer훅, useState 훅등) ReactDOM.render 호출 2. 수동적인 렌더링 수동적 렌더링 제외기준 이미 마운트 됨 변.. [React] 리액트로 state여러개 object로 관리하기 상황: 어드민페이지를 만드는 중이었다. 이미지 추가하여 미리보여주는 컴포넌트는 한개이며, 아래와 같다. state를 컴포넌트 내에서 각각 관리하게 하여 이미지를 업로드 할 때도 각각 보일 수 있도록 했었다. import { useState, useRef } from "react"; const ImgAdd = (props) => { const [imgView, setImgView] = useState(""); const imgRef = useRef(); const saveImgView = () => { const file = imgRef.current.files[0]; const reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend.. [React] state를 변경 할 때 spread 문법을 이용하는 이유 (공부내용 정리) (원시값 개념) const reducer = (state, action) => { //state는 이전 상태 , action은 dispatch에서 만든 array switch (action.type) { case 'CHANGE_INPUT': return { ...state, inputs: { ...state.inputs, [action.name]: action.value } //reducer 함수에서 새로운 상태를 만들 때에는 //불변성을 지켜주어야 하기 때문에 위 형태와 같이 spread 연산자를 사용 } } } reducer함수에서 새로운 상태를 만들 때 spread연산자를 사용하는 이유. React는 spread operator를 사용해서 기존의 state값은 유지시키고 그것을 복사해서 업데이트한 값으로 상태를 바.. [react] useReducer Hook 이해하기 [https://blog.logrocket.com/react-usereducer-hook-ultimate-guide/#how-usereducer-hook-work]를 공부한 블로그 개인적인 번역글 useRducer Hook은 어떻게 작동하는가? useReducer Hook은 useState Hook처럼 state를 저장하고 업데이트하기 위해 쓰인다. reducer function을 첫번째 파라미터로, 두번째 파라미터로 초기 state를 받는다. useReducer는 현재의 state 값과 dispatch함수를 가지고 있는 array를 return한다. (우리는 dispatch함수에 action을 보낼 수 있고 그걸 나중에 불러낼 수 있다) reducer함수는 스스로 두개의 파라미터를 받아들이고 한개의 v.. 이전 1 다음
