072DATA

안녕  오늘은 부모 -> 자식 -> 자식의 자식의 형태로 내려오면 나타나는 prop Drilling을해결할 수 있는 Context API의 useContext를 사용하고 정리해봄  Prop drilling 리액트 애플리케이션에서 데이터 전달은 주로 props를 통해 이루어짐하지만 컴포넌트 구조가 깊어질수록 데이터 전달 과정에서 Prop Drilling 문제가 발생할 수 있고Prop Drilling은 데이터를 필요로 하지 않는 중간 컴포넌트가 단순히 데이터를 전달하기 위해props를 받게 되는 비효율적인 구조를 의미함이는 컴포넌트의 구조를 복잡하게 만들고, 유지보수와 디버깅을 어렵게 만듦 이 문제를 해결하기 위해 리액트는 Context API를 제공하고Context API는 특정 컴포넌트 트리 내에서 전역..

useRef React에서 제공하는 훅으로 함수 컴포넌트에서 DOM 요소에 접근하거나리렌더링과 상관없이 값을 유지할 수 있는 변수를 관리할 때 유용   주요 기능  DOM 요소에 접근하기 import { useRef } from 'react';function InputFocus() { const inputRef = useRef(null); const focusInput = () => { inputRef.current.focus(); }; return ( Focus Input );} 위 코드에서는 input 요소에 ref를 연결해 버튼 클릭 시 해당 입력 필드에 포커스를 줄 수 있음     값 저장 및 유지 useRef는 컴포넌트가 리렌더링되더라도 변경되지 ..

