백엔드 개발자 꿈나무의 코딩 기록

지난 To-Do 리스트 만들기에서는 다양한 기능을 추가하다 보니 추가와 수정을 통해서 복잡해지고, 관리하기가 어려웠던 경험을 바탕으로 이번에는 To-Do 리스트 프로젝트를 컴포넌트를 분리해서 각 컴포넌트가 어떻게 서로 데이터를 주고받는지, props를 활용해서 단계별로 학습해보려고 합니다. 구성 : App.js(루트 컴포넌트), ToDoList.js(전체 리스트 컴포넌트), ToDoItem.js(개별 항목 컴포넌트)ToDoItem.js -- 개별 항목 컴포넌트import React from "react";// ToDo 항목 렌더링 컴포넌트function ToDoItem({todo, onDelete, onLike, onToggle}) { return ( onTogg..

이번 글에서는 React의 기본기를 천천히 익히면서 많이 쓰이는 To-Do 리스트를 만들어 봤습니다.실습을 통해서 useState, onChange, onClick, onKeyDown 같은 이벤트 처리 방식과 배열 상태 업데이트 방법을 조금 더 학습할 수 있어서 개인적으로는 되게 유익한 시간이었던 것 같아요! 핵심 개념useState로 입력값과 리스트 항목 상태 관리onChange로 입력값 업데이트onClick + onKeyDown 항목 추가map()으로 리스트 렌더링항목별 삭제항목별 좋아요 수 증가ToDoList 컴포넌트 작성import React, {useState} from 'react';function ToDoList() { const [input, setInput] = useState(''..

이번 글에서는 React를 처음 배우면서 가장 자주 접하게 되는 기능 중 하나인 조건부 렌더링을 학습하려고 합니다.조건부 렌더링은 어떤 조건에 따라 화면(UI)애 표시되는 컴포넌트를 다르게 보여주는 것을 말합니다. 학습 내용조건문 if, 삼항 연산자, && 를 사용한 컴포넌트 출력 방식.로그인 화면과 회원가입 화면을 하나의 컴포넌트에서 전환.버튼 클릭 시 상태값을 바꿔 조건에 따라 UI가 바뀌도록 구현.간단한 입력 폼 구성과 버튼 클릭 이벤트 처리.React의 기본 상태 관리 도구 useState 활용.if문을 사용한 조건부 렌더링import React from "react";function IfRender({isLoggedIn}) { let content; if(isLoggedIn) { ..

이번 글에서는 React 뿐만 아니라 JavaScript 전반에서 자주 사용하는 배열(map)을 React에서 어떻게 사용하는지 공부하려고 합니다.배열(array) : 여러 개의 값을 하나로 묶어 순서대로 저장하는 자료구조. [ ]map() : 배열의 각 요소를 순회하면서 새로운 값을 만들어내는 고차 함수.key : React에서 반복되는 요소를 고유하게 구분하기 위한 식별자.JSX : JavaScript + HTML을 합친 React의 렌더링 문법.문자열 배열을 map으로 출력하기!fruits라는 문자열 배열 정의.JSX 안에서 fruits.map()으로 배열의 각 과일 이름을 태그로 변환해서 출력.각 item에 key로 index를 부여해서 React가 항목을 구분할 수 있다.객체 배열(map)로..

지난 글에서는 React의 기본 개념인 Props, State, onClick 이벤트를 각각 따로 연습하고, 하나의 컴포넌트로 결합해서 연습하는 시간이었다면, 이번 글에서는 입력 폼 처리(input)와 함께 state로 입력값을 관리하고, onChange 이벤트로 실시간 변경을 반영하는 방법을 공부하려고 합니다. input : 사용자의 텍스트 입력을 받는 HTML 요소.state : React 컴포넌트 내부에서 변경 가능한 동적 데이터.onChange : input 내용이 바뀔 때마다 실행되는 이벤트 함수. input + onChangeApp.js 수정npm start 결과input에 입력을 하면 onChange 이벤트는 발생하지만, 그 안에서 값을 저장하는 state를 사용하지 않아서 아무런 변화가 없..

최근에 React를 공부하기 시작하면서 Props, State 같은 단어들이 익숙하지 않았고, onClick 이벤트는 어떻게 다른지 등을 직접 공부하면서 글을 써보려고 합니다.1. Props ?2. State ?3. 버튼 클릭 이벤트 처리 Props 연습새 컴포넌트 Welcome.js 만들기.App.js에서 불러오기저장 후 결과 확인State 연습App.js저장 후 결과 확인클릭 이벤트 연습App.js 수정결과 확인 props + state + onClick 컴포넌트 파일 만들기(이름은 props로 전달받고, 좋아요 수는 state로 관리, 버튼 클릭으로 상태 변경하기)App.js 수정저장 후 확인Props : 부모가 자식에게 데이터 전달.State : likes 상태로 컴포넌트 내부에서 값 관리.on..