728x90 반응형 SMALL IT/React14 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. React - 상태(불변 상태 - props) 2019/03/13 - [전체] - React - 상태(가변 상태 - state) 리액트에서 불변 데이터를 전달하기 위한 가장 기본적인 방법은 속성(props)을 이용하는 것이다. 리액트에서는 모든 컴포넌트가 속성을 수신할 수 있으며 constructor, render 메서드 및 생명주기 메서드들에서 활용할 수 있다. 속성은 리액트 컴포넌트에 전달되는 데이터다. 부모 컴포넌트가 전달할 수도 있고 컴포넌트 자체의 defaultProps 정적 메서드를 통해 전달할 수도 있다. 속성은 보통 부모 컴포넌트가 전달한다. 한 컴포넌트의 '상태'는 다른 컴포넌트의 '속성' 이 될 수 있다. 일단 속성을 컴포넌트에 전달하면, 그 컴포넌트 내에서 속성값을 절대로 변경해서는 안 된다. PropTypes와 defaultPr.. 2019. 3. 15. React - JSX React.createElement 메서드를 통해 Element를 만드는 것이 중첩될 수록 코드를 읽기 쉽지 않았따.이제 컴포넌트를 생성하는 조금 더 쉬운 방법을 살펴보자. JSX란 사전에 미리 정의한 의미적으로 확장 없이, ECMAScript를 오로지 XML과 유사한 문법으로만 확장안 언어이다.JSX는 XML과 유사하며, XML을 오로지 코드 변환 도구로만 사용하는 자바스크립트의 확장 기능이라고 보면 된다. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788.. 2019. 3. 13. 이전 1 2 3 4 다음 728x90 반응형 LIST