프론트엔드(Frontend)

[React] React에서 상태를 업데이트하는 함수를 전달하는 예제

안녕하세요! 이번 블로그 글에서는 React에서 상태를 업데이트하는 함수를 자식 컴포넌트로 전달하고 활용하는 예제를 살펴보겠습니다. 이를 통해 각 컴포넌트 간의 효율적인 상태 관리 방법을 배울 수 있습니다. Box 컴포넌트 생성 먼저, 간단한 박스 컴포넌트(Box.jsx)를 생성합니다. 이 컴포넌트는 클릭할 때마다 색이 변경되는 기능을 가지고 있습니다. import "./Box.css"; function Box({ isActive, toggle }) { return ( ); } export default Box; BoxGrid 컴포넌트 생성 다음으로, Box 컴포넌트를 이용하여 게임 보드(Grid)를 생성하는 BoxGrid 컴포넌트를 만듭니다. 이 컴포넌트는 각 박스의 상태를 관리하고, 리셋 기능을 제공..

[React] 예제로 배우는 컴포넌트 설계 및 구현

Die 컴포넌트 Die 컴포넌트는 가장 기본이 되는 부분입니다. 상태 없이 값을 렌더링하는 역할을 합니다. 여기서는 로 감싸진 값만을 표시하므로 매우 간단합니다. // die.jsx import './Die.css'; const Die = ({ val }) => ( {val} ); export default Die; Die 컴포넌트에는 CSS 스타일이 포함되어 있습니다. Die.css 파일을 만들고 스타일을 적용하면 완성됩니다. Dice 컴포넌트 Dice 컴포넌트는 여러 개의 Die 컴포넌트를 렌더링하는 역할을 합니다. 주어진 dice 배열을 기반으로 Die 컴포넌트를 반복해서 생성합니다. // Dice.jsx import Die from "./Die"; import "./Dice.css"; functi..

[React] 점수 기록기 예제 - React 연습

이번에는 간단한 React 연습을 통해 상태 관리와 이벤트 처리를 다뤄보는 예제인 "ScoreKeeper"를 만들어 보았습니다. 이 예제는 여러 참가자가 참여하는 게임에서 각 참가자의 점수를 기록하고, 목표 점수에 도달하면 승리자를 표시하는 간단한 기록기입니다. ScoreKeeper 컴포넌트 구성 상태 초기화: 먼저, 각 참가자의 점수를 저장할 scores 배열을 초기화합니다. 이 배열은 numPlayers(참가자 수)에 따라 생성되며, 모든 참가자의 점수는 0으로 시작합니다. const [scores, setScores] = useState(new Array(numPlayers).fill(0)); UI 렌더링: scores.map을 사용하여 각 참가자의 이름과 현재 점수를 화면에 출력합니다. 또한 각 ..

[React] 배열의 모든 요소 업데이트하기

이 대본을 통해 배열의 모든 요소를 업데이트하는 일반적인 패턴을 살펴보겠습니다. 1. 이모티콘 생성 및 삭제 이전글에서 작성했던 코드에서는 이모티콘 생성과 삭제 기능이 구현되어 있습니다. 새 이모티콘을 추가할 때는 전개 연산자를 활용하여 이전 이모티콘들을 복사하고, 새 이모티콘을 추가한 새로운 배열을 생성합니다. 이 때, 삭제는 filter 메서드를 활용하여 삭제하고자 하는 이모티콘을 제외한 복사본을 만듭니다. // 이모티콘 추가 const addEmoji = () => { setEmojis((oldEmojis) => [ ...oldEmojis, {id: uuid(), emoji: randomEmoji()} ]); }; // 이모티콘 삭제 const deleteEmoji = (id) => { setEmo..

[React] 배열을 업데이트하는 일반적인 패턴

