이번에는 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 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..