While developing with React, a framework for Single Page Applications (SPA), I had a question. React detects changes on a single page and updates the Virtual DOM, rendering only the parts that have changed. So I wondered, "Are all pages the same since there’s no URI distinction?"

1. What is State? In React, state is a way to manage data that can change over time, and it is specific to each component. Unlike props (which are immutable and passed down from parent to child), state allows a component to maintain and update its own data. While props

Props In React, the flow of data is unidirectional: it flows from the parent (higher-level) component to the child (lower-level) component. In this flow, data passed from the parent to the child is conveyed through an object called props, which is short for "properties." Figure 1 shows an

A ReactElement is an implementation of the concept called the Virtual DOM (VDOM). The VDOM is a JavaScript object that exists in memory and can be created using the React.createElement function. The elements created by this function are just regular JavaScript objects. To simplify it, the following code example

1. Environment Setup 1-1. JAVA: 1.7 1-2. Eclipse: Kepler - Install Eclipse EGit Plugin The EGit plugin integrates Git with Eclipse. There are two ways to install the EGit plugin in Eclipse: the first method is using Eclipse Marketplace, and the other method is using Install New Software. [Method

In the previous post, we explored the concept of OAuth 2 and the considerations for its implementation. In this post, we will discuss how to extend OAuth 2 to configure a Single Sign-On (SSO) environment, and how to build an SSO environment using Spring Boot and Spring Security OAuth. 1.

In some companies, multiple systems are operated, and separate accounts are managed for each system. Users who use these systems need to remember the accounts for all the systems they access and must log in separately to each system, which can be inconvenient. Additionally, administrators who manage these systems face

This article covers how to align sentences, paragraphs, and boxes containing paragraphs in a visually pleasing way using HTML and CSS. We will look at two methods for centering alignment on the horizontal and vertical axes. Method 1. display: table // display: table-cell // vertical-align: middle Before diving into vertical alignment, let&

React is an open-source JavaScript library used for creating user interfaces. There are various React-based UI libraries that help in building beautiful user interfaces. Some of the most popular ones include Material-UI, Semantic-UI-React, Ant-Design, React-Bootstrap, and Grommet, which I’ll briefly introduce here. 1. Material-UI https://material-ui.com/?ref=designrevision.

1. React Component Element Rendering class CorrectComponent extends React.Component { // React Component is rendering only a single element. render() { return ( <h4> Hello React </h4> ) } } class WrongComponent extends React.Component { // React Component is not rendering more than one element. render() { return ( <h4> Hello </h4&

What is Unit Testing? Unit testing refers to testing an application by separating it into the smallest possible units and testing them individually. Through unit tests performed on the smallest units (such as functions or methods), you can predict and fix incorrect behaviors and unexpected bugs in the program. When

There are two types of components in React. 1. Class Component – This is the method of creating a component using a class. It is the default way of building components in React. The reason why Class Components are commonly used is because they allow access to state and lifecycle methods,

Through this post, we will briefly look at the concept of React's Context and its usage, and then create a simple component using Context in practice. 1. What is Context? When I first started developing with React, I encountered some discomfort when passing data between components. This was

Conditional Rendering React components render content based on their state, and by combining multiple React components, you can create complex UIs. To create such complex UIs, React components need to be able to use logic, and depending on this logic, UI elements will be displayed on the screen. Before diving

In React, the way events are handled differs slightly from how they are handled in HTML. 1. How to Use Events * In HTML, when defining events, all event names are written in lowercase. In React, events are defined using camelCase. DOM events provided by React (refer to the "Event