Study
-
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..
-
Use a Variable Attribute in a ComponentStudy/React 2020. 5. 26. 16:40
Use a Variable Attribute in a Component redPanda로 이름된 이 JS객체를 살펴보자. const redPanda = { src: 'https://upload.wikimedia.org/wikipedia/commons/b/b2/Endangered_Red_Panda.jpg', alt: 'Red Panda', width: '200px }; 어떻게 리엑트 컴포넌트를 렌더하고, redPanda의 속성으로 사진이 보여지게 할 수 있을까? RedPanda.js를 살펴보자. 렌더 함수 내부에 있는 모든 {} JavaScript 주입을 주목해라! 라인 16, 17, 18은 모두 JS 주입을 사용한다. 당신은 렌더함수의 내부의 jsx에 JS를 주입할 수 있고 자주 그렇게 할 것이다. im..