useEffect useEffect는 React에서 비동기 작업, 구독, 타이머 설정 등 다양한 작업을 처리하는 강력한 도구이며React에서 컴포넌트의 생명주기 동안 발생하는 효과를 처리하기 위해 사용하는 Hook 임 Hook을 사용하면 컴포넌트가 렌더링될 때 특정 작업을 수행하거나특정 상태가 변경될 때 작업을 수행하도록 설정할 수 있음    기본 사용법  useEffect(() => { // 실행할 코드}, [dependencies]);  첫 번째 매개변수는 실행할 함수두 번째 매개변수는 의존성 배열이 배열에 값이 변경될 때만 함수가 실행됨 빈 배열 []을 전달하면 컴포넌트가 처음 마운트될 때만 실행되고 그 이후에는 실행되지 않음의존성 배열이 없는 경우useEffect(() => { // 컴포넌트가..

안녕오늘은 개인과제를 다시 타임어택으로 재 작성하였는데 이를 다시 복습하고자 블로그로 정리해보았습니다. 해당 코드는 React에서 부모 -> 자식간의 상태 관리와 컴포넌트의 재사용성에 중점을 두어 작성하였습니다.   Parent 컴포넌트 전체 애플리케이션의 상태를 관리하며메달 정보를 입력하고 업데이트하는 역할입니다.  import React from "react";import { useState } from "react";import Form from "./Form";const Parent = () => { const [countries, setCountries] = useState([]); const [formData, setFormData] = useState({ country: "", ..

스타일드 컴포넌트(Styled-Components) React에서 스타일링을 쉽게 할 수 있도록 도와주는 CSS-in-JS 라이브러리!스타일드 컴포넌트를 사용하면 컴포넌트에서 스타일을 정의하고자바스크립트 코드 내에서 CSS를 작성하는 방식으로 동작해유  특징 CSS와 JS의 결합: CSS 코드가 JS안에 포함되고  스타일과 로직을 하나의 컴포넌트로 관리할 수 있음동적 스타일링: props나 상태에 따라 스타일을 동적으로 변경할 수 있어 유연한 스타일링이 가능함자동 클래스명 생성: 고유한 클래스명을 자동으로 생성해주어 클래스명 충돌 문제를 방지할 수 있음  사용법  설치npm install styled-components 스타일드 컴포넌트를 설치하슈   사용예제 import styled from 'styl..

인터넷 프로토콜 스택의 4계층애플리케이션 계층 - HTTP, FTP전송 계층 - TCP, UDP인터넷 계층 - IP네트워크 인터페이스 계층  IP(인터넷 프로토콜)  IP - 인터넷 프로토콜의 역할지정한 IP 주소(IP Address)에 데이터 전달패킷(Packet)이라는 통신 단위로 데이터 전달 IP 프로토콜의 한계비연결성 - 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷 전송비신뢰성 - 중간에 패킷이 사라지거나 여러 개의 패킷이 순서대로 안올 수 있음프로그램 구분 - 같은 IP를 사용하는 서버에서 통신하는 애플리케이션이 둘 이상일 수 있음  TCP - Transmssion Control Protocol (전송 제어 프로토콜)   TCP 특징연결 지향 - TCP 3 way handshake ( ..

안녕 시작하기에 앞서서 개인프로젝트 진행중value라는 속성을 굳이 왜 써야하나 하고 공부하다 보니제어 컴포넌트와 비제어 컴포넌트에 대해서 정리하게 되었다..    비제어 컴포넌트 value 속성이 없는 입력 필드는 비제어 컴포넌트인데이 경우 입력 필드의 값은 React 상태와 직접 연결되지 않습니다사용자의 입력은 DOM에서 직접관리하여입력 필드의 값은 상태가 아닌 입력필드 자체에 저장됩니다     여기서는 value 속성이 없기 때문에입력필드의 값은 React 상태와 연결되지 않고사용자 입력에 의해 직접적으로 관리됩니다!  장점 상태관리가 필요 없는 간단한 입력필드에서는 비제어 컴포넌트를 사용할 수 있음간단한 폼이나 사용자의 입력을 직접적으로 처리할 때 유용할 수 있음단점 입력 필드의 값을 추적하려면 ..

컴포넌트란?  리액트 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드 조각 같은 것    컴포넌트 종류  함수형 컴포넌트: 함수로 정의되며, props를 받아 JSX를 반환함 클래스형 컴포넌트: 클래스로 정의되며, render() 메서드를 통해 JSX를 반환함  Props란? props는 컴포넌트에 전달되는 데이터임컴포넌트의 외부에서 입력받은 값으로 컴포넌트의 렌더링 방식에 영향을 미침 Props의 특징 읽기 전용: props는 컴포넌트 내부에서 수정할 수 없음  전달 방법: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됨   디폴트 값 설정: 기본값을 설정하려면 defaultProps를 사용함 MyComponent.defaultProps = { message: "기본 텍스ㅡ트"}..

템플릿 리터럴(Template Literal) 안녕하세요 오늘은 자바스크립트 ES6부터 제공된 템플릿 리터럴에 대해서 알아보겠습니다. 템플릿 리터럴은 자바스크립트에서 문자열을 좀 더 유연하게 다루고 싶을 때 유용하게 쓸 수 있는 문법입니다기존의 문자열 표현 방법보다 편리하고 코드도 훨씬 깔끔하게 작성할 수 있습니다.템플릿 리터럴은 백틱(``)으로 감싸서 사용합니다.      주요 기능   변수 삽입 const name = "이태규";const greeting = `안녕, ${이태규}!`;console.log(greeting); // "안녕, 이태규!"  문자열 안에 변수를 넣을 수 있습니다.${} 구문을 이용해서 변수나 표현식을 그대로 문자열에 삽입합니다.    다중 행 문자열 const multilin..

걷기반 실습에서 받은 실습 문제인데자바스크립트로 API 데이터를 불러와서DOM에 추가하는 과정을 정리해봤음.비동기 함수, 오류 처리, 데이터 정제를 다룸   비동기 함수 만들기먼저 fetchComments라는 함수를 비동기로 만들어야 함.async와 await 키워드를 활용해서 API 호출이 완료될 때까지 기다릴 수 있도록 해야 함.이렇게 하면 데이터가 다 로드된 다음에야 그 다음 작업을 진행할 수 있음. async function fetchComments() { try { const response = await fetch(apiUrl); const comments = await response.json(); // 이후 코드는 여기서 작성됨 } catch (error) { co..