분류 전체보기
-
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à..
-
The Render FunctionStudy/JavaScript 2020. 5. 26. 15:25
The Render Function A component class is like a factory that builds components. It builds these components by consulting a set of instructions, which you must provide. Let’s talk about these instructions! For starters, these instructions should take the form of a class declaration body. That means that they will be delimited by curly braces, like this: class ComponentFactory extends React.Compon..
-
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..
-
Name a Component ClassStudy/React 2020. 5. 26. 14:41
Name a Component Class Good! Subclassing React.Component is the way to declare a new component class. When you declare a new component class, you need to give that component class a name. On line 4, notice that our component class’s name is MyComponentClass. Component class variable names must begin with capital letters! This adheres to JavaScript’s class syntax. It also adheres to a broader pro..
-
Create a Component ClassStudy/React 2020. 5. 26. 14:31
Create a Component Class You’ve learned that a React component is a small, reusable chunk of code that is responsible for one job, which often involves rendering HTML. Here’s another fact about components: every component must come from a component class. A component class is like a factory that creates components. If you have a component class, then you can use that class to produce as many com..