react state
-
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 Hooks : useReducer() 함수Study/React 2020. 1. 10. 11:42
상태를 업데이트 하는 방법 중 하나는 useState 함수를 사용해 앱 컴포넌트 내부에서 상태 관리를 하는 것이었다. 하지만 useReducer 함수를 사용하게 되면 컴포넌트와 상태 업데이트 로직을 분리하여, 컴포넌트 외부에서도 상태 관리를 할 수 있다. 즉, useState는 컴포넌트 내부에만 업데이트 로직을 작성해야했지만, useReducer 함수를 사용하면 컴포넌트 바깥에서도 작성할 수 있고, 다른 파일에 작성하여 불러와서 사용할 수도 있다. useReducer 함수 사용법 step1) 컴포넌트 외부에 상태 업데이트 로직을 담은 reducer 함수 작성 reducer 함수 : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 기본 형태 : function reducer(st..
-
React Hooks : useState() 함수Study/React 2020. 1. 4. 10:25
리액트 컴포넌트에서 동적인 값을 상태(state) 라고 부른다. 사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에는 상태를 관리하는 것이 필요하다. React Hooks 가 나오기 이전에는 상태값을 관리하기 위해 class 기반의 클래스 컴포넌트를 작성해야했다. 클래스 컴포넌트는 간단한 상태 관리 조차도 함수형 컴포넌트에 비해 복잡하여 유지 보수가 힘들었다. 하지만 리액트 16.8 버전부터 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 됐다. Hooks 중에 useState() 함수가 있는데, 이를 통해 함수형 컴포넌트에서도 상태를 관리할 수 있다. useState( ) 함수 사용법 Counter.js import React, { useState } from..