Study/React
-
React shouldComponentUpdate vs PureComponentStudy/React 2020. 1. 18. 10:49
shouldComponentUpdate - 컴포넌트가 업데이트 되는 시점에 호출되는 메서드 - 컴포넌트가 리렌더링 할지 말지를 결정하는 메서드 기본형태 shouldComponentUpdate(nextProps, nextState) { if(조건) { return true; } return false; }; - 리렌더링 할 조건을 작성한다 - true를 리턴하면 리렌더링하고, false를 리턴하면 리렌더링하지 않는다. 예시 import React, {Component} from 'react'; class Counter extends Component { state = { number: 0 }; shouldComponentUpdate(nextProps, nextState) { if(this.state.num..
-
React state 동적인 상태값Study/React 2020. 1. 14. 11:52
state 동적으로 바뀌는 값을 관리할 때 state 라는 것을 사용한다. props와 달리 state는 읽기 뿐만 아니라 값을 바꾸며 업데이트할 수 있다. state가 업데이트 될 때 마다 리렌더링된다. 참고로 렌더링해서 return 하는 코드에는 최대한 함수 로직을 넣지 않는다. 리렌더링 될 때 마다 함수를 새로 만드는 것은 낭비이기 때문이다. 클래스형 컴포넌트의 state - constructor 내부에서 this.state로 초기값을 설정해준다. - state는 반드시 객체 형태이어야 한다. - render 메서드에서 state를 조회하려면 this.state를 조회하면 된다. - this.setState 함수로 state 를 업데이트 할 수 있다. - state내부에 또 다른 객체 값이 있다면,..
-
React 클래스형 컴포넌트 & 이벤트핸들링과 thisStudy/React 2020. 1. 13. 11:50
리액트에서 컴포넌트를 선언하는 방식은 두 가지가 있다. Functional component 첫 번째로 함수형 컴포넌트가 있다. - 함수형 컴포넌트는 return을 통해 렌더링하고 싶은 JSX를 반환해준다. - 인자에 props를 넣어서 받아온다. - defaultProps 는 함수 바깥에 선언해준다. Hello.js import React from 'react'; function Hello({ color, name }) { return ( 안녕하세요 {name} ); } Hello.defaultProps = { name: '이름없음' }; export default Hello; Class component 두 번째로 클래스형 컴포넌트가 있다. - render() 메소드를 사용해야한다. 이를 통해 렌더링..
-
Immer 라이브러리로 쉽게 React state 불변성 지키기Study/React 2020. 1. 12. 11:37
기존에 Immer 라이브러리를 사용하지 않고 불변성을 지켜주기 위해서는 spread 연산자를 통해 기존 객체를 복사하거나, 내장 함수를 사용하여 불변성을 지켜 업데이트를 해줬다. 하지만 데이터 구조가 복잡해질수록 위와 같은 방법을 사용하면 코드가 복잡해질 것이다. 그러나 Immer 라이브러리를 사용하면 쉽게 불변성을 지켜줄 수 있다. Immer를 사용하면 상태를 업데이트 할 때 불변성을 신경 쓰지 않아도 Immer가 알아서 불변성을 관리해준다. 즉, 배열의 원본을 바꾸는 push, splice 등의 메소드도 사용할 수 있다는 것이다. Immer 라이브러리는 데이터의 구조가 복잡해서 불변성을 유지하며 업데이트 할 코드가 복잡해 질 때 사용하는게 좋다. Immer 사용법 import produce from ..
-
React Hooks : useContext() & Context API : createContext()Study/React 2020. 1. 11. 10:49
리액트로 개발을 하다보면 특정 함수나 값을 원하는 컴포넌트에게 전달하기 위해서, 여러 개의 컴포넌트를 거치고 거쳐서 전달해야하는 경우가 많다. 컴포넌트 1,2개 정도는 중간 다리 역할로 괜찮지만 그 이상 넘어가버리면 굉장히 복잡할 것이다. 이러한 경우를 방지하기 위해서는 Context API 를 사용해야한다. React Context API 를 사용하면 컴포넌트 상관없이 전역적으로 특정 값을 사용할 수 있다. Context API 사용법 - createContext : context 생성 - useContext : context 조회 step1) createContext, useContext Hooks를 불러온다. import React, { createContext, useContext } from '..