리액트 정리

컴포넌트의 메소드에서 컴포넌트의 태그에 직접 접근 https://velopert.com/1148 리액트 개발을 하다보면 DOM 에 직접적인 접근을 해야 할 때가 있습니다. 그럴 때는 ref 라는것을 사용합니다. 그런데 정확히 어떠한 상황에 DOM 에 직접적인 접근이 필요할까요? 필요한 상황은 다음과 같습니다. input / textarea 등에 포커스를 해야 할때 특정 DOM 의 크기를 가져와야 할 때 특정 DOM 에서 스크롤 위치를 가져오거나 설정을 해야 할 때 외부 라이브러리 (플레이어, 차트, 캐로절 등) 을 사용 할 때 https://www.zerocho.com/category/React/post/57833e23db96321500e401fe Q. Reference 접근 할때 에서 ref={(ref..

- 최적화 하는 법: Class: PureComponent, shouldUpdateComponent hooks : memo (클래스가 아닌 함수 컴포넌트) https://ko.reactjs.org/docs/react-api.html#reactmemo React 최상위 API – React A JavaScript library for building user interfaces ko.reactjs.org Try.jsx import React, { memo } from "react"; const Try = memo(({tryInfo}) => { return ( {tryInfo.try} {tryInfo.result} ) }) export default Try; NumberBaseball.jsx import R..

리액트가 멍청해서 setState만 걸어놓으면 무조건 렌더링한다고 함. (따라서 render()안에 setState걸면 안됨! 무제한으로 렌더 돌기 때문에.. ) 최적화: 처음 하시는 분들이 많이 안쓰시던데.. 나중에 성능에 중요해요 꼭 최적화를 하세요 라고 1. shouldComponentUpdate 그래서 어떤 조건부로 렌더링시켜주기. state, props가 바뀌었을 때 원하는 것만 렌더링 다시 해줄 수 있다. import React, { Component } from 'react' class Test extends Component { state = { counter: 0, }; // 최적화. 현재의 카운터와 미래의 카운터가 다르면 렌더링 하고 아니면 안함 shouldComponentUpdate(..

setState같은 함수 안에 다른 함수를 넣는 경우. 일급함수. higher order function가 된다. 옛날 state로 현재 state를 만들 때. 함수형 setState인 prevState를 사용. onSubmitForm = (e) => { e.preventDefault(); if(this.state.value === this.state.answer.join('')) { this.setState((prevState) => { return{ result: '홈런!', tries: [...prevState.tries, {try: this.state.value, result: '홈런!'}] } }) alert("게임을 다시 시작합니다!"); this.setState({ value: "", ans..

mutating data. 기존 배열 복사해놓고 새 배열 넣어주기 : 리액트에서는 push로 추가하면 변한걸 감지를 못한다. 그래서 새 어레이 생성 + 기존배열을 한번 펴주고 + 새거 추가 ex. 스프레드 연산자 const array = [1]; const array2 = [...array, 2] const array = [1]; const array2 = [...array, 2] => 예전 state 참조와 현재 state가 다른걸 비교 => false면 render를 실행한다. 오브젝트도 object: {...this.state.object} https://ko.reactjs.org/docs/optimizing-performance.html#the-power-of-not-mutating-data 성능..