도찐개찐

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..

Props / State props 와 state는 React에서 데이터를 사용할 때 다루는 개념이다. 실습 코드샌드박스(https://codesandbox.io/s/dank-pond-pfyvq) 를 사용하여 실습 Props props는 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 것이다. 읽기 전용 src 폴더 구조 CodeSandBox에서 리액트를 실행 시키면 MyName.js를 제외한 파일은 기본적으로 생성이 된다. MyName.js는 props 예제를 위해 만든 파일 App.js import React, { Component } from "react"; import "./styles.css"; import Name from "./Name.js"; class App extends Com..

1. Pagination 전용 앱 생성 # 앱설치 $ yarn create react-app pagination # 설치 된 어플리케이션 경로 이동 $ cd pagination # 필요 컴포넌트 설치 $ yarn add react-icons prop-types react-icons : react에서 자체 배포하고 있는 아이콘 콤포넌트로 버튼 아이콘 사용에 활용하기 위해 설치 합니다. 아이콘 사용이 불필요하신 분들 께서는 설치 하지 않으셔도 됩니다. prop-types : props 전달에 자료형을 체크 하기 위해 설치 하였으나 자료형 체크가 불필요하신 분들께서는 설치 하지 않으셔도 됩니다. 2. 작업 파일 및 import 파일 구조 아래 구초 내용을 확인 하셔서 미생성 구조만 생성해 주시면 됩니다. . ..