Web/React (18) 썸네일형 리스트형 Life Cycle 변화 (v16.3) 출처 : https://medium.com/@baphemot/understanding-react-react-16-3-component-life-cycle-23129bc7a705 [ Deprecated ] componentWillMount -> UNSAFE_componentWillMount 컴포넌트가 화면에 나가기 직전에 호출 componentDidMount 로 대체 [ Deprecated ] componentWillreceiveProps -> UNSAFE_componentWillreceiveProps 컴포넌트가 새로운 props를 받게됐을때 호출 새로 받게될 props는 nextProps로 조회 할 수 있으며, 이 때 this.props를 조회하면 업데이트 되기 전이다 getDerivedStateFrom.. setState에 객체 대신 함수 전달하기 기존 작성 코드 this.setState({ number: this.state.number + 1 }); const { number } = this.state; this.setState({ number: number + 1 }); 함수 전달 코드 this.setState( ({ number }) => ({ number: number + 1 }) ); state 정의 1. class fields 문법 사용 (https://babeljs.io/docs/plugins/transform-class-properties/) class Counter extends Component { state = { number: 0 } } 2. class fields 사용하지 않을 때 class Counter extends Component { constructor(props) { super(props); this.state = { number: 0 } } } JSX 조건부 렌더링 1. 삼항연산자 class App extends Component { render() { return ( { 1 + 1 === 2 ? (맞아요!) : (틀려요!) } ); } } 2. AND 연산자 class App extends Component { render() { return ( { 1 + 1 === 2 && (맞아요!) } ); } } 3. IF문 또는 Switch문 - IIFE(즉시 실행 함수 표현) class App extends Component { render() { const value = 1; return ( { (function() { if (value === 1) return (하나); if (value === 2) return (둘); if (value === 3) return .. portals portals portals는 리액트 root 밖에 리액트를 넣을 수 있도록 해준다 iframe이나 html을 변경하지 못할 때 혹은 리액트 플러그인 내에서 렌더를 해야할 때 유용하다 리액트 루트 밖에서 렌더를 할때 사용할 수 있는 것이 portal이다 import React, { Component, Fragment } from 'react'; import { createPortal } from 'react-dom'; class Portals extends Component { render() { return createPortal(, document.getElementById("touchMe")); } } const Message = () => "Just touched it!"; class App ex.. Return Types Strings and Fragments Fragment 리액트가 여러 컴포넌트를 한번에 return을 못하기 때문에 div, span, [] 등으로 그룹핑을 하게되는데 이렇게 작업할 시 필요없는 코드가 많아지게 된다.이 때 Fragment를 사용할 수 있다 import React, { Component, Fragment } from 'react'; class ReturnTypes extends Component { render() { return ( ) } } class ReturnTypes extends Component { render() { return ( ) } } return strings return string도 가능하다 import React, { Component, Fragment } from 'react'; class Ret.. connect API connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]) connect는 react-redux의 내장 API 이다. 이 함수는 React Component를 Redux Store에 '연결' 해준다. 이 함수의 리턴값은 특정 컴포넌트 클래스의 props를 store의 데이터에 연결시켜주는 또 다른 함수를 리턴한다. 리턴된 함수에 컴포넌트를 인수로 넣어 실행하면, 기존 컴포넌트를 수정하는게 아니라 새로운 컴포넌트를 return 한다. 인수 : mapStateToProps(state, [ownProps]): (Function) store의 state를 컴포넌트의 props에 매핑 시켜준다. ownProps 인수가 명시될 경우, 이를 통.. Redux Redux 리액트를 위한 state management 툴 global state container store : React 프로젝트에서 사용하는 모든 동적 데이터들을 담아두는 곳 action : 어떤 변화가 일어나야 할 지 나타내는 객체 reducer : action 객체를 받았을 때 데이터를 어떻게 바꿀지, 어떻게 처리할지 정의하는 객체 의존 모듈 redux react-redux npm install --save redux react-redux 앱은 많은 컴포넌트를 기반으로 지어졌는데 또한 동시에 global state를 갖고 있다 유저의 로그인 여부를 global state의 예시로 들면 global state는 모든 컴포넌트가 영향을 받는다 유저가 로그인을 했느냐, 안했느냐에 따라 앱이 어떻게 보.. 이전 1 2 3 다음
