ReactHooks (Custom Hooks) 자기가 커스텀한 hooks을 만들어 함수나 state의 추가 생성없이 간단하게 만들 수 있습니다. 자신만의 hooks를 만들어 이전에 react의 단점들을 가볍게 보완할 수 있을 것 같습니다. ex) datafetch, form input 태그 주의할 점 1. 커스텀 hook의 이름은 use를 꼭 붙여주자!!자동적으로 규칙이 맞는지 확인하지 못합니다. 특정 함수에 hook이 호출되는지 알 수 없습니다. 2. 각 input별로 같은 함수를 이용하지만 같은 state를 공유하는 것이 아닙니다. hook은 state적인 특성을 갖고있어서 공유하지 않습니다. 완전히 독립적입니다. 예제 코드 import React, { useState, useEffect } from..

React hooks(UseEffect) 사용하기 저번에는 useState를 사용하는 방법을 알아봤습니다. 이번에는 UseEffect를 사용해보겠습니다. 부족한 영어 실력으로 document를 읽어 보고 있는데 간단히 생각하면 ComponentDidMountComponentDidUpdateComponentWillUnMount가 작동할 때 함수들이 한번에 사용할 수 있게 만들어 준 것이 useEffect입니다. Dom이 업데이트되거나, state가 바뀐 뒤 useEffect가 실행됩니다. Hooks 규칙 1. 리액트 함수의 제일 상단에 작성해야합니다. - 조건문, 내부 함수, 반복문 안에 사용하지 않습니다. 2. 리액트 함수 안에서만 사용합니다. - custom 함수 안에서는 예외적으로 호출 할 수 있습니..

React hooks 사용해보기 react hooks는 리액트 16.8부터 새로생긴 기능이다. react에서 평소에 state를 관리해주기 위해 ComponentDidMount ComponentWillMount등과 같은 내장 함수를 사용했습니다. 그리고 이러한 내장함수와 state를 사용하기 위해서는 무조건 Class를 사용했어야 했습니다. 하지만 hooks부터는 클래스를 사용하지 않고도 함수 형태로 state를 관리할 수 있습니다. 그리고 ComponentDidMount나 ComponentWillMount 등을 사용하지 않고도요. 요약하자면 클래스 없이 함수의 형태로 state를 다루고 관리할 수 있다. 입니다. 그렇게 된다면 완전한 함수형 프로그래밍이 가능하게 될 것입니다. 그럼 간단한 사용기를 올려..

나름 최근의 자바스크립트 문법을 씁니다. 그래서 function이나 reuqire 같은 것은 볼 수 없습니다. 클래스 형태의 컴포넌트 외부로 부터 Component와 React를 받아오고 있습니다. Component를 상속하여 render나 componentDidMount등의 라이프 사이클을 사용할 수 있고 setState 등을 호출 할 수 있습니다. 함수형 컴포넌트 사용하기 단순하게 props로 데이터를 받아서 보여주기만 할때 굳이 클래스를 만들 필요 없이 함수로 컴포넌트를 만들 수 있습니다. 그래서 State나 라이프 사이클을 사용하지 않을 때 사용하면 좋습니다. 그리고 props를 받아올 때 비구조화 할당을 사용하면 더 쉽게 받아올 수 있습니다. 그리고 이를 App클래스에서 호출 시켜보면 아래와 같..

PropTypes 사용하기 우선 yarn을 통해서 설치부터 해보자!! yarn add prop-types 설치가 완료됐으면 props를 받아오는 컴포넌트를 만들자 예를 들어서 이렇게 받아오는 props 데이터가 있다. import PropTypes from 'prop-types'; 이런식으로 불러온 후 아래와 같이 등록해주면 propTypes가 설정 된 것을 알 수 있다. 이렇게 사용해주는 이유는 첫번째 다른 타입이 들어왔을 때 오류를 방지해줄 수 있다. 두번째는 다른 사람들이 props의 정보와 타입을 쉽게 알아 볼 수 있어서 가독성이 올라가기 때문에 사용합니다.

LifleCycle2 전시간에는 라이프 사이클에는 무엇이 있나 알아보았고 이번에는 실제로 코드로 활용해보겠다. 컴포넌트 처음생성 constructor(props) 이건 뷰를 만들 때 처음실행되는 코드인데 사용법은 constructor(props){ super(props); }props를 인자로 받아서 실행되며 상속하고 있는 Compoment에 super와 함께 props를 전달해준다. 밑에는 자기가 작성하고 싶은 코드를 마음대로 작성하면 된다. componentDidMount이건 컴포넌트가 만들어진 후에 호출되는 함수이다. 이함수는 주로 외부라이브러리랑 연결하거나 필요한 데이터를 요청하기 위해 ajax, DOM의 속성등을 읽는다. 당연하게 constructor뒤에 사용된다. componentDidMoun..