분류 전체보기
-
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..
-
Use this in a ComponentStudy/React 2020. 5. 26. 19:01
Use this in a Component this 단어는 리엑트에서 많이 사용된다! 당신은 특히 컴포넌트 클래스 선언의 body 내부에서 this를 아마도 보았을 것이다. 예를 들어보자. class IceCreamGuy extends React.Component { get food() { return 'ice cream'; } render() { return I like {this.food}.; } } 코드에서, this는 무엇을 의미할까? 한번 예측해보고, 답을 보기 위해 스크롤을 내려보자. 간단한 답은 this는 IceCreamGuy의 인스턴스를 가리킨다는 것이다. 덜 간단한 대답은 this는 this의 감싸진 method (이 경우엔 .render())가 호출되는 객체를 가리킨다. 이 객체가 Ic..
-
Use a Conditional in a Render FunctionStudy/React 2020. 5. 26. 18:12
Use a Conditional in a Render Function 어떻게 당신은 render()함수 안에 조건문을 사용할 수 있을까? TodaysPlan.js 를 선택해보자. 렌더함수의 내부에 위치했지만 return 구문 전에 있는 if문을 보자. 이것은 렌더 함수에 사용되는 if 문을 볼 수 있는 거의 유일한 방법이다. import React from 'react'; import ReactDOM from 'react-dom'; const fiftyFifty = Math.random() < 0.5; // New component class starts here: class TonightsPlan extends React.Component { render() { if (fiftyFifty) { retu..
-
Put Logic in a Render FunctionStudy/React 2020. 5. 26. 17:29
Put Logic in a Render Function 렌더함수에 로직 놓기. render()함수는 만드시 return문을 가져야한다. 하지만, 그것이 가질 수 있는 전부는 아니다. render함수는 또한 컴포넌트가 렌더하기 바로 직전에 일어나야하는 간단한 계산식을 놓기에 좋은 자리가 될 수 있다. 여기 render 함수 내부에 있는 계산식의 예시이다. class Random extends React.Component { render() { // First, some logic that must happen // before rendering: const n = Math.floor(Math.random() * 10 + 1); // Next, a return statement // using that lo..