이번에는 React의 State와 Props의 관계, 그리고 컴포넌트가 언제 리렌더링되는지 알아보겠습니다.특히 서로 관련 없어 보이는 Bulb와 Counter 컴포넌트가 왜 함께 리렌더링되는지 확인하고, 컴포넌트를 분리하는 이유도 함께 살펴보겠습니다.1. State를 Props로 전달하기React에서는 부모 컴포넌트가 관리하는 State를 자식 컴포넌트에 Props로 전달할 수 있습니다.예를 들어 App 컴포넌트에서 전구의 상태를 관리하고, Bulb 컴포넌트에 전달해보겠습니다.import './App.css'import { useState } from 'react'const Bulb = ({ light }) => { console.log(light) return ( {light ===..

React State로 상태 관리하기-> useState와 리렌더링 이번에는 React의 핵심 기능 중 하나인 State(상태)에 대해 알아보겠습니다.이전에는 Props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고, 이벤트 핸들링을 통해 버튼 클릭과 같은 사용자 행동을 처리했습니다.하지만 실제 웹 애플리케이션에서는 사용자 행동에 따라 화면의 데이터가 변경되어야 합니다.예를 들어 다음과 같은 경우입니다.버튼을 클릭하면 숫자가 증가스위치를 클릭하면 ON/OFF 변경입력창에 입력한 내용이 화면에 반영로그인 상태에 따라 다른 화면 표시이처럼 변하는 데이터를 관리하고, 데이터가 변경되었을 때 UI를 다시 렌더링하기 위해 사용하는 것이 State입니다.1. State란?State는 컴포넌트 내부에서 ..

React 이벤트 처리하기 -> 이벤트 핸들링과 SyntheticEvent이번에는 React에서 사용자의 행동에 반응하는 방법인 이벤트(Event)와 이벤트 핸들링(Event Handling)에 대해 알아보겠습니다.지금까지 React 컴포넌트를 만들고 Props를 통해 데이터를 전달했다면, 이번에는 사용자가 버튼을 클릭하거나 마우스를 움직이는 등의 행동에 따라 특정 기능을 실행하는 방법을 살펴보겠습니다.1. 이벤트(Event)란?이벤트란 웹 페이지 내부에서 발생하는 사용자의 행동이나 특정 상황을 의미합니다.대표적인 이벤트는 다음과 같습니다.버튼 클릭마우스 이동마우스 진입키보드 입력메시지 입력스크롤폼 제출예를 들어 사용자가 버튼을 클릭하면 클릭 이벤트가 발생합니다.사용자 버튼 클릭 ↓클릭 이벤트..

React Props로 데이터 전달하기이번에는 React에서 컴포넌트에 데이터를 전달하는 방법인 Props에 대해 알아보겠습니다.React는 하나의 페이지를 여러 개의 컴포넌트로 나누고, 이를 조합하여 화면을 만드는 방식으로 동작합니다.마치 레고 블록을 여러 개 조립해서 하나의 완성된 결과물을 만드는 것과 비슷합니다.이때 같은 형태의 컴포넌트라도 전달하는 데이터에 따라 서로 다른 화면을 보여줄 수 있습니다.예를 들어 여러 개의 Button 컴포넌트가 있다고 가정해 보겠습니다.[메일][카페][블로그]각 버튼의 구조는 같지만 버튼마다 표시되는 텍스트나 색상은 다를 수 있습니다.이처럼 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용하는 값을 React에서는 Props(Properties)라고 합니다..

React JSX로 UI 표현하기-> JSX 문법과 주의사항, 스타일 적용 방법 이번에는 React에서 화면을 표현할 때 사용하는 JSX에 대해 알아보겠습니다.React 컴포넌트에서는 JavaScript 함수 안에서 HTML과 비슷한 형태의 코드를 작성할 수 있습니다.이러한 문법을 JSX라고 합니다.1. JSX란?JSX는 JavaScript Syntax Extension의 약자로, JavaScript를 확장한 문법입니다.React에서는 JSX를 사용하여 JavaScript 코드 안에서 HTML과 비슷한 문법으로 UI를 표현할 수 있습니다.예를 들어 일반적인 JavaScript 코드에서는 다음과 같이 작성합니다.const Main = () => { return 'main'}하지만 JSX를 사용하면 다음과..

React 컴포넌트란?-> 함수 컴포넌트 만들기와 부모·자식 컴포넌트 구조 이번에는 React의 가장 기본적인 개념인 컴포넌트(Component)에 대해 알아보겠습니다.React는 화면을 하나의 거대한 코드로 만드는 것이 아니라, 화면을 여러 개의 작은 단위로 나누어 개발합니다.이때 화면을 구성하는 각각의 단위를 컴포넌트라고 합니다.1. React 컴포넌트란?이전에 작성한 App.jsx 파일을 보면 다음과 같은 코드가 있습니다.function App() { return ( 안녕 리액트. )}export default App일반적인 JavaScript 함수와 비슷하지만, React에서는 JSX를 반환하는 함수를 만들 수 있습니다.이러한 함수를 React에서는 컴포넌트(Compon..

이번에는 Vite를 이용해서 간단한 React App을 생성하고, 기본으로 제공되는 코드를 정리한 뒤 ESLint까지 설정해보겠습니다.처음 React 프로젝트를 만들 때는 직접 Webpack 등의 개발 환경을 구성하는 것보다 Vite를 사용하는 것이 훨씬 간편합니다.1. React App 만들기React 프로젝트를 직접 처음부터 구성하려면 여러 가지 설정이 필요하지만, 입문 단계에서는 Vite를 사용하는 것을 추천합니다. 그래서 아래와 같은 과정으로 진행하게 됩니다. 1. Node.js 패키지 생성2. React 라이브러리 설치3. 기타 도구 설치 및 설정(입문자에게는 까다로우므로 Vite 설치)Vite란?Vite는 차세대 프론트엔드 개발 도구로, React 등의 프로젝트를 빠르게 생성하고 개발 서버를 ..

[React] React 사용을 위한 Node.js 설정 및 사용법React를 사용하기 전에 먼저 Node.js와 npm의 기본 개념을 알아두면 좋습니다.이번 글에서는 다음 내용을 정리해보겠습니다.Node.js 설치 및 확인npm을 이용한 패키지 생성package.json과 scriptsJavaScript 모듈 시스템CommonJS(CJS)ES Module(ESM)npm을 이용한 외부 패키지 설치node_modules와 package-lock.json1. Node.js란?Node.js는 JavaScript를 브라우저 밖에서도 실행할 수 있도록 해주는 JavaScript 런타임 환경입니다.기존에는 JavaScript를 주로 브라우저에서 실행했지만, Node.js를 사용하면 터미널이나 서버 환경에서도 Jav..

동기와 비동기동기-> 여러개의 작업을 순서대로, 하나씩 표현하는 방식여러 개의 작업이 있을 때 각 작업을 순서대로 처리하는 것을 동기적으로 처리한다라고 표현한다.즉, Task A, Task B, Task C가 있다고 가정한다면, Task A가 종료되면 Task B가 실행되고, Task B가 종료되면 Task C가 실행되고 최종적으로는 순서대로 완료하는 흐름으로 표현할 수 있다. 프로그래밍에서 이렇게 작업을 실행하고 처리해주는 단위를 쓰레드라고 부른다.동기적인 방식의 단점but, 동기적인 방식에는 치명적인 단점이 존재한다.-> Task가 오래 걸리는 작업이라면 작업을 처리하기 전 까지는 다음 Task를 실행할 수 없게되어 전체 프로그램의 성능이 악화되어 버리는 치명적인 단점이 존재한다. 이러한 단점을 해..