Study/React
-
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..
-
Use Multiline JSX in a ComponentStudy/React 2020. 5. 26. 16:29
Use Multiline JSX in a Component 이 레슨에서는, 당신은 JSX와 리엑트 컴포넌트를 함께 동작하는 몇가지 일반적인 방법에 대해 배울 것이다. 당신은 새로운 트릭들을 취하면서 JSX와 컴포넌트들을 다루며 더 편안함을 가질 것이다. HTML, 코드를 보아라. The world is full of objects, more or less interesting; I do not wish to add any more. Douglas Huebler 어떻게 이 HTML을 렌더하는 리엑트 컴포넌트를 만들 수 있을까? QuoteMaker.js를 선택해라. QuoteMaker에서 주목할 중요한 것은 line 6과 18에, return문의 ()이다. 지금까지, 당신의 렌더 함수 return문은 아무 ..
-
Render A ComponentStudy/React 2020. 5. 26. 16:11
Render A Component 컴포넌트 클래스에 컴포넌트 작성 방법을 알려주는 일련의 지시사항이 필요하다는 것을 알게 되었다. 새 구성요소 클래스를 만들 때, 이러한 지시사항들은 당신의 클래스 선언의 body 이다. class MyComponentClass extends React.Component { // everything in between these curly-braces is instructions for how to build components render() { return Hello world; } } 이것은 클래스 선언이 MyComponentClass 라는 이름의 새로운 컴포넌트 클래스를 만들어 낸것이다. MyComponentClass은 render라고 이름된 한개의 method를 ..
-
Create a Component InstanceStudy/React 2020. 5. 26. 15:52
Create a Component Instance MyComponentClass is now a working component class! It’s ready to follow its instructions and make some React components. So, let’s make a React component! It only takes one more line: To make a React component, you write a JSX element. Instead of naming your JSX element something like h1 or div like you’ve done before, give it the same name as a component class. Voilà..
-
Component Class InstructionsStudy/React 2020. 5. 26. 15:04
Component Class Instructions Let’s review what you’ve learned so far! Find each of these points in app.js: On line 1, import React from 'react' creates a JavaScript object. This object contains properties that are needed to make React work, such as React.createElement() and React.Component. On line 2, import ReactDOM from 'react-dom' creates another JavaScript object. This object contains method..