📝 게임 보드 컴포넌트 만들기리액트에서 GameBoard 컴포넌트를 만들었어요! 이 컴포넌트는 게임 보드에 해당하는 격자판을 화면에 표시하는 역할을 합니다. 오늘은 그 격자판을 만드는 과정에서 사용한 코드와, map() 함수와 initialGameBoard에 대해 쉽게 풀어보려고 해요.🎯 GameBoard 컴포넌트 구조const initialGameBoard = [ [null, null, null], [null, null, null], [null, null, null],];export default function GameBoard() { return ( {initialGameBoard.map((row, rowIndex) => ( ..
분류 전체보기
📝 리액트의 useState란?리액트에서 컴포넌트의 **상태(state)**를 관리하는 데 사용하는 훅(Hook)인 useState는, 컴포넌트 내에서 동적으로 변할 수 있는 데이터를 다루기 위한 핵심 도구입니다. 상태란 컴포넌트가 가진 값으로, 사용자 입력, 버튼 클릭, 서버 응답 등 다양한 동작에 따라 값이 변할 수 있습니다.🔑 useState 기본 사용법import { useState } from "react";function Counter() { const [count, setCount] = useState(0); // 상태 변수와 갱신 함수 return ( Count: {count} setCount(count + 1)}>Increase );}📌 코드 ..
📝 리액트에서 양방향 바인딩 이해하기리액트에서 양방향 바인딩은 **UI와 상태(state)**를 실시간으로 동기화하는 중요한 개념입니다. 이를 통해 사용자가 UI에서 입력을 하면, 그 값이 상태에 반영되고, 상태가 변경되면 UI도 자동으로 업데이트됩니다. 이번에 작성한 코드에서는 양방향 바인딩을 적용하여 플레이어 이름을 수정하는 기능을 구현했습니다. 이전 코드와 달라진 점을 중심으로 양방향 바인딩의 개념을 정리해 보겠습니다.1️⃣ 상태 관리: useState로 초기화하기const [playerName, setPlayerName] = useState(initialName);리액트에서는 상태를 관리할 때 useState 훅을 사용합니다. 이전에는 name prop을 직접 사용했지만, 이번에는 playerN..
setIsEditing 함수 업데이트 방식 개선이번에는 setIsEditing 함수를 업데이트하는 방식을 조금 더 안정적이고 명확하게 개선한 코드입니다. 이전에는 setIsEditing(!isEditing)와 같이 상태를 반전시키는 방식으로 상태를 변경했는데, 이 방식에 대해 설명하고, 어떻게 개선할 수 있는지 알아보겠습니다.기존 방식 (문제점)setIsEditing(!isEditing);이 방식은 isEditing 상태의 값을 반전시켜주는 방식입니다. 하지만 React에서는 상태 업데이트가 비동기적으로 이루어지기 때문에, 상태를 업데이트할 때 현재 상태값을 참조하지 못할 위험이 있습니다.예를 들어, 상태가 여러 번 변경되는 경우, isEditing의 이전 상태값을 제대로 참조하지 못할 수 있습니다.이로..
📝 버튼 상태 변화 & 입력 필드 유지이전 코드에서 개선된 점은 버튼의 동적 변경과 Edit → Save → Edit 전환 방식입니다.이번 코드에서는 Edit 버튼을 클릭하면 "Save" 버튼으로 변경되며, 다시 클릭하면 원래 상태로 돌아갑니다.1️⃣ Edit 버튼을 Save 버튼으로 바꾸기이전에는 버튼이 항상 "Edit"로 표시되었지만, 이제 버튼의 내용이 동적으로 변경됩니다.{isEditing ? "Save" : "Edit"}→ isEditing이 true이면 "Save" 버튼이 되고, false이면 "Edit" 버튼이 됩니다.또한, 아래와 같이 변수를 따로 선언하여 관리하는 방법도 가능합니다.let btnCaption = "Edit";if (isEditing) { btnCaption = "Sav..
📝 리액트의 props와 state, 그리고 컴포넌트의 독립성이번에는 Edit 버튼을 클릭하면 해당 플레이어의 이름을 수정할 수 있는 기능을 추가하였습니다.아직 저장 기능은 구현하지 않았지만, 버튼을 클릭하면 입력창이 나타나도록 만들었습니다.이 과정에서 리액트의 컴포넌트 독립성과 상태(state) 관리 개념을 자연스럽게 이해할 수 있습니다.1️⃣ props와 state의 역할✅ props란?props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다.이번 코드에서는 Player 컴포넌트가 App 컴포넌트로부터 name과 symbol을 props로 전달받아 사용하고 있습니다.✅ state란?state는 컴포넌트 내부에서 관리되는 데이터입니다.useState를 사용하면 컴포넌트가 자신의 상태..
📌 1. 프로젝트 구조현재까지 작성한 코드는 다음과 같은 구조를 가지고 있습니다./src ├── components │ ├── Player.jsx // 플레이어 정보를 표시하는 컴포넌트 ├── App.js // 메인 컴포넌트 ├── index.js // React 앱을 실행하는 엔트리 파일 ├── index.css // 스타일링 파일Player.jsx는 개별 플레이어 정보를 나타내는 컴포넌트이며, App.js에서 이를 불러와 화면에 표시합니다.📌 2. Player.jsx 컴포넌트 (재사용 가능한 UI 요소)우선 Player.jsx 코드를 살펴보겠습니다.export default function Player({ name, symbol }) { ret..
📌 리액트 기본 용어 정리1️⃣ 컴포넌트 (Component)UI를 구성하는 독립적인 블록.함수형 컴포넌트와 클래스형 컴포넌트가 있지만, 최근에는 함수형 컴포넌트가 주로 사용됨.function Button() { return Click me;}2️⃣ 프롭스 (Props, Properties)부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터.function Greeting(props) { return Hello, {props.name}!;}3️⃣ 상태 (State)컴포넌트 내부에서 관리하는 동적인 데이터.import { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( ..
✔ 리액트 프로젝트에서 꼭 jsx를 사용할 필요는 없지만, 편리하다. ✔ 여기서 태그를 지우면? 에러가 난다.왜? jsx에서는 하나의 상위 혹은 부모 요소를 가지고 있어야 하기 때문이다 2개의 요소를 한번에 반환할 수 없다. 엄밀히 말하면 하나의 값 만을 반환하기 위해서 ✔ 태그 사용가능 ✔ 최신 리액트 프로젝트에서는 이렇게 빈 태그 사용 가능하다
▶ 컴포넌트 내부에 함수를 만들고 prop으로 onClick 설정. 이때 함수 이름 옆에 () 괄호는 적지 않는다 ▶ 이런식으로 사용자가 임의로 정한 prop(onSelect)로 클릭 이벤트를 설정할수도 있다. 이 경우 handleSelect 함수는 App.js 파일로 이동시킨다. ▶ 이렇게 커스텀한 식별자, 커스텀한 매개변수를 사용할 수 있다. ▶ 기본적으로 리액트는 컴포넌트 함수를 코드 내에서 처음 발견했을 때 한 번밖에 실행하지 않는다는 걸 명심해야 한다. State!!!!!!!!!!!!! 그래서 상태가 리액트에서 매우 중요한 개념이다. 리액트에서 처리되는 변수를 등록하는 것이며, 리액트가 제공하는 함수의 도움을 받아 업데이트 된다 ▶ 이제 정상적으로 탭 버튼 컴포넌트들이 실행된다