이 블로그 글에서는 리액트에서 배열을 변경하지 않고도 배열을 업데이트하는 흔한 패턴을 살펴보겠습니다. 이러한 방식은 상태를 변경할 때 원본 배열을 직접 수정하지 않고도 새로운 배열을 생성하여 업데이트하는 방법으로, 리액트 애플리케이션에서 흔히 사용됩니다. 1. 배열에 요소 추가하기 새로운 아이템을 배열에 추가할 때는 전개 연산자(...)를 사용하여 기존 배열을 복사하고, 새로운 요소를 추가합니다. const updatedCart = [...shoppingCart, { id: 4, product: "Coffee Mug", price: 7.99 }]; 2. 배열에서 요소 삭제하기 배열에서 요소를 삭제할 때는 filter 메서드를 활용하여 삭제하고자 하는 요소를 제외한 새로운 배열을 생성합니다. const u..

[React] 리액트에서 배열 상태 관리하기: 배열과 상태 활용 방법

리액트에서 상태(State)를 다루는 것은 매우 중요한 부분 중 하나입니다. 이번에는 배열과 상태를 함께 사용하는 경우를 살펴보겠습니다. 배열과 상태는 둘 다 변경이 가능한 객체이기 때문에 주의가 필요합니다. 이번 글에서는 배열을 사용한 상태 관리에 대해 알아보겠습니다. 배열과 상태의 유사성 배열과 상태를 오브젝트로 다룰 때, 두 가지 측면에서 주의해야 합니다. 둘 다 변경이 가능하기 때문에 동일성의 문제가 발생할 수 있습니다. 리액트는 객체나 요소의 동일성을 기준으로 상태의 변화를 감지합니다. 배열의 상태 업데이트 배열을 다룰 때 자주 사용하는 메서드 중 하나는 배열을 복사하고 업데이트하는 방법입니다. 예를 들어, 배열에 요소를 추가하고 싶을 때 어떻게 해야 할까요? const [emojis, setE..

[React] 상태에 오브젝트 사용: ScoreKeeper 컴포넌트의 점수 업데이트

이번에는 리액트에서 상태를 업데이트하는 데에 새로운 시도를 해보려 합니다. "ScoreKeeper"라는 게임 점수 기록 컴포넌트를 만들 예정이며, 여러 참가자의 점수를 관리하는데 초점을 맞추고 있습니다. 이 컴포넌트에서는 참가자 1과 참가자 2의 점수를 증가시키는 버튼이 있습니다. 기존에는 각각의 상태 조각을 만들어 사용했지만, 이제는 두 참가자의 점수를 관리하기 위해 하나의 오브젝트를 사용할 것입니다. const [scores, setScores] = useState({ p1Score: 0, p2Score: 0 }); 기존에는 숫자나 문자열과 같은 기본 데이터 타입을 다뤘지만, 이번에는 오브젝트를 사용하여 상태를 업데이트하는 방법을 살펴보겠습니다. 그러나 주의할 점은 이렇게 오브젝트를 직접 수정하는 것..

[React] 리액트에서 다시 렌더링하는 경우: 상태 업데이트와 재렌더링 메커니즘

리액트에서 상태를 다룰 때, 기본 데이터 타입인 숫자, 불리언, 문자열 등을 다뤘습니다. 이러한 상태를 업데이트할 때는 간단히 새 값을 상태에 넣어주면 리액트가 새 값이 있는지를 비교하여 재렌더링을 결정합니다. 예를 들어, Counter 컴포넌트에서는 setCount 함수를 사용하여 상태를 업데이트하고 있습니다. 이때, 숫자를 다루고 있다면 자바스크립트에서는 새 값을 만들어내기가 쉽습니다. 예를 들어, 0에 1을 더하면 자바스크립트 세계에서는 1이 되어 새로운 값이 만들어집니다. 그리고 리액트는 이런 방식으로 상태 업데이트를 할 때 새 값을 확인하여 자동으로 재렌더링을 수행합니다. 하지만 같은 값으로 계속해서 상태를 설정하면 리액트는 무턱대고 재렌더링을 하지 않습니다. 즉, 상태에 변화가 있을 때만 재렌..