Salangdung_i의 기록

이전 스터디 https://salangdung.tistory.com/351 제어/비제어 컴포넌트(1) SSOT원칙요약키오스크 프로젝트의 CS 인입이 발생했다. 현상 : 키보드 컴포넌트에서 이전에 입력한 값이 input에 왕창 찍히는 현상이 발생확인 : 키보드에서 입력받은 text를 setState로 관리하고, 이 state가salangdung.tistory.com이전 스터디에서는 SSOT, 제어/비제어 컴포넌트의 정의 및 비제어컴포넌트가 SSOT 원칙에 왜 위배되는 것인지에 대해 포스팅을 했다. 동료들과 스터디 내용을 공유하면서 더 깔끔하게 이해된 부분이 있어서 오늘은 이 부분에 대해 포스팅해보려고 한다.  제어/비제어 컴포넌트 사용 시점제어 컴포넌트를 사용해야 하는 경우는 크게 4가지이다.1. 상태 관..

요약키오스크 프로젝트의 CS 인입이 발생했다. 현상 : 키보드 컴포넌트에서 이전에 입력한 값이 input에 왕창 찍히는 현상이 발생확인 : 키보드에서 입력받은 text를 setState로 관리하고, 이 state가 변경될 때마다 useRef로 값을 넣어주고 그 값을 input value로 넘겨줬다. useRef 특성상 값의 변화에 따라 화면을 랜더링 하지 못하고, 이 때문에 useRef의 값이 화면에 그려지는 시점에서  이전에 입력했던 text가 input value에 들어가면서 발생한 현상이다. const [text, setText] = useState('');const input = useRef('');useEffect(() => { input.current.value = text;}, [text..

LifeCycleMethod이 무엇인지 설명해주세요. React에 있는 라이프사이클들을 설명해주세요. 결론 리액트 컴포넌트의 라이프사이클에 따라 어떤 처리를 해줘야할때 유용하게 쓰이는 Method이다. 설명 모든 리액트의 컴포넌트들은 라이프사이클이 존재합니다. 컴포넌트의 수명은 페이지가 랜더링되기 전인 준비단계에서 시작되어 페이지에서 사라질 때 끝납니다. 리액트를 사용해서 프로젝트를 진행하다보면 컴포넌트를 처음으로 랜더링해야할때 어떤 작업을 처리해야하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할수도있고, 또한 불필요한 업데이트를 방지해야 할 수도 있습니다. 이때 컴포넌트 라이프사이클 메서드를 사용하면 됩니다. 클래스형 라이프사이클의 경우 mount, update, unmount 3가지 과정..

useMemo와 useCallback에 대해 설명해주세요. 결론 둘 다 React Hook에서 불필요한 랜더링과 연산을 제어하는 용도로 성능 최적화에 목적이 있는 Hook입니다. 설명 uesMemo와 useCallback을 이해하기 위해선 메모이제이션을 먼저 알 필요가 있습니다. 메모이제이션이란 기존에 수행한 연산의 결괏값을 어딘가에 저장해 놓고 동일한 입력이 들어왔을 때 이전의 값을 재사용하는 프로그래밍 기법입니다. 메모이제이션을 적절히 사용하면 연산의 중복을 방지함으로써 메모리를 좀 더 쓰더라도 애플리케이션 성능을 향상할 수 있습니다. React에서 useMemo와 useCallback은 메모이제이션 기법을 사용하여 불필요한 랜더링 또는 연산을 제어하는 용도로 성능을 최적화한다는 점이 같습니다. us..

Virtual DOM이 무엇인지 설명해주세요. Virtual DOM의 작동원리에 대해 설명해주세요. 결론 DOM과 동일한 구조를 가지지만, 메모리상에 존재하는 자바스크립트 객체입니다. 설명 Virtual DOM이란 리액트의 UI를 구성하는 HTML 엘리먼트들을 메모리 내에 구현한 것입니다. 실제 DOM에 접근하여 조작하는 대신, 추상화된 자바스크립트로 객체를 구성하여 사용합니다. 리액트에서 데이터가 변하여 실제 DOM에 반영되기까지는 3가지의 과정을 거칩니다. 먼저 데이터를 업데이트하면 컴포넌트 UI전체를 Virtual DOM에 랜더링 합니다. 다음으로 이전의 Virtual DOM의 내용과 현재의 내용을 비교합니다. 바뀐 내용만 실제 DOM에 적용합니다. DOM 전체를 다시 랜더링할 필요 없이 실제 DO..

리액트를 공부하면서 제일 와닿지 않았던 것은 각종 hooks들이었다. useState, useEffect, useMemo, useCallback 등 용어가 나한테 직관적으로 의미가 다가오지 않았고, 클래스형 라이프사이클 메서드와 개념이 섞여버렸다. 내가 알기 위해 다시 정리하는 hooks이다. 1. useState 컴포넌트에서도 상태관리를 할 수 있는 것이다. 랜더링 직후 작업을 설정한다. const [value, setValue] = useState(); 기본형은 위와 같다. 뜯어보면 value는 상태 값 setValue은 상태를 설정하는 함수 useState안에 들어가는 것은 상태의 기본값이다. 예를 들면 import React, {useState} from 'react'; const App = ()..

render() 메서드 : 준비한 UI를 랜더링하는 메서드이다. 내부적으로 html태그를 사용하여 골격을 만든다. constructor 메서드 : 컴포넌트 생성자 메서드로 컴포넌트를 만들때 처음으로 실행된다. constructor(props) { super(props); this.state = { number: 0 // 초기 state를 정할수 있다. } } getDerivedStateFromProps 메서드 : props로 받아온 값을 state에 동기화 시키는 용도로 사용하며, 컴포넌트가 마운트 될 때와 업데이트 될 때 호출된다. static getDerivedStateFromProps(nextProps, PrevState) { if(nextProps.value !== prevState.value){..

라이프 사이클 메소드 컴포넌트의 수명은 페이지에 랜더링 되기전인 준비과정에서 시작하여 페이지에서 사라질때 끝난다. 라이프사이클은 3가지의 과정을 거치는데 먼저 페이지에 컴포넌트가 나타나는 '마운트' , 컴포넌트 정보를 업데이트하는 '업데이트'(이 과정을 리랜더링이라한다.) 이후 페이지에서 컴포넌트가 사라지는 '언마운트' 과정이다. 라이프 사이클 3가지 마운트 : DOM이 생성되고 웹 브라우저에 나타나는 것을 마운트라고 한다. 업데이트 : 컴포넌트는 4가지 경우에 업데이트 된다. 1. props가 바뀔 때 2. state가 바뀔 때 3. 부모 컴포넌트가 리랜더링 될 때 4. this.forceUpdate로 강제로 랜더링을 트리거 할 때 언마운트 : 컴포넌트를 DOM에서 제거하는 것이다. consturcto..