React
-
propTypesReact 2021. 12. 7. 01:07
이 글은 React의 PropTypes라이브러리 사용에 관한 내용을 정리하기 위해 작성하였습니다. propTypes are a mechanism to ensure that components use the right type of props, and receive the right type of props. 1. prop validation : ensure that your props are doing what they're supposed to be doing. 2. documenting props : makes it easier to glance at a file and quickly understand..
-
StyleReact 2021. 12. 6. 23:57
이 글은 React에서의 스타일 적용(CSS사용)에 대한 개념을 정리하기 위해 작성하였습니다. There are many different ways to use styles in React. An inline style is a style that’s written as an attribute. Example) Hello world : Notice the double curly braces. The outer curly braces inject JavaScript into JSX. The inner curly braces create a JavaScript object literal. To use styles in..
-
The Effect HookReact 2021. 12. 6. 18:17
이 글은 React의 Effect Hook에 관한 개념을 정리하기 위해 작성하였습니다. A function is said to have a Side Effect if its implementation inside a function affects outside the function. In earlier versions of React, we could only have executed this type of code in the lifecycle methods of class components < We use the Effect Hook to run some JavaScript's Side Effect code after each render, such as ..
-
The State HookReact 2021. 12. 6. 01:27
이 글은 React의 State Hook에 관한 개념을 정리하기 위해 작성하였습니다. With Hooks, we can use simple function components to do lots of the fancy things that we could only do with class components in the past. Hooks don’t work inside classes — they let us use fancy React features without classes. In Class components, They : 1. are difficult to reuse between components 2. are tri..
-
Function ComponentsReact 2021. 12. 5. 22:41
이 글은 React의 2가지 컴포넌트 중 함수 컴포넌트에 대한 개념을 정리하기 위해 작성하였습니다. In the latest versions of React, function components can do everything that class components can do. In most cases, however, function components offer a more elegant, concise way of creating React components. Example) // A class component class: export class MyComponentClass extends React.Component { render() { ret..
-
Component LifecycleReact 2021. 12. 2. 23:15
이 글은 React Component의 Lifecycle에 관한 개념 및 메소드를 정리하기 위해 작성하였습니다. We’ve seen that React components can be highly dynamic. They get created, rendered, added to the DOM, updated, and removed. All of these steps are part of a component’s lifecycle. Each component instance has its own lifecycle. The component lifecycle has three high-level parts : 1. Mounting, when the compo..
-
React PatternReact 2021. 11. 30. 23:36
이 글은 React를 이용한 개발 중 가장 많이 사용되는 패턴을 정리하기 위해 작성하였습니다. A stateful, parent component passes down its state to a stateless, child component. 1. Build a stateful Component Class 2. Build a stateless Component Class 3. Pass a Component's state Example) import React from 'react'; import ReactDOM from 'react-dom'; import { Child } from './Child'; class Parent extends React.Compone..
-
React Useful ToolsReact 2021. 11. 24. 22:00
1. React Developer Tools https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 2f8f60ca8 on 10/31/2021. chrome.google.com +. In this resource, you will learn how to use the basic features of React DevTools by experimenting in an online sandbox e..