Study/React
-
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는 전달된 정보를 저장하는 객체의 이름이..
-
Render a Component's propsStudy/React 2020. 5. 27. 10:38
Render a Component's props 당신은 컴포넌트의 props 객체에 정보를 전달했다! 당신은 당신이 전달하는 정보를 화면에 보이기위해 컴포넌트를 종종 원할 것이다. 여기 전달된 정보를 보이게 하는 컴포넌트를 만드는 방법이 있다. 1- 정보를 받으려는 컴포넌트 클래스를 찾는다. 2 - return문의 렌더 메소드의 컴포넌트 클래스안에 this.props.name-of-information을 포함한다. import React from 'react'; import ReactDOM from 'react-dom'; class Greeting extends React.Component { render() { return Hi there, {this.props.firstName}!; } } React..
-
Pass `props` to a ComponentStudy/React 2020. 5. 27. 10:30
Pass `props` to a Component 당신은 리엑트 컴포넌트에 정보를 전달할 수 있다. 어떻게? 컴포넌트에 attribute(특성)을 줌으로써. 컴포넌트에 "This is some top secret info."라는 메시지를 전달하고 싶다고 가정해 봅시다. 이 작업을 수행할 수 있는 방법은 다음과 같다. 당신이 볼 수 있는 것 처럼, 정보를 컴포넌트에 전달하기 위해, 당신은 당신이 전달하기 원하는 정보를 위해 이름이 필요하다. 위 예시에서, 우리는 message이름을 사용했다. 당신은 당신이 원하는 어떤 이름이든 사용할 수 있다. 만약 당신이 string이 아닌 정보를 전달하기를 원한다면, {}안에 정보를 감쌀 수 있다. 어떻게 배열을 전달하는지 보자. 다음 예시에서, 우리는 에 몇가지 정보..
-
this.propsStudy/React 2020. 5. 27. 10:18
this.props 이전에, 당신은 컴포넌트들이 interact할 수 있는 한가지 방법을 배웠다. : 컴포넌트는 또 다른 컴포넌트를 렌더할 수 있다. 이 레슨에서, 당신은 컴포넌트가 interact할 수 있는 또 다른 방법에 대해 배울것이다 : 컴포넌트는 또다른 컴포넌트에 정보를 전달 할 수 있다. 한 컴포넌트에서 다른 것으로 전달되는 정보는 "props"로 알려진다. Access a Component's props 모든 컴포넌트는 props라 불리는 무언가를 가지고있다. 컴포넌트의 props는 객체이다. 컴포넌트의 props객체를 보기 위해, 당신은 this.props표현식을 사용할 수 있다. 여기 render method안에 사용되는 this.props의 예시를 보자. render() { consol..
-
Use an Event Listener in a ComponentStudy/React 2020. 5. 26. 19:09
Use an Event Listener in a Component 렌더함수는 종종 이벤트리스너를 포함한다. 여기 렌더함수의 이벤트리스너의 예시이다. render() { return ( ); } event handler는 이벤트에 대한 응답으로 호출되는 함수임을 기억해라. 위의 예시에서 event handler는 myFunc()이다. 리엑트에서, 당신은 event handler를 컴포넌트 클래스에 method로써 정의할 수있다. 이렇게 말이다: class MyClass extends React.Component { myFunc() { alert('Stop it. Stop hovering.'); } render() { return ( ); } } 컴포넌트 클래스가 두개의 메소드를 가지는 것을 주목해라: .m..