728x90 반응형 SMALL 2019/0310 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 - 상태(가변 상태 - state) 이전글: 2019/03/03 - [IT/React] - React - 상태 (기본) 리액트 애플리케이션을 개발하려면 데이터를 다루는 방법에 더 많은 시간을 집중해서 투자해야 한다. '상태' 란 무엇일까 - 특정 시점에 프로그램이 사용하고 있는 정보 - 다시 말해 상태는 어느 특정 시점에 프로그램에 대해 알고 있는 것(추가 대입이나 연산 없이 참조할 수 있는 모든 값)들의 스냅샷이다. 실행중인 프로그램이 어느 정도 복잡해지면 그 상태를 파악하기가 더 어려워진다. UI를 개발하는 데는 특히 더 어렵다.리액트는 데이터를 다루는 두가지 props와 state를 제공하여 UI가 가지는 복잡성을 줄이거나 그런 복잡성으로 부터 우리를 보호하는데 도움을 준다. 1. 가변 데이터 (컴포넌트 내에서 변경 가능한 데이터) .. 2019. 3. 13. React - JSX React.createElement 메서드를 통해 Element를 만드는 것이 중첩될 수록 코드를 읽기 쉽지 않았따.이제 컴포넌트를 생성하는 조금 더 쉬운 방법을 살펴보자. JSX란 사전에 미리 정의한 의미적으로 확장 없이, ECMAScript를 오로지 XML과 유사한 문법으로만 확장안 언어이다.JSX는 XML과 유사하며, XML을 오로지 코드 변환 도구로만 사용하는 자바스크립트의 확장 기능이라고 보면 된다. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788.. 2019. 3. 13. 이전 1 2 3 다음 728x90 반응형 LIST