목록2022/04 (25)
도찐개찐
문제점 아래와 같이 자바스크립트의 map 함수를 사용한 경우 콘솔에서 " Warning: Each child in a list should have a unique "key" prop "이라는 주의 문구를 확인할 수 있다. {["AAA", "BBB", "CCC"].map(item => {item} )} React는 key prop을 사용하여 컴포넌트와 DOM 요소 간의 관계를 생성한다. 리액트 라이브러리는 이 관계를 이용해 컴포넌트 리렌더링 여부를 결정한다. 불필요한 리렌더링을 방지하기 위해서는 각 자식 컴포넌트마다 독립적인 key값을 넣어줘야 한다. 해결 방법 배열로 map 함수를 사용해 JSX 리스트를 구현할 때 key prop을 자식 컴포넌트마다 넣어줘야 한다. Ex: Item1 자바스크립트의 배열..
일반 state는 setState를 통해 가볍게 state 수정이 가능하지만, 아래와 같이 중첩된 state의 경우엔 setState만으로 값이 변경되지 않습니다. this.state = { tempList: { List1: [], List2: [], List3: [] } }; state의 List1, List2, List3 ... 같이 중첩된 객체의 state를 변경하려면, 단순 setState만으로는 한계가 있습니다. 이는 setState의 비동기성으로 인해 발생하는 상황인데, setState와 함께 업데이트 함수를 이용하여 state 값을 변경시킬 수 있습니다. const newList = [1, 2, 3] this.setState(prevState => { // Object.assign메소드로 t..
Fragment? 리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환한다. 리액트를 사용하기 위한 문법인 JSX 를 쓸 때, return 문 안에는 반드시 하나의 최상위 태그가 있어야 한다. 이는 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문이다. Fragment 사용 이유 fragment 를 사용해야 하는 이유를 찾아보면 가장 많이 나오는 예시! 테이블 예시를 보자. import React from "react"; function App() { return ( ); } function Table() { return ( Hello World ); } export default App; table 컴포넌트의 랜더링을 위해서 table 이라는 클래스명을 가진 div 로 묶어서 return 을 한다..
훅은 리액트 버전 ^16.8부터 사용할 수 있는데요 리액트 문서에서는 훅을 "함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동, 연결 (hook into) 해주는 함수" 라고 이해하면 된다고 합니다! 클래스형 컴포넌트의 문제점들을 해결하기위해 나온 것이 바로 훅입니다. 훅은 함수형 컴포넌트에서 상탯값,생명주기,Ref 등 여러가지 기능들을 사용하게 해줍니다. [리액트 공식문서 : hook의 장단점 & INTRO]를 보면 클래스형 컴포넌트가 리액트의 진입장벽을 높게 만든다고 합니다. ▼ 정리해보면 이렇습니다. 클래스형 컴포넌트의 단점 클래스형 컴포넌트에서 로직 재사용시에 사용하는 고차컴포넌트, 렌더속성값 패턴은 리액트 요소 트리를 깊게만든다. 따라서 성능에 부..
PureComponent와 Component의 차이 React.PureComponent는 사실 React.Component와 비교해서 딱 한가지만 다르다 react의 생명주기 메서드중 하나인 shouldComponentUpdate를 어떻게 쓰는가 하는 부분이다. shouldComponentUpdate() shouldComponentUpdate()는 props 또는 state가 새로운 값으로 갱신되어서 렌더링이 발생하기 직전에 호출된다. 기본적으로 shouldComponentUpdate() 메서드의 return값은 true 인데 false를 반환할 경우 render()와 componentDidUpdate()는 호출되지 않는다. component : shouldComponentUpdate React.Comp..
1. 클래스형 컴포넌트 react 컴포넌트를 선언하는 두가지 방식 중 하나. [클래스 컴포넌트 & 함수 컴포넌트] 현재 자주 사용하지 않지만, 아직도 사용하는 기업들도 있다. 클래스형으로 구성된 프로젝트의 유지보수를 위해서도 클래스형 컴포넌트에 대한 개념도 알아야 한다. 2. 클래스형 컴포넌트와 함수형 컴포넌트의 차이 1) 선언 방식 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { const name = 'react'; return {name} } export default App; 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component {..
this.state.{변수명} = {값} 은 리액트에서 권장하지 않는 코드로 값을 직접적으로 변경하게 되면 render() 함수를 호출하지 않아 DOM 변환이 일어나지 않게 됩니다. 이때 forceUpdate() 함수를 아래와 같이 활용하면 re-render 처리하여 변환된 값을 확인 할 수 있습니다. setState 함수 활용 방법과 forceUpdate() 함수 활용 방법 두가지를 적용해 확인 해 보실 수 있습니다. import React, { Component } from 'react'; class ForceUpdate extends Component { constructor(props) { super(props); this.state = { String: "스트링", }; } forceString..
React의 propTypes React 15.5.0 버전이 출시되기 전에는 react 패키지에서 propTypes를 사용할 수 있었지만 이후 버전의 React에서는 프로젝트에 종속성을 추가해야 했습니다. 아래에 제공된 명령을 사용하여 프로젝트에 종속성을 추가 해주시면 됩니다. $ npm install prop-types --save # or $ yarn add prop-types props에서 수신하는 모든 데이터의 유효성을 검사 하기 위해 propType 을 사용할 수 있습니다 . 그러나 사용하기 전에 가져와야 합니다. App.js 파일과 Blog_propType.js 을 추가 하고 하단 소스를 참고 해주세요. propTypes를 가져오면 작업할 준비가 됩니다. defaultProps와 마찬가지로 p..