Study
-
defaultPropsStudy/React 2020. 5. 27. 13:36
defaultProps 컴포넌트 클래스 Button을 살펴보아라. import React from 'react'; import ReactDOM from 'react-dom'; class Button extends React.Component { render() { return ( {this.props.text} ); } } // defaultProps goes here: ReactDOM.render( , document.getElementById('app') ); 8번째 줄에서, Button은 text로 이름된 prop을 받을 것이라 예상한다. 받은 text는 엘레먼트의 내부에 보여질 것이다. 만약 아무도 Button에 text를 전달하지 않는다면? 만약 아무도 Button에 text를 전달하지 않는다면..
-
this.props.childrenStudy/React 2020. 5. 27. 13:25
this.props.children 모든 컴포넌트의 props 객체는 children이라고 이름된 property를 가진다. this.props.children은 컴포넌트의 오프닝과 JSX태그들 클로징 사이에서 모든것을 리턴할 것이다. 지금까지, 같이 당신이 봐온 모든 컴포넌트들은 self-closing tag들이었다. 그들은 그럴필요는 없다! 당신은 라고 적을수도 있고, 이것은 여전히 동작할 것이다. this.props.children은 사이에서 모든것들을 리턴할것이다. BigButton.js를 보자. Example1에서 의 this.props.children은 “I am a child of BigButton.” 텍스트와 같다. Example2에서 의 this.props.children은 컴포넌트와 같..
-
handleEvent, onEvent, and this.props.onEventStudy/React 2020. 5. 27. 13:09
handleEvent, onEvent, and this.props.onEvent 네이밍에 대해 이야기 나눠보자. 당신이 막 만든 event handler 를 prop로써 전달할 때, 당신이 선택해야할 두 name이 있다. 두 가지 네이밍 선택은 모두 부모 구성 요소 클래스, 즉 이벤트 핸들러를 정의하고 이를 전달하는 컴포넌트 클래스에서 이루어진다. 당신이 선택해야하는 첫번째 이름은 이벤트 핸들러 고유의 이름이다. Talk.js 6~ 12번째 줄을 보아라. import React from 'react'; import ReactDOM from 'react-dom'; import { Button } from './Button'; class Talker extends React.Component { talk()..
-
Pass an Event Handler as a propStudy/React 2020. 5. 27. 12:15
Pass an Event Handler as a prop 당신은 Talker 컴포넌트 클래스에 새로운 메소드를 선언했다. 이제 당신은 또 다른 컴포넌트에 함수를 전달할 준비가 되었다. 당신이 다른 어떤 정보에 전달하는 것과 정확하게 같은 방법으로 method를 전달할 수 있다. import React from 'react'; import ReactDOM from 'react-dom'; import { Button } from './Button'; class Talker extends React.Component { talk() { let speech = ''; for (let i = 0; i < 10000; i++) { speech += 'blah '; } alert(speech); } render() ..
-
Put an Event Handler in a Component ClassStudy/React 2020. 5. 27. 12:09
Put an Event Handler in a Component Class 당신은 props로써 함수를 전달 할 수 있고, 자주 그렇게 할 것이다. event handler 함수를 전달하는 것은 특히 일반적이다. 다음 레슨에서, 당신은 prop로써 event handler 함수를 전달할 것이다. 그러나 당신은 이벤트핸들러를 전달하기 이전에 먼저 event handler를 선언해야한다. 이번 레슨에서 이벤트 핸들러 함수를 선언할 것이다. 어떻게 리엑트에서 event handler를 선언할 수 있을까? 당신은 단지 render method같은 컴포넌트 클래스에 method로써 이벤트핸들러를 정의한다. 당신이 리엑트에서 선언한 거의 모든 함수들은 class 안에 method들로써 이같은 방법으로 선언된다. 코..
-
Render Different UI Based on propsStudy/React 2020. 5. 27. 11:37
Render Different UI Based on props 당신은 props를 display하는 것보다 props로 더 많은 일들을 할 수있다. 당신은 결정을 하기위해 props를 사용할수도 있다. 코드 에디터에서, Welcome 컴포넌트 클래스rent UI Based on props 당신은 props를 display하는 것보다 props로 더 많은 일들을 할 수있다. 당신은 결정을 하기위해 props를 사용할수도 있다. 코드 에디터에서, Welcome 컴포넌트 클래스를 보자. import React from 'react'; export class Welcome extends React.Component { render() { if (this.props.name == 'Wolfgang Amadeus ..
-
Pass props From Component To ComponentStudy/React 2020. 5. 27. 10:52
Pass props From Component To Component 당신은 컴포넌트에 prop을 전달하는 방법을 배웠다. 당신은 prop에 전달된 것에 접근하고 화면에 보이는 법을 배웠다. render() { return {this.props.firstName}; } props의 대부분의 일반적인 사용은 다른 컴포넌트로부터 가져온 정보를 컴포넌트에 전달하는 것이다. 당신은 아직 못해봤을 수 있지만, 이것은 당신이 이미 보았던것과 매우 비슷하다. 이번과제에서, 우리는 한 컴포넌트에서 다른 컴포넌트에 prop을 전달해보자. 문법에 대한 모호한 설명: 당신은 prop과 props단어의 약간 루즈한 사용을 알아차렸을지 모른다. 불행하게도 이것은 꽤 불가피하다. props는 전달된 정보를 저장하는 객체의 이름이..