Ease of Testing:<\/strong> Since each component operates independently, testing them individually is also convenient.<\/li>\n<\/ul>\n2. Types of Components<\/h2>\n
In React, components can mainly be divided into two types: class components and functional components.<\/p>\n
2.1 Class Components<\/h3>\n
Class components are defined using the ES6 class syntax. They can have state and use lifecycle methods to control the component’s lifecycle.<\/p>\n
import React, { Component } from 'react';\n\nclass MyClassComponent extends Component {\n constructor(props) {\n super(props);\n this.state = {\n count: 0\n };\n }\n\n increment = () => {\n this.setState({ count: this.state.count + 1 });\n }\n\n render() {\n return (\n <div>\n <p>Count: {this.state.count}<\/p>\n <button onClick={this.increment}>Increment<\/button>\n <\/div>\n );\n }\n}\n\nexport default MyClassComponent;<\/code><\/pre>\n2.2 Functional Components<\/h3>\n
Functional components are defined as simple JavaScript functions. After the introduction of React Hooks, functional components can also manage state.<\/p>\n
import React, { useState } from 'react';\n\nconst MyFunctionalComponent = () => {\n const [count, setCount] = useState(0);\n\n const increment = () => {\n setCount(count + 1);\n };\n\n return (\n <div>\n <p>Count: {count}<\/p>\n <button onClick={increment}>Increment<\/button>\n <\/div>\n );\n};\n\nexport default MyFunctionalComponent;<\/code><\/pre>\n3. Creating a Component<\/h2>\n
Creating a React component is not a difficult process. Below, we will look at the process of making components through basic examples of class and functional components.<\/p>\n
3.1 Creating a Class Component<\/h3>\n
We will create a counter component named ‘Counter’.<\/p>\n
import React, { Component } from 'react';\n\nclass Counter extends Component {\n constructor(props) {\n super(props);\n this.state = {\n count: 0\n };\n }\n\n increment = () => {\n this.setState({ count: this.state.count + 1 });\n }\n\n decrement = () => {\n this.setState({ count: this.state.count - 1 });\n }\n\n render() {\n return (\n <div>\n <p>Count: {this.state.count}<\/p>\n <button onClick={this.increment}>Increment<\/button>\n <button onClick={this.decrement}>Decrement<\/button>\n <\/div>\n );\n }\n}\n\nexport default Counter;<\/code><\/pre>\n3.2 Creating a Functional Component<\/h3>\n
Below is a functional component named ‘Counter’ that has the same functionality.<\/p>\n
import React, { useState } from 'react';\n\nconst Counter = () => {\n const [count, setCount] = useState(0);\n\n const increment = () => {\n setCount(count + 1);\n };\n\n const decrement = () => {\n setCount(count - 1);\n };\n\n return (\n <div>\n <p>Count: {count}<\/p>\n <button onClick={increment}>Increment<\/button>\n <button onClick={decrement}>Decrement<\/button>\n <\/div>\n );\n};\n\nexport default Counter;<\/code><\/pre>\n4. Props and State<\/h2>\n
Components may appear similar, but each component shows significant differences in how it handles data. In this section, we will explain props and state in detail.<\/p>\n
4.1 Props<\/h3>\n
Props are the means by which a parent component passes data to a child component. Props are read-only, so they cannot be directly modified within the component. The rendering result of the component changes based on the data passed from the parent component.<\/p>\n
const Welcome = (props) => {\n return <h1>Hello, {props.name}<\/h1>;\n};\n\nconst App = () => {\n return (\n <div>\n <Welcome name=\"Alice\" \/>\n <Welcome name=\"Bob\" \/>\n <\/div>\n );\n};<\/code><\/pre>\n4.2 State<\/h3>\n
State is the data managed within the component, representing dynamic data such as user input or the result of an API call. When the state is updated, React re-renders the component to update the UI.<\/p>\n
import React, { useState } from 'react';\n\nconst Toggle = () => {\n const [isOn, setIsOn] = useState(false);\n\n const toggleSwitch = () => {\n setIsOn(!isOn);\n };\n\n return (\n <div>\n <p>Switch is {isOn ? 'On' : 'Off'}<\/p>\n <button onClick={toggleSwitch}>Toggle<\/button>\n <\/div>\n );\n};<\/code><\/pre>\n5. Component Lifecycle<\/h2>\n
The lifecycle of a React component can be divided into three main stages: mounting, updating, and unmounting. There are specific lifecycle methods called at each stage.<\/p>\n
5.1 Mounting<\/h3>\n
This is the method called when a component is added to the DOM. Prominent examples include constructor<\/code> and componentDidMount<\/code>.<\/p>\nclass MyComponent extends Component {\n constructor(props) {\n super(props);\n this.state = { data: null };\n }\n\n componentDidMount() {\n \/\/ Initial tasks like API calls\n }\n\n render() {\n return <div>My Component<\/div>;\n }\n}<\/code><\/pre>\n5.2 Updating<\/h3>\n
This is the method called when the component’s props or state change. componentDidUpdate<\/code> is a key example.<\/p>\ncomponentDidUpdate(prevProps, prevState) {\n if (this.state.data !== prevState.data) {\n \/\/ Handle data change\n }\n}<\/code><\/pre>\n5.3 Unmounting<\/h3>\n
This is the componentWillUnmount<\/code> method called when a component is removed from the DOM. It is primarily used to perform cleanup tasks.<\/p>\ncomponentWillUnmount() {\n \/\/ Cleanup like clearing timers\n}<\/code><\/pre>\n6. Advanced Component Patterns<\/h2>\n
In React, advanced component patterns can simplify the structure of complex UIs. Here are some advanced component patterns.<\/p>\n
6.1 Higher-Order Components (HOC)<\/h3>\n
A HOC is a component that takes a component as an argument and returns a new component. This helps reduce code duplication and increases reusability.<\/p>\n
const withLogging = (WrappedComponent) => {\n return class extends Component {\n componentDidMount() {\n console.log('Component mounted');\n }\n\n render() {\n return <WrappedComponent {...this.props} \/>;\n }\n };\n};<\/code><\/pre>\n6.2 Render Props<\/h3>\n
The Render Props pattern is a pattern in which a component passes a function as a prop to determine what to render. This helps separate data-processing logic from the UI.<\/p>\n
class DataProvider extends Component {\n render() {\n return this.props.render(data);\n }\n}\n<\/code><\/pre>\n7. Conclusion<\/h2>\n
React components are a core component of modern web development, providing a powerful tool that facilitates reusability and maintainability. In this course, we learned the basic concepts of components, various types, how to create them, and advanced patterns. With this knowledge, we hope your React applications can advance even further.<\/p>\n
If you would like more information about React components, please refer to the official documentation. Thank you!<\/p>\n","protected":false},"excerpt":{"rendered":"
React is one of the most popular JavaScript libraries used to build modern user interfaces. React is designed to create reusable UI components, which is very useful for managing and maintaining complex structures in large applications. In this article, we will provide a deep understanding of React components by detailing the concept of components, types, … \ub354 \ubcf4\uae30 “React Course: Component”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[123],"tags":[],"class_list":["post-32947","post","type-post","status-publish","format-standard","hentry","category-react-basics-course"],"yoast_head":"\nReact Course: Component - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/atmokpo.com\/w\/32947\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Course: Component - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"React is one of the most popular JavaScript libraries used to build modern user interfaces. React is designed to create reusable UI components, which is very useful for managing and maintaining complex structures in large applications. In this article, we will provide a deep understanding of React components by detailing the concept of components, types, … \ub354 \ubcf4\uae30 "React Course: Component"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/32947\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:12:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:21:21+00:00\" \/>\n<meta name=\"author\" content=\"root\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:site\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:label1\" content=\"\uae00\uc4f4\uc774\" \/>\n\t<meta name=\"twitter:data1\" content=\"root\" \/>\n\t<meta name=\"twitter:label2\" content=\"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04\" \/>\n\t<meta name=\"twitter:data2\" content=\"5\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/32947\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32947\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"React Course: Component\",\"datePublished\":\"2024-11-01T09:12:40+00:00\",\"dateModified\":\"2024-11-01T11:21:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32947\/\"},\"wordCount\":623,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"React basics course\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/32947\/\",\"url\":\"https:\/\/atmokpo.com\/w\/32947\/\",\"name\":\"React Course: Component - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:12:40+00:00\",\"dateModified\":\"2024-11-01T11:21:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32947\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/32947\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/32947\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Course: Component\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/atmokpo.com\/w\/#website\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/atmokpo.com\/w\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"contentUrl\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"width\":400,\"height\":400,\"caption\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\"},\"image\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/bebubo4\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\",\"name\":\"root\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"caption\":\"root\"},\"sameAs\":[\"http:\/\/atmokpo.com\/w\"],\"url\":\"https:\/\/atmokpo.com\/w\/author\/root\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Course: Component - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/atmokpo.com\/w\/32947\/","og_locale":"ko_KR","og_type":"article","og_title":"React Course: Component - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"React is one of the most popular JavaScript libraries used to build modern user interfaces. React is designed to create reusable UI components, which is very useful for managing and maintaining complex structures in large applications. In this article, we will provide a deep understanding of React components by detailing the concept of components, types, … \ub354 \ubcf4\uae30 \"React Course: Component\"","og_url":"https:\/\/atmokpo.com\/w\/32947\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:12:40+00:00","article_modified_time":"2024-11-01T11:21:21+00:00","author":"root","twitter_card":"summary_large_image","twitter_creator":"@bebubo4","twitter_site":"@bebubo4","twitter_misc":{"\uae00\uc4f4\uc774":"root","\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04":"5\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/32947\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/32947\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"React Course: Component","datePublished":"2024-11-01T09:12:40+00:00","dateModified":"2024-11-01T11:21:21+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/32947\/"},"wordCount":623,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["React basics course"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/32947\/","url":"https:\/\/atmokpo.com\/w\/32947\/","name":"React Course: Component - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:12:40+00:00","dateModified":"2024-11-01T11:21:21+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/32947\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/32947\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/32947\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"React Course: Component"}]},{"@type":"WebSite","@id":"https:\/\/atmokpo.com\/w\/#website","url":"https:\/\/atmokpo.com\/w\/","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","description":"","publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/atmokpo.com\/w\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/atmokpo.com\/w\/#organization","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","url":"https:\/\/atmokpo.com\/w\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/","url":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","contentUrl":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","width":400,"height":400,"caption":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8"},"image":{"@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/bebubo4"]},{"@type":"Person","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7","name":"root","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","caption":"root"},"sameAs":["http:\/\/atmokpo.com\/w"],"url":"https:\/\/atmokpo.com\/w\/author\/root\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32947","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/comments?post=32947"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32947\/revisions"}],"predecessor-version":[{"id":32948,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32947\/revisions\/32948"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=32947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=32947"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=32947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}