728x90 반응형 SMALL 리액트13 React - 폼 이벤트 핸들러, controlled component, uncontrolled component 아래 4가지를 기억하자. 1. 컴포넌트는 상태와 속성을 이용해 데이터를 다룬다.2. 컴포넌트는 자바스크립트 클래스이기 때문에 이벤트에 반응하기 위한 생명주기 메서드들은 물론 다른 작업을 처리하기 위한 사용자 정의 클래스 메서드를 선언할 수 있다.3. 보통의 DOM 요소와 마찬가지로 리액트 컴포넌트 내에서도 클릭이나 입력값 변경 등과 같은 이벤트를 리스닝할 수 있다. 4. 부모 컴포넌트는 자식 컴포넌트의 속성으로 콜백 메서드를 전달해서 컴포넌트 간의 통신을 지원할 수 있다. 예제코드를 살펴보자. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364.. 2019. 3. 28. React - 에러처리 최근 버전의 리액트는 오류 경계(error boundaries)라는 개념을 도입했다. 만일 컴포넌트의 생성자, render 메서드 혹은 생명주기 메서드 내에서 처리되지 않은 예외가 발생하면 리액트는 컴포넌트와 그 자식 컴포넌트들을 DOM으로 부터 언마운트 한다. 이 방법은 에러를 해당 컴포넌트 내에 격리함으로써 앱의 나머지 부분들이 계속 원활히 동작하도록 할 수 있다는 장점이 있다.React.Component 클래스로부터 파생된 컴포넌트의 경우 componentDidCatch 메서드로 처리할 수 있다.이 메서드는 try-catch 구문의 동작과 유사하다. 예제 소스를 통해 살펴 보자. 1234567891011121314151617181920212223242526272829303132333435363738.. 2019. 3. 27. React - 생명주기 메서드 견고한 컴포넌트를 개발하기 위해서는 컴포넌트 API 전반, 생명주기 메서드에 대한 더 깊은 이해, 그리고 리액트의 렌더링 과정에 대한 이해가 필요하다. 생명주기 메서드란? - 클래스 기반 리액트 컴포넌트에 추가된 특별한 메서드로 컴포넌트의 생명주기 내의 특정 시점에 실행된다. - 동작을 시작하는 시점, 동작 중인 시점, 완료되는 시점을 표현하게 된다. 렌더링이 어플리케이션을 화면에 그려내는 작업이다. 생명주기 메서드를 이용하면 이 과정을 가로챌 수 있다. 생명주기 메서드의 종류 - Will 메서드: 어떤 작업이 실행되기 직전에 호출된다. - Did 메서드: 어떤 작업이 실행된 직후에 호출된다. 컴포넌트는 크게 4가지로 생명주기를 분류할 수 있다. - 초기화: - 마운팅: 리액트가 컴포넌트를 DOM에 삽입.. 2019. 3. 27. React - 컴포넌트 간의 통신 리액트에서 한 컴포넌트가 다른 컴포넌트와 통신하기 위해서는 '속성' 을 전달해야 하며 속성을 전달할 때는 아래 두 가지 사항을 염두에 두어야 한다. 1) 상태나 속성에 대한 접근은 부모 컴포넌트에서 이루어진다.2) 필요한 데이터는 자식 컴포넌트에 전달한다. 부모 -> 자식 데이터 전달하는 예제 코드123456789101112131415161718192021222324252627282930import React from "react";import { render } from "react-dom";import PropTypes from "prop-types"; // simple 한 예제를 위해 상태가 없는 함수형 컴포넌트를 이용const UserProfile = props => { return ;};User.. 2019. 3. 15. 이전 1 2 3 4 다음 728x90 반응형 LIST
